/*
Theme Name:  Wigmorean Theme
Theme URI:   https://wigmorean.com
Description: The official WordPress theme for the Wigmorean Suite. A fully flexible, skin-agnostic base theme that harmonises natively with the Wigmorean Platform plugin. Ships with a complete Global Colors system, font-family selectors for every typographic role, layout controls, and the Wigmorean Gold Dark preset. Extend with the Wigmorean Pro plugin for advanced headers, footer builder, theme builder, mega menus, per-page overrides, and more.
Author:      Wigmorean Platform
Author URI:  https://wigmorean.com
Version:     2.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.1
License:     GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.txt
Text Domain: wigmorean
Tags:        custom-colors, custom-header, custom-footer, custom-menu, custom-logo, full-width-template, sticky-post, two-columns, left-sidebar, right-sidebar, theme-options, editor-style, translation-ready
*/

/* ═══════════════════════════════════════════════════════════════════
   WIGMOREAN THEME  v2  —  Structural Stylesheet
   ─────────────────────────────────────────────────────────────────
   DESIGN PHILOSOPHY
   All visual tokens (colours, fonts, spacing scale, shadows, radius)
   are defined as CSS custom properties and are ENTIRELY driven by the
   Customizer via wigt_dynamic_css(). The values in this stylesheet
   are structural defaults only — they define the VARIABLE NAMES that
   the rest of the codebase references, but the actual values are
   always written by the PHP layer.

   This separation means:
   • The theme is fully skin-agnostic — any colour palette works.
   • The Wigmorean Gold Dark look ships as a preset JSON, not as
     hardcoded values — it is one preset among many.
   • Child themes and the Wigmorean Pro plugin can override any token
     by writing to :root at a higher specificity.
   • Dark / Light mode toggling is a first-class feature.
═══════════════════════════════════════════════════════════════════ */

/* ── Fallback Token Block ───────────────────────────────────────────
   These values are the last resort if wigt_dynamic_css() has not
   yet written its output (e.g. during a fresh install before the
   Customizer is saved). They match the Wigmorean Gold Dark preset
   so the theme looks correct out of the box. They are ALWAYS
   overridden by the inline style block that PHP generates.
────────────────────────────────────────────────────────────────── */
:root {
  /* ── Core Palette (overridden by Customizer) ── */
  --wig-color-bg:          #18140e;
  --wig-color-bg-alt:      #211c15;
  --wig-color-bg-card:     #2b241a;
  --wig-color-bg-card-alt: #352c1f;
  --wig-color-surface:     #0f0d09;
  --wig-color-border:      rgba(255, 255, 255, 0.09);
  --wig-color-border-accent: rgba(201, 164, 74, 0.18);
  --wig-color-primary:     #c9a44a;
  --wig-color-primary-hover: #e8c96a;
  --wig-color-primary-dim: rgba(201, 164, 74, 0.15);
  --wig-color-secondary:   #1e7a82;
  --wig-color-text:        #ede9de;
  --wig-color-text-muted:  #9a927e;
  --wig-color-text-dim:    #6b6356;
  --wig-color-link:        #c9a44a;
  --wig-color-link-hover:  #e8c96a;
  --wig-color-heading:     #ede9de;
  --wig-color-danger:      #8b1a1c;
  --wig-color-success:     #2d7a4a;
  --wig-color-warning:     #9a6a1c;
  --wig-color-btn-bg:      #c9a44a;
  --wig-color-btn-text:    #18140e;
  --wig-color-btn-hover:   #e8c96a;

  /* ── Typography (overridden by Customizer) ── */
  --wig-font-display: 'Cormorant Garamond', Georgia, serif;
  --wig-font-body:    'Source Serif 4', Georgia, serif;
  --wig-font-ui:      'DM Sans', system-ui, sans-serif;
  --wig-font-mono:    'IBM Plex Mono', 'Courier New', monospace;
  --wig-font-size-base: 16px;
  --wig-line-height-base: 1.65;
  --wig-font-weight-body: 400;
  --wig-font-weight-heading: 700;

  /* ── Spacing (semi-structural, Customizer can override scale) ── */
  --wig-space-xs:  4px;
  --wig-space-sm:  8px;
  --wig-space-md:  16px;
  --wig-space-lg:  24px;
  --wig-space-xl:  40px;
  --wig-space-2xl: 64px;
  --wig-space-3xl: 96px;

  /* ── Layout (overridden by Customizer) ── */
  --wig-max-width:      1200px;
  --wig-content-width:  760px;
  --wig-sidebar-width:  300px;
  --wig-header-height:  72px;
  --wig-section-padding: 80px;

  /* ── Animation (structural) ── */
  --wig-ease:        cubic-bezier(0.2, 0, 0, 1);
  --wig-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wig-dur:         0.22s;
  --wig-dur-lg:      0.38s;

  /* ── Radius (overridden by Customizer) ── */
  --wig-radius-sm: 4px;
  --wig-radius:    8px;
  --wig-radius-lg: 14px;
  --wig-radius-xl: 22px;
  --wig-radius-full: 9999px;

  /* ── Shadows (generated from bg/primary by Customizer) ── */
  --wig-shadow-sm: 0 1px 4px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --wig-shadow:    0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  --wig-shadow-lg: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  --wig-shadow-accent: 0 0 0 1px rgba(201,164,74,0.25), 0 4px 20px rgba(201,164,74,0.08);

  /* ── Legacy aliases (backward-compat with Platform plugin) ── */
  --wig-navy:      var(--wig-color-bg);
  --wig-navy2:     var(--wig-color-bg-alt);
  --wig-navy3:     var(--wig-color-surface);
  --wig-card:      var(--wig-color-bg-card);
  --wig-card2:     var(--wig-color-bg-card-alt);
  --wig-border:    var(--wig-color-border);
  --wig-border2:   var(--wig-color-border-accent);
  --wig-gold:      var(--wig-color-primary);
  --wig-gold2:     var(--wig-color-primary-hover);
  --wig-gold-dim:  var(--wig-color-primary-dim);
  --wig-ink:       var(--wig-color-text);
  --wig-muted:     var(--wig-color-text-muted);
  --wig-dim:       var(--wig-color-text-dim);
  --wig-teal:      var(--wig-color-secondary);
  --wig-crimson:   var(--wig-color-danger);
  --wig-shadow-gold: var(--wig-shadow-accent);
}

/* ── Global Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: var(--wig-font-size-base);
}

body {
  margin: 0;
  background-color: var(--wig-color-bg);
  color: var(--wig-color-text);
  font-family: var(--wig-font-body);
  font-size: var(--wig-font-size-base);
  font-weight: var(--wig-font-weight-body);
  line-height: var(--wig-line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Site Structure ─────────────────────────────────────────────── */
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--wig-color-bg);
}

/* Pro plugin can override this with a richer background */
.wig-has-bg-effect #page {
  background:
    radial-gradient(ellipse 80vw 50vh at 15% 0%,  var(--wig-color-bg-radial-a, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 60vw 40vh at 85% 5%,  var(--wig-color-bg-radial-b, transparent) 0%, transparent 55%),
    var(--wig-color-bg);
}

#content { flex: 1; }

/* ── Typography ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wig-font-display);
  font-weight: var(--wig-font-weight-heading);
  color: var(--wig-color-heading);
  line-height: 1.1;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(36px, 5vw, 64px); }
h2 { font-size: clamp(26px, 3.5vw, 44px); }
h3 { font-size: clamp(20px, 2.2vw, 30px); }
h4 { font-size: clamp(17px, 1.8vw, 22px); }
h5 { font-size: 18px; }
h6 {
  font-size: 15px;
  font-family: var(--wig-font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--wig-color-primary);
}

p {
  margin: 0 0 1.2em;
  color: var(--wig-color-text-muted);
  font-size: clamp(14.5px, 1.1vw, 16.5px);
  line-height: 1.72;
}

a {
  color: var(--wig-color-link);
  text-decoration: none;
  transition: color var(--wig-dur) var(--wig-ease), opacity var(--wig-dur) var(--wig-ease);
}
a:hover { color: var(--wig-color-link-hover); }

strong, b { color: var(--wig-color-text); font-weight: 600; }
em, i { font-style: italic; }

blockquote {
  margin: 1.8em 0;
  padding: 1.2em 1.6em;
  border-left: 3px solid var(--wig-color-primary);
  background: var(--wig-color-bg-alt);
  border-radius: 0 var(--wig-radius) var(--wig-radius) 0;
  font-family: var(--wig-font-display);
  font-size: 1.15em;
  font-style: italic;
  color: var(--wig-color-text);
}

blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-size: 0.78em;
  font-family: var(--wig-font-mono);
  font-style: normal;
  color: var(--wig-color-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

code, kbd, samp {
  font-family: var(--wig-font-mono);
  font-size: 0.87em;
  background: var(--wig-color-bg-alt);
  border: 1px solid var(--wig-color-border);
  padding: 0.15em 0.45em;
  border-radius: var(--wig-radius-sm);
  color: var(--wig-color-primary-hover);
}

pre {
  background: var(--wig-color-bg-alt);
  border: 1px solid var(--wig-color-border);
  border-radius: var(--wig-radius);
  padding: 1.2em;
  overflow-x: auto;
  margin: 1.5em 0;
}
pre code { background: none; border: none; padding: 0; }

/* ── Lists ──────────────────────────────────────────────────────── */
ul, ol {
  color: var(--wig-color-text-muted);
  padding-left: 1.4em;
  margin: 0 0 1.2em;
}
li { margin-bottom: 0.35em; }
ul li::marker { color: var(--wig-color-primary); }

hr {
  border: none;
  border-top: 1px solid var(--wig-color-border);
  margin: 2em 0;
}

/* ── Images & Media ─────────────────────────────────────────────── */
img, video, iframe { max-width: 100%; height: auto; }
figure { margin: 1.5em 0; }
figcaption {
  font-family: var(--wig-font-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--wig-color-text-dim);
  margin-top: 0.6em;
  text-align: center;
}

/* ── Tables ─────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 14.5px; }
th {
  background: var(--wig-color-bg-alt);
  color: var(--wig-color-primary);
  font-family: var(--wig-font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--wig-color-border-accent);
}
td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--wig-color-border);
  color: var(--wig-color-text-muted);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }

/* ── Forms ──────────────────────────────────────────────────────── */
input, textarea, select, button {
  font-family: var(--wig-font-body);
  font-size: var(--wig-font-size-base);
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="url"],
input[type="number"], textarea, select {
  width: 100%;
  background: var(--wig-color-bg-alt);
  border: 1px solid var(--wig-color-border);
  border-radius: var(--wig-radius-sm);
  color: var(--wig-color-text);
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--wig-dur) var(--wig-ease), box-shadow var(--wig-dur) var(--wig-ease);
  appearance: none;
  -webkit-appearance: none;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--wig-color-primary);
  box-shadow: 0 0 0 3px var(--wig-color-primary-dim);
}

input::placeholder, textarea::placeholder { color: var(--wig-color-text-dim); }
textarea { resize: vertical; min-height: 120px; }

label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--wig-font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--wig-color-primary);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.wig-btn, .wp-block-button__link,
input[type="submit"], button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--wig-color-btn-bg);
  color: var(--wig-color-btn-text);
  font-family: var(--wig-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: none;
  border-radius: var(--wig-radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--wig-dur) var(--wig-ease), transform var(--wig-dur) var(--wig-ease), box-shadow var(--wig-dur) var(--wig-ease);
  white-space: nowrap;
}
.wig-btn:hover, input[type="submit"]:hover, button[type="submit"]:hover {
  background: var(--wig-color-btn-hover);
  color: var(--wig-color-btn-text);
  transform: translateY(-1px);
  box-shadow: var(--wig-shadow-accent);
}

.wig-btn-outline {
  background: transparent;
  border: 1px solid var(--wig-color-primary);
  color: var(--wig-color-primary);
}
.wig-btn-outline:hover {
  background: var(--wig-color-primary-dim);
  color: var(--wig-color-primary-hover);
}

.wig-btn-ghost {
  background: transparent;
  color: var(--wig-color-text-muted);
  border: 1px solid var(--wig-color-border);
}
.wig-btn-ghost:hover {
  border-color: var(--wig-color-border-accent);
  color: var(--wig-color-text);
  background: rgba(255,255,255,0.04);
}

.wig-btn--sm { padding: 8px 18px; font-size: 12px; }
.wig-btn--lg { padding: 16px 36px; font-size: 15px; }

/* ── Layout Containers ──────────────────────────────────────────── */
.wig-container {
  width: min(var(--wig-max-width), 94vw);
  margin: 0 auto;
}
.wig-container-narrow {
  width: min(var(--wig-content-width), 94vw);
  margin: 0 auto;
}

/* ── Skip Link ──────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  padding: 10px 16px;
  background: var(--wig-color-btn-bg);
  color: var(--wig-color-btn-text);
  font-family: var(--wig-font-ui);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--wig-radius) var(--wig-radius);
  z-index: 9999;
  transition: top var(--wig-dur) var(--wig-ease);
}
.skip-link:focus { top: 0; }

/* ── WP Admin Bar ───────────────────────────────────────────────── */
.admin-bar .wig-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar .wig-header { top: 46px !important; }
}

/* ── Selection / Scrollbar ──────────────────────────────────────── */
::selection { background: var(--wig-color-primary-dim); color: var(--wig-color-text); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--wig-color-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--wig-color-text-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--wig-color-text-muted); }

/* ── Screen Reader / A11y ───────────────────────────────────────── */
.screen-reader-text {
  position: absolute; left: -10000px; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
}
:focus-visible { outline: 2px solid var(--wig-color-primary); outline-offset: 3px; }

/* ── WordPress Core Classes ──────────────────────────────────────── */
.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 1em auto; }
.alignwide { margin-left: calc(-5vw); margin-right: calc(-5vw); max-width: calc(100% + 10vw); }

/* ── Sticky Helper ──────────────────────────────────────────────── */
.wig-sticky { position: sticky; top: calc(var(--wig-header-height) + 20px); }

/* ── Pagination ─────────────────────────────────────────────────── */
.wig-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 2em 0; }
.wig-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  background: var(--wig-color-bg-alt);
  border: 1px solid var(--wig-color-border);
  border-radius: var(--wig-radius-sm);
  color: var(--wig-color-text-muted);
  font-family: var(--wig-font-mono);
  font-size: 12px;
  text-decoration: none;
  transition: all var(--wig-dur) var(--wig-ease);
}
.wig-pagination .page-numbers:hover,
.wig-pagination .page-numbers.current {
  background: var(--wig-color-primary-dim);
  border-color: var(--wig-color-border-accent);
  color: var(--wig-color-primary);
}

/* ── Widgets ────────────────────────────────────────────────────── */
.widget {
  margin-bottom: 2em;
  padding: 1.4em;
  background: var(--wig-color-bg-alt);
  border: 1px solid var(--wig-color-border);
  border-radius: var(--wig-radius);
}
.widget-title {
  font-family: var(--wig-font-mono) !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: 1.2px !important; text-transform: uppercase !important;
  color: var(--wig-color-primary) !important;
  margin-bottom: 1em !important; padding-bottom: 0.6em !important;
  border-bottom: 1px solid var(--wig-color-border-accent) !important;
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li {
  padding: 6px 0;
  border-bottom: 1px solid var(--wig-color-border);
  font-size: 14px; color: var(--wig-color-text-muted);
}
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--wig-color-text-muted); text-decoration: none; transition: color var(--wig-dur) var(--wig-ease); }
.widget ul li a:hover { color: var(--wig-color-primary); }

/* ── Comments ───────────────────────────────────────────────────── */
.wig-comments { margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--wig-color-border); }
.comment-list { list-style: none; padding: 0; }
.comment-body {
  padding: 1.2em;
  background: var(--wig-color-bg-alt);
  border: 1px solid var(--wig-color-border);
  border-radius: var(--wig-radius);
  margin-bottom: 1em;
}
.comment-meta {
  display: flex; align-items: center; gap: 10px; margin-bottom: 0.8em;
  font-family: var(--wig-font-mono); font-size: 10px;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--wig-color-text-dim);
}
.comment-author .fn { color: var(--wig-color-primary); font-size: 13px; }
.comment-content p { font-size: 14.5px; }
.comment-reply-link {
  font-family: var(--wig-font-mono); font-size: 10px;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--wig-color-primary); text-decoration: none;
}

/* ── Tag Cloud ──────────────────────────────────────────────────── */
.tag-cloud-link {
  display: inline-block; padding: 4px 10px;
  background: var(--wig-color-bg-alt);
  border: 1px solid var(--wig-color-border);
  border-radius: var(--wig-radius-sm);
  color: var(--wig-color-text-muted);
  font-family: var(--wig-font-mono); font-size: 11px !important;
  text-decoration: none; margin: 3px;
  transition: all var(--wig-dur) var(--wig-ease);
}
.tag-cloud-link:hover { border-color: var(--wig-color-border-accent); color: var(--wig-color-primary); }

/* ── Search Form ────────────────────────────────────────────────── */
.wig-search-form { display: flex; gap: 8px; }
.wig-search-form .search-field { flex: 1; margin: 0; }
.wig-search-form .search-submit { padding: 10px 18px; flex-shrink: 0; }

/* ── WooCommerce Harmonise ──────────────────────────────────────── */
.woocommerce, .woocommerce-page { color: var(--wig-color-text-muted); }
.woocommerce h1, .woocommerce h2, .woocommerce h3 { color: var(--wig-color-heading); }

/* ── Utility ────────────────────────────────────────────────────── */
.wig-accent   { color: var(--wig-color-primary); }
.wig-muted    { color: var(--wig-color-text-muted); }
.wig-text     { color: var(--wig-color-text); }
.wig-mono     { font-family: var(--wig-font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.wig-serif    { font-family: var(--wig-font-display); }
.wig-ui       { font-family: var(--wig-font-ui); }
.wig-hidden   { display: none !important; }
.wig-text-center { text-align: center; }
/* legacy aliases */
.wig-gold     { color: var(--wig-color-primary); }
.wig-ink      { color: var(--wig-color-text); }

/* ── Responsive: base ───────────────────────────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: clamp(28px, 7vw, 40px); }
  h2 { font-size: clamp(22px, 5.5vw, 32px); }
  h3 { font-size: clamp(18px, 4vw, 24px); }
  .wig-btn { padding: 10px 22px; }
}

/* ── Light Mode Overrides ───────────────────────────────────────── */
/* When .wig-light-mode is on body (set by Customizer color mode) */
body.wig-light-mode {
  --wig-color-bg:          #ffffff;
  --wig-color-bg-alt:      #f5f4f0;
  --wig-color-bg-card:     #f0ede6;
  --wig-color-bg-card-alt: #e8e4dc;
  --wig-color-surface:     #fafaf8;
  --wig-color-border:      rgba(0, 0, 0, 0.09);
  --wig-color-border-accent: rgba(100, 70, 20, 0.18);
  --wig-color-text:        #18140e;
  --wig-color-text-muted:  #5a5245;
  --wig-color-text-dim:    #8a8070;
  --wig-color-heading:     #18140e;
  --wig-shadow-sm: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --wig-shadow:    0 4px 20px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
  --wig-shadow-lg: 0 12px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
}