/*
Theme Name: GS Theme
Theme URI: https://hugoguanipa.com
Author: Hugo Guanipa
Author URI: https://hugoguanipa.com
Description: GS Core Pure Full Site Editing (FSE) Theme built with System C (Cyber-RVToad Language), zero-PX / zero-HEX OKLCH tokens, fluid typography, and native Gutenberg block patterns.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://hugoguanipa.com/license
Text Domain: gs-theme
Tags: full-site-editing, block-themes, block-patterns, custom-colors, custom-typography, dark-mode, wide-blocks, translation-ready
*/

/* ==========================================================================
   GS CORE PURE — IMPERIAL NAVY & CHARCOAL PALETTE OVERRIDES
   ========================================================================== */
:root {
  /* Commented Legacy Electric Tokens for Audit:
  --brand: oklch(68% 0.16 235);
  --brand-on: oklch(14% 0.03 260);
  --surface: oklch(20% 0.035 250);
  --canvas: oklch(11% 0.025 260);
  --accent: oklch(68% 0.17 48);
  --inverse: oklch(98% 0.005 260);
  */

  /* 5 Canonical User-Specified Intents (Converted to OKLCH): */
  --brand: oklch(36.8% 0.108 248) !important;        /* Imperial Deep Navy Blue */
  --brand-hover: oklch(44% 0.12 248) !important;      /* Royal Navy Hover Accent */
  --brand-on: oklch(97% 0 0) !important;             /* High-Contrast Off-White Text */

  --inverse: oklch(97% 0 0) !important;              /* Off-White Surface */
  --inverse-on: oklch(12% 0 0) !important;           /* Deep Void Black Text */

  --accent: oklch(84.5% 0.024 285) !important;       /* Muted Platinum Slate */
  --accent-on: oklch(14% 0.012 280) !important;      /* Deep Charcoal Text */

  --surface: oklch(22.5% 0.012 280) !important;     /* Architectural Charcoal Surface */

  --canvas: oklch(12% 0 0) !important;                /* Deep Void Black Canvas */
  --canvas-2: oklch(17% 0.008 280) !important;        /* Layered Dark Charcoal Canvas */

  --canvas-on: oklch(97% 0 0) !important;
  --canvas-on-muted: oklch(82% 0.015 285) !important;
  --ember: oklch(62% 0.19 45) !important;             /* Warm Terrakotta Ember Accent */
  --ember-deep: oklch(44% 0.17 45) !important;
  --border: oklch(28% 0.015 280) !important;
  --border-subtle: oklch(20% 0.012 280) !important;
}

/* ==========================================================================
   LOCAL FONT FACE REGISTRATION (NATIVE OFFLINE HIGH PERFORMANCE)
   ========================================================================== */
@font-face {
  font-family: 'Rethink Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/RethinkSans_VariableFont_wght.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/JetBrainsMono[wght].woff2') format('woff2');
}

/* ==========================================================================
   SYSTEM C CANONICAL FOOTER COMPONENT
   Moved to sovereign component stylesheet: assets/css/components/footer.css
   ========================================================================== */


/* ==========================================================================
   GS MOBILE NAVIGATION DRAWER
   ========================================================================== */
.gs-mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: visibility 0.3s ease !important;
}

.gs-mobile-drawer.is-active,
.gs-mobile-drawer.is-open {
  visibility: visible !important;
  pointer-events: auto !important;
}

.gs-mobile-drawer__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: oklch(0% 0 0 / 0.6) !important;
  backdrop-filter: blur(0.5rem) !important;
  -webkit-backdrop-filter: blur(0.5rem) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.gs-mobile-drawer.is-active .gs-mobile-drawer__backdrop,
.gs-mobile-drawer.is-open .gs-mobile-drawer__backdrop {
  opacity: 1 !important;
}

.gs-mobile-drawer__content {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 20rem !important;
  max-width: 85vw !important;
  background: color-mix(in oklch, var(--surface) 96%, transparent) !important;
  border-left: 0.0625rem solid color-mix(in oklch, var(--white) 15%, transparent) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  backdrop-filter: blur(1.5rem) !important;
  -webkit-backdrop-filter: blur(1.5rem) !important;
}

.gs-mobile-drawer.is-active .gs-mobile-drawer__content,
.gs-mobile-drawer.is-open .gs-mobile-drawer__content {
  transform: translateX(0) !important;
}

.gs-mobile-drawer__head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 0.0625rem solid color-mix(in oklch, var(--white) 10%, transparent) !important;
}

.gs-mobile-drawer .logo-brand {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.gs-mobile-drawer .header-logo-img {
  mix-blend-mode: screen !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.gs-mobile-drawer__close {
  background: color-mix(in oklch, var(--surface) 60%, transparent) !important;
  border: 0.0625rem solid color-mix(in oklch, var(--white) 15%, transparent) !important;
  color: oklch(98% 0 0) !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: opacity var(--motion), transform var(--motion);
}

.gs-mobile-drawer__close:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

.gs-mobile-drawer__nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  margin-block: 2rem !important;
  flex: 1 !important;
}

.gs-mobile-drawer__link {
  font-family: var(--font-body) !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: oklch(92% 0 0) !important;
  text-decoration: none !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--radius-md) !important;
  transition: opacity var(--motion), transform var(--motion);
}

.gs-mobile-drawer__link:hover {
  background: color-mix(in oklch, var(--white) 8%, transparent) !important;
  color: var(--brand) !important;
}

.gs-mobile-drawer__foot {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
  padding-top: 1.25rem !important;
  border-top: 0.0625rem solid color-mix(in oklch, var(--white) 10%, transparent) !important;
}

.gs-mobile-drawer .drawer-btn-signin {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 2.75rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: oklch(96% 0 0) !important;
  background: color-mix(in oklch, var(--surface) 65%, transparent) !important;
  border: 0.0625rem solid color-mix(in oklch, var(--white) 14%, transparent) !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  transition: opacity var(--motion), transform var(--motion);
  box-shadow: none !important;
}

.gs-mobile-drawer .drawer-btn-signin:hover {
  background: color-mix(in oklch, var(--surface) 90%, transparent) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

.gs-mobile-drawer .drawer-btn-buy-toad {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 2.75rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--brand-on) !important;
  background: var(--brand) !important;
  border: 0.0625rem solid color-mix(in oklch, var(--white) 20%, transparent) !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  transition: opacity var(--motion), transform var(--motion);
  box-shadow: none !important;
}

.gs-mobile-drawer .drawer-btn-buy-toad:hover {
  background: var(--brand-hover) !important;
  color: oklch(100% 0 0) !important;
}


/* Theme Global Resets */




/* Sign In Button */
.gs-header-wrapper .btn-signin {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: oklch(96% 0 0) !important;
  background: color-mix(in oklch, var(--surface) 65%, transparent) !important;
  border: 0.0625rem solid color-mix(in oklch, var(--white) 14%, transparent) !important;
  padding: 0.5625rem 1.25rem !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  transition: opacity var(--motion), transform var(--motion);
  backdrop-filter: blur(0.5rem) !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.gs-header-wrapper .btn-signin:hover {
  background: color-mix(in oklch, var(--surface) 90%, transparent) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  box-shadow: none !important;
}

/* Buy a Toad Button */
.gs-header-wrapper .btn-buy-toad {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: var(--brand-on) !important;
  background: var(--brand) !important;
  border: 0.0625rem solid color-mix(in oklch, var(--white) 20%, transparent) !important;
  padding: 0.5625rem 1.375rem !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  transition: opacity var(--motion), transform var(--motion);
  white-space: nowrap !important;
  box-shadow: none !important;
}

.gs-header-wrapper .btn-buy-toad:hover {
  background: var(--brand-hover) !important;
  color: oklch(100% 0 0) !important;
  box-shadow: none !important;
}


/* Header Media Query Overrides for Mobile (Placed at end of file for priority) */
@media (max-width: 56rem) {
  .gs-header-wrapper .nav-links {
    display: none !important;
  }
  .gs-header-wrapper .btn-signin {
    display: none !important;
  }
  .gs-header-wrapper .btn-buy-toad {
    display: none !important;
  }
  .gs-header-wrapper .burger-btn {
    display: inline-flex !important;
  }
}

/* ==========================================================================
   GS CORE PURE — ARTISAN COOKIE & PRIVACY CONSENT CAPSULE
   ========================================================================== */
.gs-privacy-reopen-btn {
  position: fixed !important;
  bottom: 0.75rem !important;
  left: 0.75rem !important;
  z-index: 99990 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.625rem !important;
  height: 1.625rem !important;
  background: color-mix(in oklch, var(--surface) 40%, transparent) !important;
  backdrop-filter: blur(0.5rem) !important;
  -webkit-backdrop-filter: blur(0.5rem) !important;
  border: 0.0625rem solid color-mix(in oklch, var(--white) 12%, transparent) !important;
  border-radius: 50% !important;
  padding: 0 !important;
  color: color-mix(in oklch, var(--white) 60%, transparent) !important;
  opacity: 0.35 !important;
  cursor: pointer !important;
  box-shadow: 0 0.125rem 0.5rem oklch(0% 0 0 / 0.25) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.gs-privacy-reopen-btn:hover {
  opacity: 0.95 !important;
  border-color: var(--brand-light) !important;
  color: var(--white) !important;
  transform: scale(1.1) !important;
}

#gs-privacy-capsule,
.gs-privacy-capsule {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  left: auto !important;
  width: 26rem !important;
  max-width: calc(100vw - 3rem) !important;
  margin-inline: 0 !important;
  z-index: 99990 !important;
  background: color-mix(in oklch, var(--surface) 94%, transparent) !important;
  border: 0.0625rem solid color-mix(in oklch, var(--white) 16%, transparent) !important;
  border-radius: var(--radius-xl) !important;
  padding: 1.25rem 1.5rem !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(1.5rem) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(1.5rem) saturate(1.8) !important;
  display: none;
  flex-direction: column !important;
  gap: 1rem !important;
  transition: opacity var(--motion), transform var(--motion);
}

#gs-privacy-capsule.is-open,
.gs-privacy-capsule.is-open {
  display: flex !important;
}

@media (max-width: 48rem) {
  #gs-privacy-capsule,
  .gs-privacy-capsule {
    left: 1rem !important;
    right: 1rem !important;
    bottom: 1rem !important;
    width: auto !important;
    max-width: calc(100vw - 2rem) !important;
  }
}


.gs-privacy-capsule .gs-capsule-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0.875rem !important;
}

.gs-privacy-capsule .gs-capsule-icon-capsule {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  border-radius: var(--radius-md) !important;
  background: color-mix(in oklch, var(--brand) 25%, transparent) !important;
  border: 0.0625rem solid color-mix(in oklch, var(--brand) 40%, transparent) !important;
  color: var(--brand-on) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.gs-privacy-capsule .gs-capsule-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}

.gs-privacy-capsule .gs-capsule-title {
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: oklch(98% 0 0) !important;
  line-height: 1.3 !important;
}

.gs-privacy-capsule .gs-capsule-desc {
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  color: oklch(82% 0.015 285) !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}

/* Collapsible Preference Categories */
.gs-privacy-capsule .gs-consent-categories {
  display: none;
  flex-direction: column !important;
  gap: 0.625rem !important;
  padding-block: 0.875rem !important;
  border-top: 0.0625rem solid color-mix(in oklch, var(--white) 10%, transparent) !important;
  border-bottom: 0.0625rem solid color-mix(in oklch, var(--white) 10%, transparent) !important;
}

.gs-privacy-capsule .gs-consent-categories.is-expanded {
  display: flex !important;
}


.gs-privacy-capsule .cat-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  color: oklch(92% 0 0) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gs-privacy-capsule .cat-active-tag {
  font-family: var(--font-mono) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  color: var(--ember) !important;
  background: color-mix(in oklch, var(--ember) 15%, transparent) !important;
  border: 0.0625rem solid color-mix(in oklch, var(--ember) 35%, transparent) !important;
  padding: 0.125rem 0.5rem !important;
  border-radius: var(--radius-full) !important;
}


/* Custom Switch Toggle */
.gs-privacy-capsule .gs-switch {
  position: relative !important;
  display: inline-block !important;
  width: 2.5rem !important;
  height: 1.375rem !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.gs-privacy-capsule .gs-switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.gs-privacy-capsule .gs-slider {
  position: absolute !important;
  cursor: pointer !important;
  inset: 0 !important;
  background-color: color-mix(in oklch, var(--white) 20%, transparent) !important;
  border-radius: var(--radius-full) !important;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gs-privacy-capsule .gs-slider:before {
  position: absolute !important;
  content: "" !important;
  height: 1.125rem !important;
  width: 1.125rem !important;
  left: 0.125rem !important;
  bottom: 0.125rem !important;
  background-color: oklch(98% 0 0) !important;
  border-radius: 50% !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gs-privacy-capsule .gs-switch input:checked + .gs-slider {
  background-color: var(--brand) !important;
}

.gs-privacy-capsule .gs-switch input:checked + .gs-slider:before {
  transform: translateX(1.125rem) !important;
}

/* Footer Section & Buttons */
.gs-privacy-capsule .gs-capsule-footer {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
}

.gs-privacy-capsule .gs-capsule-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.gs-privacy-capsule .gs-capsule-policy-link {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: oklch(75% 0 0) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.gs-privacy-capsule .gs-capsule-policy-link:hover {
  color: var(--brand) !important;
}

.gs-privacy-capsule .gs-capsule-cust-btn {
  background: transparent !important;
  border: none !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: oklch(85% 0 0) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: color 0.2s ease !important;
}

.gs-privacy-capsule .gs-capsule-cust-btn:hover {
  color: var(--brand) !important;
}

.gs-privacy-capsule .gs-capsule-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.gs-privacy-capsule .gs-capsule-btn-decline {
  flex: 1 !important;
  height: 2.375rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: oklch(92% 0 0) !important;
  background: color-mix(in oklch, var(--surface) 80%, transparent) !important;
  border: 0.0625rem solid color-mix(in oklch, var(--white) 14%, transparent) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: opacity var(--motion), transform var(--motion);
  box-shadow: none !important;
}

.gs-privacy-capsule .gs-capsule-btn-decline:hover {
  background: color-mix(in oklch, var(--surface) 95%, transparent) !important;
  border-color: color-mix(in oklch, var(--white) 25%, transparent) !important;
}

.gs-privacy-capsule .gs-capsule-btn-accept {
  flex: 1 !important;
  height: 2.375rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--brand-on) !important;
  background: var(--brand) !important;
  border: 0.0625rem solid color-mix(in oklch, var(--white) 20%, transparent) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: opacity var(--motion), transform var(--motion);
  box-shadow: none !important;
}

.gs-privacy-capsule .gs-capsule-btn-accept:hover {
  background: var(--brand-hover) !important;
  color: oklch(100% 0 0) !important;
}