/* =========================================================================
   Gaming Chair Guide — theme layer (header, footer, blog, homepage sections)
   Design tokens come from theme.json (--wp--preset--color--*).
   ========================================================================= */

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- Header ---------- */
.gcg-header { position: sticky; top: 0; z-index: 500; background: var(--wp--preset--color--ink); color: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.18); }
.gcg-header a { color: #fff; }
.gcg-header .wp-block-site-title a { color: #fff; text-decoration: none; }
.gcg-header .wp-block-navigation { --wp--preset--color--ink: #fff; font-weight: 600; }
.gcg-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }
.gcg-header .wp-block-navigation .wp-block-navigation-submenu__toggle,
.gcg-header .wp-block-navigation-item__label { color: #fff; }
.gcg-header .wp-block-navigation .wp-block-navigation__submenu-container { background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.2); overflow: hidden; }
.gcg-header .wp-block-navigation__submenu-container a { color: var(--wp--preset--color--ink); }
.gcg-header .wp-block-navigation__submenu-container a:hover { background: var(--wp--preset--color--muted); }

/* ---------- Footer ---------- */
.gcg-footer { background: var(--wp--preset--color--ink); color: rgba(255,255,255,.75); }
.gcg-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.gcg-footer a:hover { color: #fff; }
.gcg-footer h2, .gcg-footer h3 { color: #fff; }

/* ---------- Breadcrumbs ---------- */
.gcg-breadcrumbs { font-size: .85rem; color: var(--wp--preset--color--ink-soft); }
.gcg-breadcrumbs a { color: var(--wp--preset--color--ink-soft); text-decoration: none; }
.gcg-breadcrumbs a:hover { color: var(--wp--preset--color--accent); }

/* ---------- Homepage hero ---------- */
.gcg-home-hero { position: relative; border-radius: 24px; overflow: hidden; color: #fff; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem); background: linear-gradient(160deg, #0f1620 0%, #1b2838 100%); }
.gcg-home-hero__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; color: var(--wp--preset--color--accent-2); }
.gcg-home-hero h1 { color: #fff; font-size: clamp(2.2rem, 5.5vw, 4rem); max-width: 18ch; margin: .5rem 0 1rem; }
.gcg-home-hero p { font-size: 1.15rem; max-width: 52ch; color: rgba(255,255,255,.85); }
.gcg-home-hero__badges { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.75rem; font-size: .9rem; color: rgba(255,255,255,.8); }
.gcg-home-hero__badges span { display: inline-flex; align-items: center; gap: .45rem; }

/* Section wrapper spacing on homepage */
.gcg-section { margin-block: clamp(2.5rem, 6vw, 5rem); }
.gcg-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .78rem; color: var(--wp--preset--color--accent); text-align: center; }

/* ---------- Blog / post cards ---------- */
.gcg-postcard { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; overflow: hidden; height: 100%; transition: transform .15s ease, box-shadow .2s ease; }
.gcg-postcard:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(15,22,32,.12); }
.gcg-postcard .wp-block-post-featured-image img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.gcg-postcard .wp-block-post-title { font-size: 1.15rem; padding: 0 1.2rem; }
.gcg-postcard .wp-block-post-excerpt { padding: 0 1.2rem 1.2rem; color: var(--wp--preset--color--ink-soft); }

/* ---------- Single chair layout ---------- */
.gcg-single { max-width: 1100px; margin-inline: auto; }
.gcg-sticky-buy { position: sticky; bottom: 0; z-index: 400; }

/* ---------- Category / archive header ---------- */
.gcg-archive-head { background: var(--wp--preset--color--muted); border-radius: 20px; padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.gcg-archive-head p { color: var(--wp--preset--color--ink-soft); max-width: 60ch; margin-inline: auto; }

/* ---------- Utility ---------- */
.gcg-pill { display: inline-block; background: var(--wp--preset--color--muted); border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; font-weight: 600; color: var(--wp--preset--color--ink); text-decoration: none; }
.gcg-pill:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

/* Make WordPress nav mobile toggle visible on dark header */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: #fff; }