/* ═══════════════════════════════════════════════════════════════════════════
   Hello Elementor header & footer, restyled to the mockup
   ───────────────────────────────────────────────────────────────────────────
   Elementor's Theme Builder is a Pro feature, so the header and footer come
   from Hello Elementor's own templates. This sheet restyles them.

   Selectors match Hello's own specificity (assets/css/header-footer.css) and
   this file is enqueued after it, so equal specificity wins — no !important.

   The header markup Hello gives us is:
     header.site-header > .header-inner
       .site-branding  > .site-title, .site-description
       nav.site-navigation > ul.menu > li.menu-item > a
       .site-navigation-toggle-holder > button.site-navigation-toggle
       nav.site-navigation-dropdown          (mobile panel)

   Set in Appearance → Customize:
     Site Title    "Glamping on Monticello"
     Tagline       "Jenkinsville, SC"
   Hello Theme Settings → Header: turn the Tagline on, Menu layout = Dropdown
   on mobile. No logo upload needed — the dome glyph is drawn below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header shell ─────────────────────────────────────────────────────────── */

.site-header {
  background-color: var(--gm-ink);
  border-bottom: 1px solid var(--gm-rule-on-dark);
  padding-block: 0.7rem;
  padding-inline: var(--gm-gutter);
}

.site-header .header-inner {
  width: 100%;
  max-width: var(--gm-maxw);
  margin-inline: auto;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
}

/* ── Wordmark ─────────────────────────────────────────────────────────────
   .site-branding holds the title and tagline. The dome glyph is a background
   image on a ::before, so nothing has to be uploaded to the media library. */

/* The glyph is positioned rather than laid out. As a grid item spanning both
   rows it was 30px tall against a 29px text block, so the rows stretched and
   `align-items: center` opened a gap between the two lines that the mockup
   does not have. Taking it out of flow lets the two lines sit on their own
   line boxes, exactly as they do in the mockup. */

.site-header .header-inner .site-branding,
.site-footer .footer-inner .site-branding {
  display: block;
  position: relative;
  padding-inline-start: 2.35rem;
}

.site-header .header-inner .site-branding::before,
.site-footer .footer-inner .site-branding::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><circle cx='6.5' cy='5' r='1.5' fill='%23D6DE55'/><path d='M3.5 26a12.5 12.5 0 0 1 25 0' stroke='%23E9DECB' stroke-width='1.6'/><path d='M1.5 26h29' stroke='%23E9DECB' stroke-width='1.6' stroke-linecap='round'/><path d='M16 13.2V26M6.8 19.6h18.4M10.2 15.4 16 26M21.8 15.4 16 26' stroke='%23E9DECB' stroke-width='0.9' opacity='0.45'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
}

/* Hello sets 2.5rem/500 on the title; this is the same specificity, later. */
.site-header .site-title {
  font-family: var(--gm-font-display);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* The title text sits inside an <a>, whose own inline leading otherwise adds
   a few pixels between the two wordmark lines. Pin it to match the title. */
.site-header .header-inner .site-branding .site-title a {
  color: var(--gm-canvas);
  text-decoration: none;
  display: block;
  line-height: 1.1;
}

.site-header .header-inner .site-branding .site-description {
  font-family: var(--gm-font-mono);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gm-water);
  line-height: 1.1;
  margin-top: 2px;
}

/* ── Navigation ───────────────────────────────────────────────────────────── */

.site-navigation ul.menu {
  justify-content: flex-end;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.4rem);
  margin: 0;
}

/* Note: .site-navigation-dropdown is a separate class from .site-navigation,
   not a descendant of it, so every nav rule has to name both. */
.site-navigation ul.menu li a,
.site-navigation-dropdown ul.menu li a {
  font-family: var(--gm-font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gm-canvas);
  opacity: 0.72;
  padding: 8px 4px;
  white-space: nowrap;
  transition: opacity 0.2s var(--gm-ease), color 0.2s var(--gm-ease);
}

.site-navigation ul.menu li a:hover,
.site-navigation ul.menu li a:focus-visible {
  opacity: 1;
  color: var(--gm-firefly);
}

/* Current page */
.site-navigation ul.menu li.current-menu-item > a,
.site-navigation ul.menu li.current_page_item > a {
  opacity: 1;
  color: var(--gm-firefly);
}

/* ── The "Check dates" call to action ─────────────────────────────────────
   Add the CSS class  gm-nav-cta  to that menu item:
   Appearance → Menus → Screen Options → tick "CSS Classes". */

.site-navigation ul.menu li.gm-nav-cta > a,
.site-navigation-dropdown ul.menu li.gm-nav-cta > a {
  background: var(--gm-clay);
  color: #FFF6EF;
  opacity: 1;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 0.72rem 1.15rem;
  transition: background 0.22s var(--gm-ease), transform 0.22s var(--gm-ease);
}

.site-navigation ul.menu li.gm-nav-cta > a:hover,
.site-navigation-dropdown ul.menu li.gm-nav-cta > a:hover {
  background: var(--gm-clay-lit);
  color: #FFF6EF;
  transform: translateY(-2px);
}

/* Submenus, on the rare chance one is used */
.site-navigation ul.menu li ul {
  background: var(--gm-ink-2);
  border: 1px solid var(--gm-rule-on-dark);
  padding: 0.35rem 0;
}
.site-navigation ul.menu li ul li a { opacity: 0.85; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */

.site-navigation-toggle-holder .site-navigation-toggle {
  background-color: transparent;
  border: 1px solid rgba(233, 222, 203, 0.32);
  border-radius: 999px;
  color: var(--gm-canvas);
  padding: 0.55rem 0.7rem;
}

.site-navigation-toggle-holder .site-navigation-toggle:hover {
  border-color: var(--gm-canvas);
}

/* Hello ships the dropdown panel in white with dark links, so each of those
   declarations needs answering. Selectors below match its specificity exactly
   and load later, so no !important is required. */

.site-navigation-dropdown ul.menu {
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  background: var(--gm-ink);
  border-top: 1px solid var(--gm-rule-on-dark);
  border-bottom: 1px solid var(--gm-rule-on-dark);
}

.site-navigation-dropdown ul.menu li {
  width: 100%;
  display: block;
}

.site-navigation-dropdown ul.menu li a {
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--gm-rule-on-dark);
  color: var(--gm-canvas);
  opacity: 0.8;
  display: block;
  padding: 1rem var(--gm-gutter);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
}

.site-navigation-dropdown ul.menu li a:hover {
  opacity: 1;
  color: var(--gm-firefly);
}

.site-navigation-dropdown ul.menu li.current-menu-item a {
  background: transparent;
  color: var(--gm-firefly);
  opacity: 1;
}

/* The pill would look odd full-bleed in a stacked list, so keep it inline. */
.site-navigation-dropdown ul.menu li.gm-nav-cta {
  padding: 0.9rem var(--gm-gutter);
}
.site-navigation-dropdown ul.menu li.gm-nav-cta > a {
  display: inline-block;
  box-shadow: none;
  padding: 0.72rem 1.15rem;
}

/* ── Footer ───────────────────────────────────────────────────────────────
   Hello's footer gives .site-branding, .site-navigation and .copyright. It is
   simpler than the mockup's four-column footer, which would need Theme
   Builder; this keeps it on-brand within what the free theme provides. */

.site-footer {
  background-color: var(--gm-ink);
  border-top: 1px solid var(--gm-rule-on-dark);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  padding-inline: var(--gm-gutter);
  color: var(--gm-canvas);
}

.site-footer .footer-inner {
  width: 100%;
  max-width: var(--gm-maxw);
  margin-inline: auto;
  align-items: center;
  gap: 1.5rem;
}

.site-footer .site-title {
  font-family: var(--gm-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}


.site-footer .footer-inner .site-branding .site-title a {
  color: var(--gm-canvas);
  text-decoration: none;
  display: block;
  line-height: 1.1;
}

.site-footer .footer-inner .site-branding .site-description {
  font-family: var(--gm-font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gm-water);
  line-height: 1.1;
  margin-top: 3px;
}

.site-footer .footer-inner .site-navigation ul.menu li a {
  font-family: var(--gm-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gm-muted-on-dark);
  text-decoration: none;
}
.site-footer .footer-inner .site-navigation ul.menu li a:hover { color: var(--gm-firefly); }

.site-footer .footer-inner .copyright p {
  font-family: var(--gm-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gm-muted-on-dark);
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .site-navigation ul.menu li.gm-nav-cta > a:hover { transform: none; }
}

/* ── Transparent header over a hero ───────────────────────────────────────
   The mockup lays the header over the hero photograph and only gives it a
   background once you scroll past. Scoped with :has() so pages without a hero
   keep the solid bar and their content is never hidden underneath it. */

body:has(.gm-hero) .site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background-color: transparent;
  border-bottom: 0;
}

/* Once the hero has scrolled past, bring the bar back so "Check dates" stays
   one tap away. .is-pinned is added by header.js. */
body:has(.gm-hero) .site-header.is-pinned {
  position: fixed;
  background-color: rgba(12, 20, 28, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gm-rule-on-dark);
  animation: gm-drop-in 0.3s var(--gm-ease);
}

@keyframes gm-drop-in { from { transform: translateY(-100%); } to { transform: none; } }

/* ── Admin bar ────────────────────────────────────────────────────────────
   For logged-in users WordPress fixes its admin bar across the top of the
   viewport. The transparent header is absolutely positioned at top: 0, which
   is measured from the top of the page rather than from the shifted content,
   so without this the bar lies over the header and swallows clicks on the nav.

   Desktop: the bar is 32px and fixed, so both header states clear it.
   Below 783px: the bar is 46px and scrolls away with the page, so only the
   unpinned header offsets — the pinned one returns to the top. */

body.admin-bar:has(.gm-hero) .site-header,
body.admin-bar:has(.gm-hero) .site-header.is-pinned { top: 32px; }

@media (max-width: 782px) {
  /* The only route to the navigation on a phone, so it gets a full 44px
     target rather than the 34px the icon alone occupies. */
  .site-header .site-navigation-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  body.admin-bar:has(.gm-hero) .site-header { top: 46px; }
  body.admin-bar:has(.gm-hero) .site-header.is-pinned { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.gm-hero) .site-header.is-pinned { animation: none; }
}

/* ── Legibility floor on phones ───────────────────────────────────────────
   Same reasoning as the page blocks: the header and footer taglines and the
   copyright line sit at 9px and 10px on a 390px screen. The copyright line
   carries the only links to the policy pages, so it is also a tap target and
   gets a looser line-height to go with the size. */
@media (max-width: 560px) {
  .site-header .header-inner .site-branding .site-description,
  .site-footer .footer-inner .site-branding .site-description {
    font-size: 0.625rem;
    letter-spacing: 0.18em;
  }

  .site-footer .footer-inner .copyright p {
    font-size: 0.6875rem;
    line-height: 2;
  }
}