/* ==================================================
   HEADER AND NAVIGATION

   Contains:
   - Announcement bar
   - Main header layout
   - Brand and tagline
   - Shared header action icons
   - Mobile menu button
   - Desktop navigation
   - Condensed sticky-navigation state
   - Mobile navigation

   Responsive overrides belong in responsive.css.
   ================================================== */


/* ==================================================
   1. ANNOUNCEMENT BAR
   ================================================== */

.announcement-bar {
  padding: 9px 20px;
  color: var(--white);
  background: var(--charcoal);
  text-align: center;
}

.announcement-bar p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


/* ==================================================
   2. SITE HEADER
   ================================================== */

.site-header {
  position: relative;
  z-index: 999;
  background: rgba(251, 247, 239, 0.97);
}


/* ==================================================
   3. MAIN HEADER LAYOUT
   ================================================== */

.header-main {
  display: grid;
  grid-template-columns:
    minmax(220px, 1fr)
    minmax(360px, 1.5fr)
    minmax(170px, 1fr);
  align-items: center;
  column-gap: clamp(28px, 4vw, 72px);
  min-height: 128px;
}

.header-main .brand {
  grid-column: 1;
  justify-self: start;
}

.header-main .daily-scripture {
  grid-column: 2;
  justify-self: center;
}


/* ==================================================
   4. BRAND
   ================================================== */

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brand-logo {
  display: block;
  width: 180px;
  height: auto;
}

.brand-mark {
  color: var(--gold);
  font-size: 1.15rem;
  line-height: 1;
}

.brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand-tagline {
  display: grid;
  grid-template-columns: 1fr 6px 1fr;
  align-items: center;
  column-gap: 0.45rem;
  width: 100%;
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-tagline span:first-child {
  text-align: right;
}

.brand-tagline span:last-child {
  text-align: left;
}

.brand-tagline-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}


/* ==================================================
   5. SHARED ICON-BUTTON FOUNDATION
   ================================================== */

.icon-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}


/* ==================================================
   6. SHARED HEADER ACTION AREA

   This is the only Search, Account, and Cart group.

   At the top of the page, it is positioned over the
   right side of the main header.

   In the condensed state, the exact same element is
   repositioned into the sticky navigation bar.
   ================================================== */

.header-actions {
  position: absolute;
  top: 44px;
  left: 50%;
  z-index: 20;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  pointer-events: none;

  transform: translateX(-50%);
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;

  pointer-events: auto;

  transition:
    opacity 180ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==================================================
   7. HEADER ACTION ICONS
   ================================================== */

.header-icons .icon-button {
  position: relative;
  isolation: isolate;

  display: inline-grid;
  place-items: center;

  width: 40px;
  height: 40px;

  border-radius: 50%;
  background: rgba(47, 125, 120, 0.2);
  color: var(--charcoal);

  transition:
    color 250ms ease,
    transform 250ms ease;
}

.header-icons .icon-button::before {
  position: absolute;
  inset: 0;
  z-index: -1;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--teal) 0%,
      var(--teal) 42%,
      var(--gold) 58%,
      var(--gold) 100%
    );

  background-size: 220% 100%;
  background-position: 100% center;

  content: "";
  opacity: 0;

  transition:
    opacity 250ms ease,
    background-position 350ms ease;
}

.header-icons .icon-button svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;

  transition:
    color 250ms ease,
    transform 250ms ease;
}

.header-icons .icon-button:hover::before,
.header-icons .icon-button:focus-visible::before {
  opacity: 1;
  background-position: 0% center;
}

.header-icons .icon-button:hover svg,
.header-icons .icon-button:focus-visible svg {
  transform: scale(1.04);
}

.header-icons .icon-button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}


/* ==================================================
   8. HEADER ICON TOOLTIPS
   ================================================== */

.header-icons .icon-button::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 50;

  padding: 7px 12px;

  border: 1px solid rgba(203, 169, 84, 0.35);
  border-radius: 999px;

  background: rgba(255, 252, 245, 0.97);
  color: var(--charcoal);

  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08);

  content: attr(data-tooltip);

  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;

  transform:
    translateX(-50%)
    translateY(6px)
    scale(0.95);

  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms ease;
}

.header-icons .icon-button:hover::after,
.header-icons .icon-button:focus-visible::after {
  opacity: 1;

  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.13);

  transform:
    translateX(-50%)
    translateY(0)
    scale(1);
}


/* ==================================================
   9. CART ACTION
   ================================================== */

.header-icons .cart-button {
  position: relative;
}

.header-icons .cart-count {
  position: absolute;
  top: 3px;
  right: 1px;

  display: grid;
  place-items: center;

  min-width: 19px;
  height: 19px;
  padding: 0 5px;

  border: 2px solid var(--cream);
  border-radius: 50px;

  background: var(--teal);
  color: var(--white);

  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
}


/* ==================================================
   10. MOBILE MENU BUTTON
   ================================================== */

.mobile-menu-button {
  display: none;
  justify-self: start;
  place-items: center;

  width: 40px;
  height: 40px;

  border-radius: 50%;
  color: var(--charcoal);
}

.mobile-menu-button span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 2px 0;
  background: currentColor;

  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.mobile-menu-button.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-menu-button.open span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-button.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-menu-button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}


/* ==================================================
   11. DESKTOP NAVIGATION

   Only this navigation bar becomes sticky.
   ================================================== */

.desktop-navigation {
  position: sticky;
  top: 0;
  z-index: 1000;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

  background: rgba(251, 247, 239, 0.97);

  box-shadow: 0 4px 14px rgba(51, 47, 45, 0.08);
  backdrop-filter: blur(12px);

  transition:
    background-color 240ms ease,
    box-shadow 240ms ease,
    backdrop-filter 240ms ease;
}

.desktop-navigation-inner {
  display: grid;
  grid-template-columns:
    minmax(120px, 1fr)
    auto
    minmax(120px, 1fr);
  align-items: center;
  column-gap: 24px;
  min-height: 58px;
}

.desktop-navigation-links {
  grid-column: 2;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);

  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.desktop-navigation-links a {
  position: relative;

  padding: 17px 0;

  color: var(--muted);

  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.desktop-navigation-links a::after {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;

  height: 2px;

  background: var(--gold);

  content: "";

  transform: scaleX(0);
  transform-origin: center;

  transition: transform 180ms ease;
}

.desktop-navigation-links a:hover,
.desktop-navigation-links a.active {
  color: var(--text);
}

.desktop-navigation-links a:hover::after,
.desktop-navigation-links a.active::after {
  transform: scaleX(1);
}

.desktop-navigation-links a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}


/* ==================================================
   12. STICKY COMPACT BRAND
   ================================================== */

.sticky-brand {
  grid-column: 1;
  justify-self: start;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

  opacity: 0;
  pointer-events: none;

  transform:
    translateX(-8px)
    rotate(-5deg)
    scale(0.84);

  transition:
    opacity 220ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sticky-brand-logo {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}


/* ==================================================
   13. CONDENSED STICKY STATE

   JavaScript will add .is-condensed to .site-header.

   Only one class controls:
   - compact logo reveal
   - shared action repositioning
   - navigation-link movement
   - sticky background treatment
   ================================================== */

.site-header.is-condensed {
  padding-bottom: 58px;
}

.site-header.is-condensed .desktop-navigation {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;

  width: 100%;

  background: rgba(251, 247, 239, 0.97);

  border-top: 0;
  border-bottom: 1px solid var(--border);

  box-shadow:
    0 6px 20px rgba(51, 47, 45, 0.12);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-header.is-condensed .sticky-brand {
  opacity: 1;
  pointer-events: auto;

  transform:
    translateX(0)
    rotate(0)
    scale(1);
}

.site-header.is-condensed .desktop-navigation-links {
  transform: translateX(18px);
}


/*
   The shared action wrapper becomes fixed so it occupies
   the right side of the sticky navigation. Because it
   retains the .container class, its horizontal alignment
   continues to match the rest of the site.
*/

.site-header.is-condensed .header-actions {
  position: fixed;
  top: 9px;
  z-index: 1100;
}

.site-header.is-condensed .header-icons {
  transform: translateX(0);
}


/*
   Tooltips normally open above the icons in the full
   header. In the condensed navigation they open below
   so they are not clipped by the top of the viewport.
*/

.site-header.is-condensed .header-icons .icon-button::after {
  top: calc(100% + 10px);
  bottom: auto;

  transform:
    translateX(-50%)
    translateY(-6px)
    scale(0.95);
}

.site-header.is-condensed .header-icons .icon-button:hover::after,
.site-header.is-condensed .header-icons .icon-button:focus-visible::after {
  transform:
    translateX(-50%)
    translateY(0)
    scale(1);
}


/* ==================================================
   14. MOBILE NAVIGATION

   Display and responsive layout changes belong in
   responsive.css.
   ================================================== */

.mobile-navigation {
  display: none;
}