/* --- Brand Color: #15C6ED --- */

/* =========================================
   DESKTOP STYLES (Large Screens)
   ========================================= */

/* --- Navbar Spacing, Tint, & Border --- */
#quarto-header .navbar {
  min-height: 250px !important; 
  padding-top: 25px !important;
  padding-bottom: 25px !important;
  background-color: #EAF9FE !important; /* Pale Brand Blue */
  border-bottom: 5px solid #15C6ED !important; 
}

/* --- Logo Sizing: Absolute Pixel Lock --- */
#quarto-header .navbar-brand-container, 
#quarto-header .navbar-brand {
  height: 220px !important;
  max-height: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

#quarto-header img.navbar-logo, 
#quarto-header .navbar-brand img {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  width: 199px !important;       
  min-width: 199px !important;
  max-width: 199px !important;
  margin-right: 15px !important;
  object-fit: contain !important;
}

/* --- Title & Link Typography --- */
#quarto-header .navbar-title {
  color: #15C6ED !important;
  font-size: 36px !important; 
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

/* --- Subtitle Injection & Styling --- */
#quarto-header .navbar-title::after {
  /* Using Unicode italic characters below so only the first two words are italicized */
  content: "𝘞𝘳𝘪𝘵𝘵𝘦𝘯 𝘣𝘺 Professor Colin Foster";
  display: block; 
  font-size: 18px !important; 
  font-weight: 500 !important;
  color: #444444 !important; 
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  margin-top: 4px !important;
}

#quarto-header .nav-link {
  color: #444444 !important;
  font-weight: 600 !important;
  font-size: 22px !important; 
  margin-left: 15px !important;
}

#quarto-header .nav-link:hover {
  color: #15C6ED !important;
}

/* --- Search Bar Styling --- */
#quarto-search {
  min-width: 400px !important; 
}

.form-control:focus, .aa-Input:focus {
  border-color: #15C6ED !important;
  box-shadow: 0 0 0 0.25rem rgba(21, 198, 237, 0.25) !important;
}

.aa-SubmitIcon {
  color: #15C6ED !important;
}


/* =========================================
   MOBILE & TABLET STYLES (Small Screens)
   ========================================= */

@media (max-width: 991px) {
  
  /* Shrink the Navbar height */
  #quarto-header .navbar {
    min-height: 100px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Shrink the Logo to 80px tall */
  #quarto-header .navbar-brand-container, 
  #quarto-header .navbar-brand {
    height: 80px !important;
  }

  #quarto-header img.navbar-logo, 
  #quarto-header .navbar-brand img {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    width: 72px !important;       
    min-width: 72px !important;
    max-width: 72px !important;
    margin-right: 10px !important;
  }

  /* Shrink the Title */
  #quarto-header .navbar-title {
    font-size: 24px !important; 
  }
  
  /* Shrink the Subtitle */
  #quarto-header .navbar-title::after {
    font-size: 13px !important; 
    margin-top: 2px !important;
  }

  /* Release the strict 400px search bar width so it fits the screen */
  #quarto-search {
    min-width: 100% !important; 
    margin-top: 15px !important; 
  }
}

/* =========================================
   VIDEO EMBED RESPONSIVENESS & LAYER FIXES
   ========================================= */

/* 1. Force 3D Hardware Acceleration for any legacy iframes or overlays */
iframe[src*="youtube.com"], 
iframe[src*="youtube-nocookie.com"],
.quarto-video iframe {
  transform: translate3d(0, 0, 0) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* 2. Lock containers to a clean 16:9 aspect ratio for perfect scaling */
.quarto-video,
.video-wrapper {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  height: auto !important;
}

/* =========================================
   CLICKABLE CATEGORY TAGS FOR VIDEO PAGES
   ========================================= */
/* Target categories aggressively across the entire page layout */
.quarto-category,
.quarto-categories .quarto-category,
.quarto-title-meta-contents .quarto-category {
  cursor: pointer !important;
  display: inline-block !important;
  transition: all 0.2s ease-in-out !important;
}

/* Force the hover state to change background, text color, and border */
.quarto-category:hover,
.quarto-categories .quarto-category:hover,
.quarto-title-meta-contents .quarto-category:hover {
  background-color: #15C6ED !important; /* Your Brand Blue */
  color: #ffffff !important;             /* Crisp White Text */
  border-color: #15C6ED !important;      /* Matches the background */
  transform: translateY(-1px);           /* Subtle lift effect */
}

/* =========================================
   RAZOR-SHARP & UN-CROPPED GRID THUMBNAILS
   ========================================= */
/* Target all possible image placements in Quarto's grid listings */
.quarto-listing-container-grid .card-img-top,
.listing-item .thumbnail img,
.thumbnail-image img,
.quarto-listing-item img {
  width: 100% !important;
  height: auto !important;        /* Let the natural image height rule */
  aspect-ratio: auto !important;  /* Remove forced aspect math to prevent text blur */
  object-fit: contain !important; /* Guarantees 100% of the image is visible—no logo clipping */
  background-color: transparent !important;
  
  /* Reset to native, un-blurred high-quality browser downsampling */
  image-rendering: auto !important; 
  filter: none !important;
  transform: none !important;
}

/* Ensure Quarto's card containers do not restrict or cut off the image boundaries */
.quarto-listing-container-grid .thumbnail-image,
.quarto-listing-container-grid .grid-item img,
.quarto-listing-container-grid .card {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important; /* Prevents container-level edge clipping of your logo */
}

/* Hide grid text elements on the home page, keeping them searchable */
.quarto-listing-container-grid .card-body {
  display: none !important;
}

/* =========================================
   CUSTOM HYPERLINK STYLING (BRAND ALIGNED)
   ========================================= */
/* Target general body text links, ignoring things we've already styled */
main a:not(.quarto-category),
.quarto-container a:not(.nav-link):not(.quarto-category):not(.navbar-brand):not(.page-footer a) {
  color: #11a2c2 !important; /* A slightly deeper, high-contrast version of your brand blue so it's easy to read against white backgrounds */
  text-decoration: underline;
  text-decoration-color: rgba(21, 198, 237, 0.4); /* A soft, transparent underline using your exact brand blue */
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Make the link smoothly illuminate when hovered over */
main a:not(.quarto-category):hover,
.quarto-container a:not(.nav-link):not(.quarto-category):not(.navbar-brand):not(.page-footer a):hover {
  color: #15C6ED !important; /* Glows up to your exact, bright brand blue on hover */
  text-decoration-color: #15C6ED !important; /* Underline turns solid brand blue */
}