/**
 * Header Customization - Single Control Point
 * Created: 2025-11-05
 *
 * ADJUST HEADER HEIGHT HERE - Change --header-height to any value
 * Everything else will automatically adjust!
 */

:root {
  /* ==== SINGLE CONTROL POINT ==== */
  --header-height: 60px;  /* Mobile default */

  /* Calculated values (don't change these) */
  --header-height-rem: calc(var(--header-height) / 14); /* For rem-based calculations */
}

/* Responsive header heights */
@media only screen and (min-width: 640px) {
  :root {
    --header-height: 75px;  /* Tablet */
  }
}

@media only screen and (min-width: 960px) {
  :root {
    --header-height: 90px;  /* Desktop */
  }
}

/* ====================
   REMOVE SHADOW & BORDER
   ==================== */

.contain-to-grid {
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border-bottom: none !important;
}

.contain-to-grid.shadowless {
  border-bottom: none !important;
}

/* ====================
   FULL BROWSER WIDTH
   ==================== */

.contain-to-grid {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.contain-to-grid .top-bar {
  max-width: 100% !important;
  width: 100% !important;
}

/* ====================
   SINGLE HEIGHT CONTROL
   ==================== */

/* Main container height */
.contain-to-grid {
  height: var(--header-height) !important;
}

/* Top bar height */
.top-bar {
  height: var(--header-height) !important;
}

/* Site title area - CRITICAL: line-height must match height */
.contain-to-grid .title-area,
.contain-to-grid .title-area li,
.contain-to-grid .title-area a {
  height: var(--header-height) !important;
  line-height: var(--header-height) !important;
}

/* H1 link styling - FIX for vertical alignment */
.top-bar .title-area .name h1 {
  margin: 0 !important;
  padding: 0 !important;
}

.top-bar .title-area .name h1 a {
  height: var(--header-height) !important;
  line-height: normal !important;  /* Don't constrain by line-height */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* Align to left */
  padding-right: 60px !important;  /* Space for menu icon on mobile */
}

@media only screen and (min-width: 960px) {
  .top-bar .title-area .name h1 a {
    padding-right: 0 !important;
  }
}

/* Site logo - responsive sizing */
.site-logo {
  height: 50px !important;  /* Mobile size */
  width: auto !important;
}

@media only screen and (min-width: 640px) {
  .site-logo {
    height: 70px !important;  /* Tablet size */
  }
}

@media only screen and (min-width: 960px) {
  .site-logo {
    height: 90px !important;  /* Desktop size */
  }
}

/* Menu items height */
.contain-to-grid .top-bar-section li:not(.has-form) a:not(.button) {
  height: var(--header-height) !important;
  line-height: var(--header-height) !important;
  letter-spacing: 0 !important;  /* Remove expanded spacing - classic and minimalist */
  padding-left: 15px !important;  /* Compact horizontal spacing */
  padding-right: 15px !important;
}

/* Extra padding for dropdown items to accommodate arrow */
.contain-to-grid .top-bar-section .has-dropdown > a {
  padding-right: 28px !important;  /* Extra space for arrow */
}

/* Dropdown menu items */
.contain-to-grid .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
  height: var(--header-height) !important;
  line-height: var(--header-height) !important;
  letter-spacing: normal !important;  /* Already set in dropdown styling */
}

/* ====================
   SHRINK STATE (when scrolling)
   ==================== */

.f-topbar-fixed.shrink .contain-to-grid {
  height: var(--header-height) !important;
}

.f-topbar-fixed.shrink .top-bar {
  height: var(--header-height) !important;
  line-height: var(--header-height) !important;
}

.f-topbar-fixed.shrink .top-bar .top-bar-section li:not(.has-form) a:not(.button) {
  height: var(--header-height) !important;
  line-height: var(--header-height) !important;
  letter-spacing: 0 !important;  /* Compact spacing */
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Extra padding for dropdown items in shrink state */
.f-topbar-fixed.shrink .top-bar .top-bar-section .has-dropdown > a {
  padding-right: 28px !important;  /* Extra space for arrow */
}

.f-topbar-fixed.shrink .top-bar .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
  height: var(--header-height) !important;
  line-height: var(--header-height) !important;
}

.f-topbar-fixed.shrink .top-bar .title-area,
.f-topbar-fixed.shrink .top-bar .title-area li,
.f-topbar-fixed.shrink .top-bar .title-area a {
  height: var(--header-height) !important;
  line-height: var(--header-height) !important;
}

/* ====================
   ALIGNMENT: Title Left, Menu Right
   ==================== */

/* Mobile: title-area takes most space, menu icon on right */
.top-bar .title-area {
  padding-left: 10px !important;
  width: auto !important;
}

/* Mobile: Ensure menu icon is visible and clickable */
.top-bar .toggle-topbar.menu-icon {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 100 !important;
}

.top-bar .toggle-topbar.menu-icon a {
  padding: 0 15px !important;
  height: 60px !important;
  line-height: 60px !important;
  display: block !important;
}

/* Desktop padding */
@media only screen and (min-width: 960px) {
  .top-bar .title-area {
    padding-left: 20px !important;
    width: 300px !important;
  }

  .top-bar .top-bar-section {
    padding-right: 20px !important;
  }

  .top-bar .toggle-topbar.menu-icon {
    position: static !important;
  }
}

/* Mobile: Allow Foundation's default behavior - REMOVED, conflicts with display:none below */

/* Ensure menu stays on the right - DESKTOP ONLY */
@media only screen and (min-width: 960px) {
  .top-bar-section {
    float: right !important;
  }
}

/* ====================
   RESPONSIVE ADJUSTMENTS
   ==================== */

/* Dropdown arrow positioning - auto-adjust based on height */
.contain-to-grid .top-bar-section .has-dropdown > a:after {
  top: calc(var(--header-height) / 2 - 3px) !important;
  margin-left: 6px !important;  /* Add space between text and arrow */
  border-width: 4px !important;  /* Ensure arrow is visible */
}

.f-topbar-fixed.shrink .top-bar .top-bar-section .has-dropdown > a:after {
  top: calc(var(--header-height) / 2 - 3px) !important;
  margin-left: 6px !important;  /* Add space between text and arrow */
  border-width: 4px !important;  /* Ensure arrow is visible */
}

/* ====================
   ACTIVE MENU STATE
   ==================== */

/* Remove bottom border from active menu items */
.top-bar-section ul li.active > a {
  border-bottom: none !important;
  background: #002856 !important;  /* UC Merced Navy Blue */
  color: #FFFFFF !important;        /* White text */
}

.top-bar-section ul li.active > a:hover {
  background: #001f42 !important;   /* Darker navy on hover */
  color: #FFFFFF !important;
}

/* Desktop active state */
@media only screen and (min-width:960px) {
  .top-bar-section li.active:not(.has-form) a:not(.button) {
    border-bottom: none !important;
    background: #002856 !important;
    color: #FFFFFF !important;
  }

  .top-bar-section li.active:not(.has-form) a:not(.button):hover {
    background: #001f42 !important;
    color: #FFFFFF !important;
  }
}

/* ====================
   DROPDOWN ARROW FLIP ANIMATION - DESKTOP ONLY
   ==================== */

@media only screen and (min-width: 960px) {
  /* Dropdown arrow default state */
  .top-bar-section .has-dropdown > a:after {
    transition: transform 0.3s ease !important;
    transform: rotate(0deg);
  }

  /* Flip arrow when dropdown is shown */
  .top-bar-section .has-dropdown:hover > a:after,
  .top-bar-section .has-dropdown.hover > a:after {
    transform: rotate(180deg) !important;
  }

  /* ====================
     DROPDOWN HOVER BEHAVIOR
     ==================== */

  /* Smooth dropdown appearance */
  .top-bar-section .has-dropdown .dropdown {
    transition: opacity 0.2s ease, visibility 0.2s ease;
    opacity: 0;
    visibility: hidden;
  }

  .top-bar-section .has-dropdown:hover .dropdown,
  .top-bar-section .has-dropdown.hover .dropdown {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ====================
   DROPDOWN MENU STYLING - DESKTOP ONLY
   ==================== */

/* White background with rounded corners and shadow - DESKTOP ONLY */
@media only screen and (min-width: 960px) {
  .top-bar-section .dropdown {
    background: #FFFFFF !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    margin-top: 0 !important;  /* Remove gap to prevent dropdown from disappearing */
    padding-top: 0 !important;  /* No top padding */
    border-top: none !important;  /* No top border */
  }
}

/* Dropdown menu items - Override style.css line 844-845 */
.top-bar-section .dropdown li a,
.contain-to-grid .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
  background: #FFFFFF !important;
  color: #333333 !important;
  height: auto !important;  /* Override hardcoded 60px */
  line-height: 1.4 !important;  /* Normal line height, not 60px */
  padding: 8px 20px !important;  /* Reduced vertical padding from 12px to 8px */
  text-transform: none !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  letter-spacing: normal !important;  /* Fix expanded word spacing */
}

/* Dropdown item hover state */
.top-bar-section .dropdown li:not(.has-form):not(.active) a:not(.button):hover {
  background: #FFBF3C !important;  /* UC Merced Gold */
  color: #002856 !important;        /* UC Merced Navy text */
}

/* Remove default dark background from Foundation */
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
  background: #FFFFFF !important;
  color: #333333 !important;
}

/* Desktop specific dropdown styles */
@media only screen and (min-width:960px) {
  .top-bar-section .dropdown li a,
  .contain-to-grid .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
    height: auto !important;  /* Override hardcoded 60px */
    line-height: 1.4 !important;  /* Normal line height, not 60px */
    padding: 8px 20px !important;  /* Match reduced vertical padding */
    letter-spacing: normal !important;  /* Ensure normal spacing on desktop */
  }
}

/* Override shrink state dropdown styles (style.css line 963) */
.f-topbar-fixed.shrink .top-bar .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
  height: auto !important;
  line-height: 1.4 !important;
  padding: 8px 20px !important;
}

/* ====================
   NOTES FOR ADJUSTMENT
   ==================== */

/*
 * TO CHANGE HEADER HEIGHT:
 * 1. Change --header-height value at the top of this file (line 11)
 * 2. Rebuild site (jekyll build)
 * 3. That's it! Everything else adjusts automatically.
 *
 * Examples:
 *   --header-height: 45px;  (compact)
 *   --header-height: 50px;  (balanced)
 *   --header-height: 60px;  (original)
 *   --header-height: 70px;  (spacious)
 *   --header-height: 90px;  (current)
 */

/* ====================
   MOBILE MENU FIX
   ==================== */

/* Mobile: Hide menu by default, show when expanded */
@media only screen and (max-width: 959px) {
  /* Remove any height constraints that might hide content */
  .contain-to-grid,
  .top-bar {
    height: auto !important;
    min-height: 60px !important;
  }

  /* Hide menu section by default on mobile */
  .top-bar-section {
    display: none !important;
    left: 0 !important;
    position: relative !important;
    width: 100% !important;
    clear: both !important;
  }

  /* Show menu when Foundation adds 'expanded' class */
  .top-bar.expanded .top-bar-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  /* Make sure menu items stack vertically on mobile */
  .top-bar-section ul {
    width: 100% !important;
    display: block !important;
  }

  .top-bar-section li {
    width: 100% !important;
    display: block !important;
  }

  .top-bar-section li a {
    width: 100% !important;
    display: block !important;
  }
}