/* ==========================================================================
   Celliara — shell.css
   Global header nav + footer refinements.
   Loaded on all Celliara templates via celliara-enqueue.php.
   Targets the existing custom #celliara-nav and footer elements in page content.
   Does NOT override the main page CSS already in Additional CSS.
   ========================================================================== */

/* ── NAV: Brand alignment ────────────────────────────────────────────────── */

#celliara-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 64px;
  background: rgba(5, 4, 3, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 168, 106, 0.12);
}

/* Logo */
#celliara-nav .logo,
#celliara-nav a.logo {
  font-family: 'Cormorant', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  flex-shrink: 0;
}

#celliara-nav .logo:hover {
  color: #C9A86A;
  text-decoration: none;
}

#celliara-nav .logo .logo-a {
  color: #C9A86A;
}

/* Nav links list */
#celliara-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#celliara-nav .nav-links li a {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

#celliara-nav .nav-links li a:hover {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

/* CTA nav item */
#celliara-nav .nav-links li a.nav-cta {
  color: #C9A86A;
  border: 1px solid rgba(201, 168, 106, 0.4);
  padding: 6px 16px;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.14em;
}

#celliara-nav .nav-links li a.nav-cta:hover {
  background: rgba(201, 168, 106, 0.08);
  border-color: #C9A86A;
  color: #C9A86A;
}

/* Mobile nav — below 768px */
@media (max-width: 768px) {
  #celliara-nav {
    padding: 0 20px;
    height: 56px;
  }

  #celliara-nav .nav-links {
    display: none; /* mobile menu handled by existing page JS */
  }

  /* Mobile menu toggle if present */
  #celliara-nav .nav-toggle,
  #celliara-nav .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
  }
}

/* ── FOOTER: Brand alignment ──────────────────────────────────────────────── */

/* Footer outer wrapper */
footer:not(.site-footer),
footer.celliara-footer {
  background: #050403;
  border-top: 1px solid rgba(201, 168, 106, 0.1);
  padding-top: 64px;
  padding-bottom: 32px;
  font-family: 'Jost', system-ui, sans-serif;
}

/* Footer top grid */
.ft-top {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 56px 52px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  border-bottom: 1px solid rgba(201, 168, 106, 0.08);
}

/* Logo in footer */
.ft-logo {
  font-family: 'Cormorant', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.ft-logo .ft-logo-a {
  color: #C9A86A;
}

/* Tagline */
.ft-tag {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.22);
}

/* Column headings */
.ft-ct {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 168, 106, 0.5);
  margin-bottom: 16px;
}

/* Footer links */
.ft-lks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ft-lks li a {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ft-lks li a:hover {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

/* Footer bottom bar */
.ft-bot {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 56px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.ft-copy {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.18);
}

/* Legal links */
.ft-leg {
  display: flex;
  gap: 24px;
}

.ft-leg a {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.2);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ft-leg a:hover {
  color: rgba(255, 255, 255, 0.5);
}

/* Affiliate disclosure bar */
.disc {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 56px 32px;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 0;
}

/* Mobile footer */
@media (max-width: 768px) {
  .ft-top {
    grid-template-columns: 1fr 1fr;
    padding: 0 20px 40px;
    gap: 32px;
  }

  .ft-top > div:first-child {
    grid-column: 1 / -1; /* logo + tagline spans full width */
  }

  .ft-bot {
    padding: 24px 20px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .disc {
    padding: 0 20px 28px;
  }
}

@media (max-width: 480px) {
  .ft-top {
    grid-template-columns: 1fr;
  }

  .ft-top > div:first-child {
    grid-column: 1;
  }
}

/* ── GP content wrapper neutralisation (Celliara templates only) ─────────── */
/* Applied only when .celliara-template body class is present.                */
/* Strips padding/margin from GP's content wrappers so Celliara layout wins. */

.celliara-template .site-content,
.celliara-template #content,
.celliara-template .content-area,
.celliara-template #primary,
.celliara-template .site-main,
.celliara-template #main,
.celliara-template article,
.celliara-template .inside-article,
.celliara-template .entry-content,
.celliara-template .post-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  float: none !important;
}

/* GP grid-container adds max-width — override so Celliara's .container controls width */
.celliara-template .grid-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Remove GP sidebar area */
.celliara-template #secondary,
.celliara-template .widget-area,
.celliara-template .sidebar-container {
  display: none !important;
}

/* Remove GP page title output */
.celliara-template .entry-header,
.celliara-template .page-hero-section {
  display: none !important;
}

/* Celliara .container keeps its own controlled max-width */
.celliara-template .container {
  max-width: var(--max-width) !important;
  margin-inline: auto !important;
  padding-inline: var(--spacing-md) !important;
  width: 100% !important;
}

.celliara-template .container--wide {
  max-width: var(--max-width-wide) !important;
}

/* ── Force full-width layout — kill GP grid/sidebar completely ───────────── */

/* GP separate-containers uses CSS grid on .site-content — flatten it */
.celliara-template .site-content,
.celliara-template #content {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: unset !important;
  grid-template-areas: unset !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Kill sidebar entirely */
.celliara-template #secondary,
.celliara-template .widget-area,
.celliara-template .sidebar-container,
.celliara-template .inside-right-sidebar,
.celliara-template .inside-left-sidebar,
.celliara-template .sidebar {
  display: none !important;
}

/* Content area takes full width */
.celliara-template #primary,
.celliara-template .content-area {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Footer: always block, full width, below everything */
.celliara-footer {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  z-index: 1;
}

/* Top padding so content clears the fixed nav (64px tall) */
.celliara-template .site-content {
  padding-top: 64px !important;
}