/*
Theme Name: Gnephilim
Theme URI: https://theme.co/x/
Author: Themeco
Author URI: https://theme.co/
Description: GNephilim Child Theme based on X
Version: 1.0.0
Template: x
*/

/* =============================================================================
   Brand Design Tokens — mirrors StudioStack iOS Theme.swift
   Light default; dark values applied via prefers-color-scheme.
   ============================================================================= */

:root {
  /* Brand (same in both modes) */
  --brand-rose:       #e11d48;
  --brand-rose-dark:  #be123c;
  --accent-blue:      #3b82f6;
  --accent-green:     #22c55e;

  /* Light mode (default) */
  --bg-primary:       #ffffff;       /* slate800 light */
  --bg-card:          #f1f5f9;       /* slate700 light */
  --border:           #cbd5e1;       /* slate600 light */
  --text-secondary:   #475569;       /* slate400 light */
  --text-primary:     #0f172a;       /* textPrimary light */
  --slate200:         #cbd5e1;
  --slate50:          #f8fafc;

  /* Corner radii */
  --radius-tag:     4px;
  --radius-bar:     6px;
  --radius-small:   8px;
  --radius-card:    10px;
  --radius-medium:  12px;
  --radius-large:   14px;
  --radius-xlarge:  16px;
  --radius-image:   20px;
  --radius-pill:    100px;

  /* Font */
  --font-base: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary:       #1e293b;     /* slate800 dark */
    --bg-card:          #334155;     /* slate700 dark */
    --border:           #475569;     /* slate600 dark */
    --text-secondary:   #94a3b8;     /* slate400 dark */
    --text-primary:     #ffffff;     /* textPrimary dark */
    --slate200:         #e2e8f0;
    --slate50:          #f8fafc;
  }
}

/* =============================================================================
   Global Reset & Body
   ============================================================================= */

html {
  background-color: var(--bg-primary);
}

body {
  font-family: var(--font-base);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

/* =============================================================================
   X Theme Full-Width Reset
   Strip every wrapper X theme adds so our design takes full control.
   The x-container.max.width.offset class combo is the main offender — it
   sets max-width + margin:auto + background + box-shadow creating the
   "content in a card" look.
   ============================================================================= */

/* Body / outer shell — use our bg token.
   X theme sets body{background:#f3f3f3} in inline <style> AFTER our stylesheet,
   so we need !important on the shorthand `background` (not just background-color)
   to win the cascade battle. */
html,
body,
#x-body,
#x-outer-container {
  background: var(--bg-primary) !important;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-base) !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* The main boxed-container — kill its max-width, bg, shadow, and offsets */
.x-container,
.x-container.max,
.x-container.width,
.x-container.offset,
.x-container.max.width,
.x-container.max.width.offset,
.x-container.main {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Inner content wrappers */
.x-main,
#x-content,
.x-content-sidebar-wrap,
.entry-wrap,
article.page,
article.post {
  background-color: transparent !important;
  color: inherit !important;
  font-family: var(--font-base) !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: none !important;
  float: none !important;
}

/* Cornerstone wraps page content in .x-section/.x-div with default 65px top/bottom
   padding and opaque backgrounds — strip both so no white gaps appear above/below content. */
#gn-page-wrap .x-section,
#gn-page-wrap .cs-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}
#gn-page-wrap .x-div,
#gn-page-wrap .cs-content {
  background: transparent !important;
  background-color: transparent !important;
}

/* Hide X theme legacy masthead + navbar — replaced by .gn-header.
   Also kill Cornerstone's .x-bar-space spacer (injected by JS when a bar is
   set to position:fixed) and the legacy .x-navbar-wrap height rule that adds
   90px of blank space when x_navbar_positioning = fixed-top.
   .x-bar / .x-bar-container = Cornerstone header/footer bar elements
   (breadcrumb bars, header bars, etc.) that still render even when their
   content is turned off — nuke the whole bar system since we own the header. */
.x-masthead,
.x-navbar,
.x-navbar-wrap,
.x-bar-space,
.x-bar,
.x-bar-container,
.x-bar-inner,
.x-bar-content,
[class*="x-bar--"],
.cs-bar,
.x-breadcrumbs,
.cs-breadcrumbs {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Zero out the legacy body padding X theme adds for fixed-left/right navbars */
body.x-navbar-fixed-left-active,
body.x-navbar-fixed-right-active {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hide X theme's page title — we control headings via our own templates */
.entry-header,
h1.entry-title,
h2.entry-title {
  display: none !important;
}

/* =============================================================================
   Custom Header — .gn-header
   ============================================================================= */

.gn-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Sit above X theme (z-index 9999+) and below WP admin bar (z-index 99999) */
  z-index: 10000;
  background-color: var(--bg-primary);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease,
              box-shadow 0.2s ease;
}

.gn-header--scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: color-mix(in srgb, var(--bg-primary) 88%, transparent);
}

.gn-header__inner {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Logo */
.gn-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.gn-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-card);
  background-color: var(--brand-rose);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-base);
  line-height: 1;
  flex-shrink: 0;
}

.gn-logo-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

/* Primary Nav */
.gn-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.gn-nav__link {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-small);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.gn-nav__link:hover,
.gn-nav__link--active {
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--brand-rose) 8%, transparent);
}

.gn-nav__link--active {
  color: var(--brand-rose);
  font-weight: 600;
}

.gn-nav__cta {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background-color: var(--brand-rose);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.gn-nav__cta:hover {
  background-color: var(--brand-rose-dark);
  transform: scale(1.03);
}

.gn-nav__cta--inactive {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* =============================================================================
   WordPress Content Area — strip width constraints so React fills the page
   ============================================================================= */

/* The WP classic editor wraps page body in .entry-content which often adds
   max-width and padding — nuke it so our React components get full width. */
.entry-content,
.entry-summary {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Paragraphs inside .entry-content sometimes inherit prose max-width from
   X theme — override so shortcode output isn't accidentally constrained. */
.entry-content > p:empty {
  display: none !important;
}

/* Ensure every gnephilim React mount point is a full-width block */
[id^="gnephilim-root"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hamburger */
.gn-header__menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-small);
  margin-left: auto;
}

.gn-menu-bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

.gn-menu-btn--open .gn-menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gn-menu-btn--open .gn-menu-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.gn-menu-btn--open .gn-menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
@media (max-width: 768px) {
  .gn-header__nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px 24px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    gap: 4px;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .gn-header__nav.gn-nav--open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .gn-nav__link {
    padding: 12px 16px;
    font-size: 16px;
  }

  .gn-nav__cta {
    margin-left: 0;
    margin-top: 8px;
    justify-content: center;
    padding: 12px 16px;
    font-size: 16px;
  }

  .gn-header__menu-btn {
    display: flex;
  }
}

/* Push page content below fixed header */
#gn-page-wrap {
  padding-top: 64px;
}

/* When WP admin bar is visible it takes position:fixed at top:0 (z-index 99999).
   Both .gn-header and #wpadminbar are fixed — viewport-relative — so the
   html { margin-top: 32px } WP adds for document flow has zero effect on them.
   We must explicitly shift our header down below the admin bar. */
.admin-bar .gn-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  /* Admin bar is 46px tall on mobile */
  .admin-bar .gn-header {
    top: 46px;
  }
}

/* =============================================================================
   Custom Footer — .gn-footer
   ============================================================================= */

.gn-footer {
  background-color: var(--bg-card);
  border-top: 1px solid var(--border);
  font-family: var(--font-base);
}

.gn-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 48px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
}

@media (max-width: 768px) {
  .gn-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.gn-footer__logo {
  margin-bottom: 12px;
  display: inline-flex;
}

.gn-footer__tagline {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
  max-width: 220px;
}

/* Footer nav */
.gn-footer__nav {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.gn-footer__nav-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gn-footer__nav-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.gn-footer__nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.gn-footer__nav-link:hover {
  color: var(--brand-rose);
}

/* Bottom bar */
.gn-footer__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.gn-footer__copy {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.gn-footer__social {
  display: flex;
  gap: 12px;
}

.gn-footer__social-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
}

.gn-footer__social-link:hover {
  color: var(--brand-rose);
  transform: scale(1.15);
}