/*
Theme Name: Worthkeep
Theme URI: https://worthkeep.co
Author: Worthkeep
Author URI: https://worthkeep.co
Description: Custom standalone WordPress theme for Worthkeep — Men's lifestyle editorial publication. Built from Figma design.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: worthkeep
Tags: editorial, magazine, lifestyle, one-column, two-columns, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ============================================================
   SECTION: Global Design Tokens START
   ============================================================
   ALL reusable values live here.
   Change ONCE in :root → applies everywhere.
   Categories: COLORS · LAYOUT · TYPOGRAPHY · SPACING · BORDERS
               · SHADOWS · TRANSITIONS · ASPECT RATIOS · OPACITY
   NOTE: CSS custom properties cannot be used inside @media queries
         directly. For media-query breakpoint tokens, see the
         "RESPONSIVE BREAKPOINT CONSTANTS" comment block below.
   ============================================================ */

:root {
  /* ============================================================
     1. PRIMITIVE COLOR TOKENS (Raw brand + neutral hex values)
     Source of truth: Figma "Primitive Color Tokens" panel.
     Components and page frames MUST NEVER bind to these directly.
     Always use the Semantic Color Tokens (group 2) below instead.
     Primitive palette: 4 Brand + 7 Neutral = 11 raw values.
     ============================================================ */
  /* ---- BRAND PRIMITIVES (4 values) ---- */
  --primitive-brand-forge: #1A1A18;
  /* Brand/Forge */
  --primitive-brand-copper: #A0673A;
  /* Brand/Copper */
  --primitive-brand-copper-dark: #7C4F2C;
  /* Brand/Copper-Dark */
  --primitive-brand-copper-light: #C99868;
  /* Brand/Copper-Light */

  /* ---- NEUTRAL PRIMITIVES (7 values) ---- */
  --primitive-neutral-parchment: #F7F6F4;
  /* Neutral/Parchment */
  --primitive-neutral-parchment-dark: #F7F6F4;
  /* Neutral/Parchment-Dark */
  --primitive-neutral-white: #FFFFFF;
  /* Neutral/White */
  --primitive-neutral-forge-secondary: #3D3D3A;
  /* Neutral/Forge-Secondary */
  --primitive-neutral-mid-gray: #888888;
  /* Neutral/Mid-Gray */
  --primitive-neutral-light-rule: #E8E6E2;
  /* Neutral/Light-Rule */
  --primitive-neutral-border-strong: #DDD9D1;
  /* Neutral/Border-Strong */

  /* ---- PRIMITIVE RGB CHANNELS — for rgba() / color-mix() transparency mixing ---- */
  --prgb-forge: 26, 26, 24;
  --prgb-copper: 160, 103, 58;
  --prgb-copper-dark: 124, 79, 44;
  --prgb-copper-light: 201, 152, 104;
  --prgb-parchment: 247, 246, 244;
  --prgb-parchment-dark: 237, 234, 228;
  --prgb-forge-secondary: 61, 61, 58;
  --prgb-mid-gray: 136, 136, 136;
  --prgb-light-rule: 232, 230, 226;
  --prgb-border-strong: 221, 217, 209;

  /* ============================================================
     2. SEMANTIC COLOR TOKENS (Aliases of primitives — THESE bind to components)
     Source of truth: Figma "Semantic Color Tokens" panels.
     Groups: Text · Background · Border · Action · Icon
     Never re-declare a hex value in this group; always alias a primitive.
     ============================================================ */

  /* ---- SEMANTIC: TEXT (7 tokens) ---- */
  --text-primary: var(--primitive-brand-forge);
  /* Text/Primary      → Forge       */
  --text-secondary: var(--primitive-neutral-forge-secondary);
  /* Text/Secondary    → Forge-Sec.  */
  --text-muted: var(--primitive-neutral-mid-gray);
  /* Text/Muted        → Mid-Gray    */
  --text-inverse: var(--primitive-neutral-parchment);
  /* Text/Inverse      → Parchment   */
  --text-accent: var(--primitive-brand-copper-dark);
  /* Text/Accent       → Copper-Dark */
  --text-link: var(--primitive-brand-copper-dark);
  /* Text/Link         → Copper-Dark */
  --text-link-hover: var(--primitive-brand-copper);
  /* Text/Link-Hover   → Copper      */

  /* ---- SEMANTIC: BACKGROUND (4 tokens) ---- */
  --bg-primary: var(--primitive-neutral-parchment);
  /* Background/Primary   → Parchment      */
  --bg-secondary: var(--primitive-neutral-white);
  /* Background/Secondary → White          */
  --bg-subtle: var(--primitive-neutral-parchment-dark);
  /* Background/Subtle    → Parchment-Dark */
  --bg-inverse: var(--primitive-brand-forge);
  /* Background/Inverse   → Forge          */

  /* ---- SEMANTIC: BORDER (3 tokens) ---- */
  --border-subtle: var(--primitive-neutral-light-rule);
  /* Border/Subtle  → Light-Rule   */
  --border-default: var(--primitive-neutral-border-strong);
  /* Border/Default → Border-Strong*/
  --border-focus: var(--primitive-brand-copper);
  /* Border/Focus  → Copper       */

  /* ---- SEMANTIC: ACTION (3 tokens — CTA button states) ---- */
  --action-primary: var(--primitive-brand-copper);
  /* Action/Primary        → Copper     */
  --action-primary-hover: var(--primitive-brand-copper-dark);
  /* Action/Primary-Hover  → Copper-Dark*/
  --action-primary-text: var(--primitive-neutral-parchment);
  /* Action/Primary-Text   → Parchment  */

  /* ---- SEMANTIC: ICON (4 tokens) ---- */
  --icon-primary: var(--primitive-brand-forge);
  /* Icon/Primary  → Forge     */
  --icon-secondary: var(--primitive-neutral-mid-gray);
  /* Icon/Secondary→ Mid-Gray  */
  --icon-inverse: var(--primitive-neutral-parchment);
  /* Icon/Inverse  → Parchment */
  --icon-accent: var(--primitive-brand-copper);
  /* Icon/Accent   → Copper    */

  /* ---- LEGACY/COMPATIBILITY ALIASES (Old token names — DO NOT use in new code)
        Mapped to their new semantic equivalents so existing selectors continue working
        while we migrate the rest of the theme incrementally. -------------------------- */
  --color-forge: var(--primitive-brand-forge);
  --color-copper: var(--primitive-brand-copper);
  --color-copper-dark: var(--primitive-brand-copper-dark);
  --color-copper-hover: var(--primitive-brand-copper-dark);
  --color-forge-hover: #000000;
  --color-parchment: var(--primitive-neutral-parchment);
  --color-parchment-light: var(--primitive-neutral-parchment-light);
  --color-light-rule: var(--primitive-neutral-light-rule);
  --color-mid-gray: var(--primitive-neutral-mid-gray);
  --color-white: var(--primitive-neutral-white);
  --rgb-forge: var(--prgb-forge);
  --rgb-copper: var(--prgb-copper);
  --rgb-copper-dark: var(--prgb-copper-dark);
  --rgb-parchment: var(--prgb-parchment);
  --rgb-light-rule: var(--prgb-light-rule);

  /* ===== LAYOUT — Widths, containers, padding ===== */
  --content-width: 1440px;
  --content-narrow: 740px;
  --content-wide: 1100px;
  --sidebar-width: 320px;
  --content-medium: 820px;
  --content-small: 680px;
  --content-xs: 640px;
  --content-xxs: 620px;
  --content-mini: 560px;
  --content-micro: 520px;
  --content-nano: 480px;

  --container-pad: 24px;
  --container-pad-tablet-land: 32px;
  --container-pad-tablet-port: 16px;
  --container-pad-mobile: 16px;

  --layout-gap: 64px;
  --layout-gap-tablet: 48px;

  /* ===== TYPOGRAPHY — Font Families ===== */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ===== TYPOGRAPHY — Weights ===== */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ============================================================
     3. SEMANTIC TYPOGRAPHY TOKENS (Component-level intent aliases)
     Source of truth: Figma "Typography Spec" panel.
     Display/headings → Cormorant Garamond (display serif).
     Body/UI → Inter (sans).
     10 named styles: Display/Hero · Heading/H1–H4 · Card/Large/Default/Compact · Body/Large/Default/Small.
     Each = [family + weight + size + line-height + letter-spacing] as a group of sub-tokens.
     Mobile variants documented inline; apply inside @media (max-width: 480px) rules.
     ============================================================ */

  /* -- DISPLAY (serif: Cormorant Garamond) ------------------------------------------------ */
  --display-hero-font: var(--font-display);
  --display-hero-weight: var(--fw-regular);
  --display-hero-size: clamp(var(--fs-9xl), 6.2vw, 88px);
  /* Desktop ~64–88px · Mobile clamped per screenshot */
  --display-hero-size-m: clamp(var(--fs-7xl), 10.5vw, var(--fs-10xl));
  --display-hero-lh: var(--lh-tight-2);
  /* 1.08 */
  --display-hero-lh-m: var(--lh-tight-3);
  --display-hero-ls: var(--ls-tiny);

  /* -- HEADINGS (serif: Cormorant Garamond) ------------------------------------------------ */
  --heading-h1-font: var(--font-display);
  --heading-h1-weight: var(--fw-regular);
  --heading-h1-size: clamp(var(--fs-8xl), 5.0vw, var(--fs-11xl));
  /* ~56–60px */
  --heading-h1-size-m: clamp(var(--fs-7xl), 8.8vw, var(--fs-9xl));
  --heading-h1-lh: var(--lh-tight-3);
  /* 1.12 */
  --heading-h1-lh-m: var(--lh-tight-4);

  --heading-h2-font: var(--font-display);
  --heading-h2-weight: var(--fw-regular);
  --heading-h2-size: clamp(var(--fs-6xl), 4.0vw, var(--fs-9xl));
  /* ~34–48px */
  --heading-h2-size-m: clamp(var(--fs-5xl), 7.0vw, var(--fs-7xl));
  --heading-h2-lh: var(--lh-tight-4);
  /* 1.15 */

  --heading-h3-font: var(--font-display);
  --heading-h3-weight: var(--fw-regular);
  --heading-h3-size: clamp(var(--fs-4xl), 3.2vw, var(--fs-7xl));
  /* ~28–40px */
  --heading-h3-size-m: clamp(var(--fs-4xl), 6.0vw, var(--fs-6xl));
  --heading-h3-lh: var(--lh-snug);
  /* 1.20 */

  --heading-h4-font: var(--font-display);
  --heading-h4-weight: var(--fw-regular);
  --heading-h4-size: clamp(var(--fs-3xl), 2.6vw, var(--fs-5xl));
  /* ~26–32px */
  --heading-h4-size-m: clamp(var(--fs-3xl), 5.5vw, var(--fs-5xl));
  --heading-h4-lh: var(--lh-snug-2);
  /* 1.25 */

  /* -- CARD TITLES (serif: Cormorant Garamond) -------------------------------------------- */
  --card-large-font: var(--font-display);
  --card-large-weight: var(--fw-regular);
  --card-large-size: clamp(var(--fs-3xl), 2.6vw, var(--fs-5xl));
  /* ~26–32px */
  --card-large-size-m: var(--fs-4xl);
  --card-large-lh: var(--lh-tight-4);
  /* 1.15 */

  --card-default-font: var(--font-display);
  --card-default-weight: var(--fw-regular);
  --card-default-size: clamp(var(--fs-2xl), 2.0vw, var(--fs-4xl));
  /* ~24–28px */
  --card-default-size-m: var(--fs-3xl);
  --card-default-lh: var(--lh-tight-4);

  --card-compact-font: var(--font-display);
  --card-compact-weight: var(--fw-regular);
  --card-compact-size: clamp(var(--fs-xl), 1.6vw, var(--fs-3xl));
  /* ~22–26px */
  --card-compact-size-m: var(--fs-2xl);
  --card-compact-lh: var(--lh-normal);
  /* 1.30 */

  /* -- BODY COPY (sans: Inter) ------------------------------------------------------------ */
  --body-large-font: var(--font-body);
  --body-large-weight: var(--fw-regular);
  --body-large-size: var(--fs-lg-2);
  /* 19px */
  --body-large-size-m: var(--fs-lg);
  /* Mobile 18px fallback */
  --body-large-lh: var(--lh-loose);
  /* 1.70 */
  --body-large-ls: var(--ls-tiny);

  --body-default-font: var(--font-body);
  --body-default-weight: var(--fw-regular);
  --body-default-size: var(--fs-body);
  /* 17px */
  --body-default-lh: var(--lh-loose-2);
  /* 1.75 */
  --body-default-ls: var(--ls-tiny);

  --body-small-font: var(--font-body);
  --body-small-weight: var(--fw-regular);
  --body-small-size: var(--fs-base-2);
  /* 15px */
  --body-small-size-m: var(--fs-base);
  /* 14px */
  --body-small-lh: var(--lh-loose-3);
  /* 1.80 */

  /* ===== TYPOGRAPHY — Type Scale ===== */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-sm-2: 13px;
  --fs-base: 14px;
  --fs-base-2: 15px;
  --fs-md: 16px;
  --fs-body: 17px;
  --fs-lg: 18px;
  --fs-lg-2: 18px;
  --fs-xl: 18px;
  --fs-2xl: 24px;
  --fs-3xl: 26px;
  --fs-4xl: 28px;
  --fs-5xl: 32px;
  --fs-6xl: 34px;
  --fs-7xl: 40px;
  --fs-8xl: 44px;
  --fs-9xl: 48px;
  --fs-10xl: 56px;
  --fs-11xl: 60px;
  --fs-12xl: 42px;
  --fs-13xl: 64px;

  /* ===== TYPOGRAPHY — Line Heights ===== */
  --lh-tight: 1;
  --lh-tight-2: 1.08;
  --lh-tight-3: 1.12;
  --lh-tight-4: 1.15;
  --lh-snug: 1.2;
  --lh-snug-2: 1.25;
  --lh-normal: 1.3;
  --lh-normal-2: 1.35;
  --lh-normal-3: 1.4;
  --lh-relaxed: 1.45;
  --lh-relaxed-2: 1.6;
  --lh-loose: 1.7;
  --lh-loose-2: 1.75;
  --lh-loose-3: 1.8;
  --lh-loose-4: 2;

  /* ===== TYPOGRAPHY — Letter Spacing ===== */
  --ls-tiny: 0.005em;
  --ls-sm: 0.01em;
  --ls-sm-2: 0.02em;
  --ls-sm-3: 0.03em;
  --ls-sm-4: 0.04em;
  --ls-md: 0.05em;
  --ls-md-2: 0.06em;
  --ls-lg: 0.08em;
  --ls-lg-2: 0.10em;
  --ls-lg-3: 0.11em;
  --ls-xl: 0.12em;
  --ls-xl-2: 0.14em;
  --ls-xl-3: 0.16em;

  /* ===== SPACING SCALE (4px base · all padding/margin/gap) ===== */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 14px;
  --space-12: 16px;
  --space-13: 36px;
  --space-14: 40px;
  --space-15: 44px;
  --space-16: 48px;
  --space-17: 24px;
  --space-18: 60px;
  --space-19: 64px;
  --space-20: 72px;
  --space-21: 80px;
  --space-22: 88px;
  --space-23: 96px;

  /* ===== SPACING SCALE — FIGMA SEMANTIC ALIASES (8px base grid)
     Source of truth: Figma "Spacing Scale" panel.
     Map Figma spacing/N → matching --space-NN raw pixel value.
     Use these in NEW code / new Figma zone builds for 1:1 spec fidelity.
     spacing/4  (4px)  → space-1    spacing/24 (24px) → space-10
     spacing/8  (8px)  → space-3    spacing/32 (32px) → space-12
     spacing/16 (16px) → space-7    spacing/40 (40px) → space-14
                                spacing/48 (48px) → space-16
                                spacing/64 (64px) → space-19
                                spacing/80 (80px) → space-21
                                spacing/96 (96px) → space-23
                                spacing/128(128px)→ raw 128px (new, no prior space-N) */
  --spacing-4: var(--space-1);
  /* 4px   */
  --spacing-8: var(--space-3);
  /* 8px   */
  --spacing-16: var(--space-7);
  /* 16px  */
  --spacing-24: var(--space-10);
  /* 24px  */
  --spacing-32: var(--space-12);
  /* 32px  */
  --spacing-40: var(--space-14);
  /* 40px  */
  --spacing-48: var(--space-16);
  /* 48px  */
  --spacing-64: var(--space-19);
  /* 64px  */
  --spacing-80: var(--space-21);
  /* 80px  */
  --spacing-96: var(--space-23);
  /* 96px  */
  --spacing-128: 128px;
  /* 128px · new top-of-scale */

  /* ===== BORDERS · RADIUS ===== */
  --border-1: 1px solid var(--border-subtle);
  --border-1-copper: 1px solid var(--action-primary);
  --border-1-forge: 1px solid var(--bg-inverse);
  --border-1-parchment: 1px solid rgba(var(--prgb-parchment), 0.32);
  --border-2-copper: 2px solid var(--action-primary);
  --border-4-copper: 4px solid var(--action-primary);
  --border-dashed: 1px dashed var(--border-subtle);
  --border-top-copper-2: 2px solid var(--action-primary);
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-full: 50%;

  /* ===== SHADOWS · ELEVATION ===== */
  --shadow-drawer: -10px 0 40px rgba(var(--prgb-forge), 0.18);
  --shadow-card: 0 var(--space-2) var(--space-12) rgba(var(--prgb-forge), 0.06);
  --shadow-card-hover: 0 var(--space-3) var(--space-14) rgba(var(--prgb-forge), 0.10);

  /* ===== TRANSITIONS ===== */
  --ease-default: ease;
  --ease-out: ease-out;
  --dur-1: 0.15s;
  --dur-2: 0.18s;
  --dur-3: 0.20s;
  --dur-4: 0.22s;
  --dur-5: 0.28s;
  --dur-6: 0.40s;

  /* ===== ASPECT RATIOS ===== */
  --ar-1-1: 1 / 1;
  --ar-4-3: 4 / 3;
  --ar-3-4: 3 / 4;
  --ar-16-9: 16 / 9;
  --ar-16-10: 16 / 10;

  /* ===== OPACITY LEVELS ===== */
  --opacity-12: 0.12;
  --opacity-30: 0.30;
  --opacity-32: 0.32;
  --opacity-35: 0.35;
  --opacity-45: 0.45;
  --opacity-65: 0.65;
  --opacity-70: 0.70;
  --opacity-80: 0.80;
  --opacity-85: 0.85;
  --opacity-88: 0.88;
  --opacity-90: 0.90;
  --opacity-92: 0.92;
  --opacity-98: 0.98;
  --opacity-100: 1;

  /* ===== A11Y · WCAG 2.2 ===== */
  --touch-target: 44px;
}

/* ============================================================
   RESPONSIVE BREAKPOINT CONSTANTS (Reference Only)
   CSS custom properties cannot be used inside @media queries.
   Keep these values SYNCED with your @media declarations.

   --bp-xs:      480px   (Mobile max)
   --bp-sm:      481px   (Tablet Portrait min)
   --bp-md:      768px   (Tablet Portrait max / Tablet Land min -1)
   --bp-lg:      769px   (Tablet Landscape min)
   --bp-xl:      1024px  (Tablet Landscape max / Desktop min -1)
   --bp-2xl:     1025px  (Desktop min)
   --bp-wide:    1280px  (Content full-bleed)
   ============================================================ */

/* SECTION: Global Design Tokens END */

/* ---------- RESET ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--body-default-font);
  font-size: var(--body-default-size);
  line-height: var(--body-default-lh);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-3) var(--ease-default);
}

a:hover {
  color: var(--text-link-hover);
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ---------- LAYOUT ---------- */
.wk-container {
  margin: 0 auto;
}

.wk-container--narrow {
  max-width: var(--content-narrow);
}

.wk-container--medium {
  max-width: var(--content-medium);
}

.wk-container--small {
  max-width: var(--content-small);
}

/* .home #primary {
  max-width: var(--content-width);
  padding: 40px 80px;
  margin: 0 auto;
} */

.wp-singular #primary {
  /* max-width: var(--content-width); */
  /* padding: 80px; */
  margin: 0 auto;
  background: var(--bg-secondary);
}

/* .wk-mk__cta-dark{
  background-color: #1A1A18;
  padding: 80px;
} */

.wk-single{
max-width: var(--content-width);
margin: 0 auto;
padding-top: 80px;
}

.parent-single-hero{
   padding: 0px 220px 80px 220px;
}
/* ---------- HEADINGS (Semantic Typography tokens applied) ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-h1-font);
  font-weight: var(--heading-h1-weight);
  color: var(--text-primary);
}

h1 {
  font-size: var(--heading-h1-size);
  line-height: var(--heading-h1-lh);
}

h2 {
  font-size: var(--heading-h2-size);
  line-height: var(--heading-h2-lh);
  font-family: var(--heading-h2-font);
  font-weight: var(--heading-h2-weight);
}

h3 {
  font-size: var(--heading-h3-size);
  line-height: var(--heading-h3-lh);
  font-family: var(--heading-h3-font);
  font-weight: var(--fw-semibold);
}

h4 {
  font-size: var(--heading-h4-size);
  line-height: var(--heading-h4-lh);
  font-family: var(--heading-h4-font);
}


/* ---------- TYPOGRAPHY UTILITIES ---------- */
.wk-pillar-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-lg-2);
  text-transform: uppercase;
  color: var(--text-accent);
  display: inline-block;
}

.wk-section-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-lg-2);
  text-transform: uppercase;
  color: var(--text-accent);
  display: inline-block;
  margin-bottom: var(--space-10);
}

.wk-meta {
  font-family: var(--body-small-font);
  font-size: var(--fs-sm-2);
  color: var(--text-muted);
}

/* ---------- BUTTONS (Semantic Action tokens applied) ---------- */
.wk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-14);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-lg-2);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  transition: background var(--dur-3) var(--ease-default), color var(--dur-3) var(--ease-default), opacity var(--dur-3) var(--ease-default);
  white-space: nowrap;
}

.wk-btn--primary {
  background: var(--action-primary);
  color: var(--action-primary-text);
}

.wk-btn--primary:hover {
  background: var(--action-primary-hover);
  color: var(--action-primary-text);
}

.wk-btn--dark {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}

.wk-btn--dark:hover {
  background: #000000;
  color: var(--text-inverse);
}

.wk-link-arrow {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--text-link);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.wk-link-arrow:hover {
  color: var(--text-link-hover);
}

.wk-link-arrow svg {
  width: 24px;
  height: 24px;
}



/* SECTION: Site Header CSS Start
   ================================================
   ZONE A — SITE HEADER (3 ROWS) — Figma-aligned
   Row 1 (dark, top):    Centered WORTHKEEP wordmark only
   Row 2 (dark, bottom): SUBSCRIBE [L] · tagline [C] · socials + search [R]
   Row 3 (white nav):    7 pillar links, centered
   Breakpoints:
     Desktop (≥1025px):    All 3 rows visible
     Tablet L (769–1024):  All 3 rows visible, scaled
     Tablet P (481–768):   All 3 rows visible (matches tablet screenshot, same layout as desktop)
     Mobile (≤480px):      Rows 1+2 visible (row-2 L/C/socials hidden, R=search+hamburger)
   ================================================ */

/* SECTION: Brand Block Container CSS Start
   ---------- BRAND BLOCK CONTAINER ---------- */
.wk-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.wk-header__brand {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  width: 100%;
}

.wk-header__brand-inner {
  width: 100%;
  max-width: var(--content-width);
  display: flex;
  flex-direction: column;
  padding: 0 80px;
  margin: 0 auto;
}

.wk-header__brand-row {
  width: 100%;
  display: flex;
  align-items: center;
}

/* SECTION: Brand Block Container CSS End */

/* SECTION: Header Row 1 (Wordmark) CSS Start
   ---------- ROW 1: centered wordmark only ---------- */
.wk-header__brand-row--1 {
  justify-content: center;
  padding-top: 8px;
}

.wk-header__wordmark {
  font-family: 'Georgia', 'display-hero-font', serif;
  font-size: var(--fs-12xl);
  font-weight: 400;
  line-height: normal;
  color: #F7F6F4;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  margin: 0;
}

.wk-header__wordmark:hover {
  color: var(--text-inverse);
}

.wk-header__wordmark span {
  color: var(--action-primary);
}

/* SECTION: Header Row 1 (Wordmark) CSS End */

/* SECTION: Header Row 2 (Subscribe / Tagline / Socials+Search) CSS Start
   ---------- ROW 2: L=SUBSCRIBE · C=tagline · R=socials+search+hamburger ---------- */
.wk-header__brand-row--2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-10);
  padding-bottom: 12px;
}

.wk-header__brand-left {
  justify-self: start;
}

.wk-header__brand-center {
  justify-self: center;
  text-align: center;
  align-self: end;
}

.wk-header__brand-right {
  justify-self: end;
  display: flex;
  align-items: center;
}

.wk-header__subscribe {
  background: var(--primitive-brand-copper-dark);
  color: var(--action-primary-text);
  padding: var(--space-12) var(--space-17);
  /* letter-spacing: var(--ls-xl-3); */
  font-weight: var(--fw-semibold);
  font-size: 14px;
  white-space: nowrap;
  transition: background var(--dur-3) var(--ease-default), color var(--dur-3) var(--ease-default);
}

.wk-header__subscribe:hover {
  background: var(--action-primary-hover);
  color: var(--action-primary-text);
}

.wk-header__tagline {
  font-family: var(--body-large-font);
  font-size: 18px;
  font-weight: 400;
  color: var(--text-inverse);
  line-height: 32px;
  margin: 0;
}

.wk-header__socials {
  display: flex;
  align-items: center;
  gap: var(--space-11);
}

.wk-header__social-link {
  color: var(--icon-inverse);
  opacity: var(--opacity-90);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  min-height: 18px;
  gap: 14px;
  transition: color var(--dur-2) var(--ease-default), opacity var(--dur-2) var(--ease-default);
}

.wk-header__social-link:hover {
  opacity: var(--opacity-100);
  color: var(--icon-accent);
}

.wk-header__social-link svg {
  width: 18px;
  height: 18px;
  color: #888888;
}

.wk-header__icon-link {
  color: var(--icon-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* padding: var(--space-2); */
  padding-left: 16px;
  padding-bottom: 5px;
  min-width: 18px;
  min-height: 18px;
  transition: color var(--dur-2) var(--ease-default), opacity var(--dur-2) var(--ease-default);
}

.wk-header__icon-link:hover {
  color: var(--icon-accent);
}

.wk-header__icon-link svg {
  width: 24px;
  height: 24px;
}

/* Hamburger morph: search & hamburger icons are identical stroke (2) + identical hitbox (SVG 22×22 + 6px padding = 34×34).
   Overlap via CSS grid so both SVGs define the button's intrinsic size (matches search icon sizing exactly). */
.wk-header__hamburger {
  position: relative;
  display: inline-grid;
  align-items: center;
  justify-items: center;
}

.wk-header__hamburger .wk-icon {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-2) var(--ease-default), transform var(--dur-5) var(--ease-default);
}

.wk-header__hamburger .wk-icon svg {
  width: 22px;
  height: 22px;
}

.wk-header__hamburger .wk-icon--menu {
  opacity: 1;
  transform: rotate(0deg);
}

.wk-header__hamburger .wk-icon--close {
  opacity: 0;
  transform: rotate(-90deg);
}

.wk-header__hamburger[aria-expanded="true"] .wk-icon--menu {
  opacity: 0;
  transform: rotate(90deg);
}

.wk-header__hamburger[aria-expanded="true"] .wk-icon--close {
  opacity: 1;
  transform: rotate(0deg);
}

.wk-header__hamburger {
  display: none;
}

/* visible via @media ≤480px */
.wk-header__search-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* SECTION: Header Row 2 (Subscribe / Tagline / Socials+Search) CSS End */

/* SECTION: Header Row 3 (Pillar Nav) CSS Start
   ---------- ROW 3 — WHITE PILLAR NAV ROW ---------- */
.wk-header__nav {
  background: var(--bg-primary);
  width: 100%;
  z-index: 99;
}

.wk-header__nav-inner {
  padding: 0 var(--container-pad);
}

.wk-header__nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 16px 0;
  gap: 24px;
}

.wk-header__nav-list>li {
  position: relative;
}

.wk-header__nav-list>li>a {
  display: inline-block;
  /* padding: var(--space-1) var(--space-12); */
  font-family: var(--heading-h4-font);
  font-size: var(--fs-xl);
  color: var(--text-primary);
  font-weight: 600;
  line-height: 24px;
}

.wk-header__nav-list>li>a:hover,
.wk-header__nav-list>li.current-menu-item>a,
.wk-header__nav-list>li.current-category-ancestor>a {
  color: var(--text-link-hover);
}

/* SECTION: Header Row 3 (Pillar Nav) CSS End */

/* SECTION: Mobile Drawer CSS Start
   ---------- MOBILE DRAWER ---------- */
.wk-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  top: 159px;
}

.wk-mobile-drawer.is-open {
  pointer-events: auto;
}

.wk-mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--prgb-forge), 0.45);
  opacity: 0;
  transition: opacity var(--dur-5) var(--ease-default);
}

.wk-mobile-drawer.is-open .wk-mobile-drawer__backdrop {
  opacity: 1;
}

.wk-pillar-strip__label{
  letter-spacing: 1.2px !important;
}
.wk-mobile-drawer__panel {
  position: absolute;
  top: -30px;
  right: 0;
  width: min(360px, 86vw);
  max-width: 100%;
  height: 100dvh;
  background: var(--bg-primary);
  transform: translateX(100%);
  transition: transform var(--dur-5) var(--ease-default);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-drawer);
}

.wk-mobile-drawer.is-open .wk-mobile-drawer__panel {
  transform: translateX(0);
}

.wk-mobile-drawer__nav {
  padding: 10px;
}

.wk-mobile-drawer__nav ul {
  display: flex;
  flex-direction: column;
}

.wk-mobile-drawer__nav li {
  border-bottom: 1px solid var(--border-subtle);
}

.wk-mobile-drawer__nav li:last-child {
  border-bottom: none;
}

.wk-mobile-drawer__nav a {
  display: block;
  padding: 5px 0;
  font-family: var(--heading-h3-font);
  font-size: 16px;
  /* fallback */
  color: var(--text-primary);
}

.wk-mobile-drawer__nav a:hover {
  color: var(--text-link-hover);
}

.wk-mobile-drawer__foot {
  padding: var(--space-10);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: center;
}

.wk-mobile-drawer__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
}

.wk-mobile-drawer__socials .wk-header__social-link {
  color: var(--icon-primary);
  opacity: var(--opacity-80);
}

.wk-mobile-drawer__socials .wk-header__social-link:hover {
  color: var(--icon-accent);
  opacity: 1;
}


/* SECTION: Mobile Drawer CSS End */


.search-results #primary{
  padding: 80px;
  background-color: #ffffff;
}
.wk-search-results{
  padding: 0px;
}

/* concact form css */
#wpforms-form-120{
  padding: 0 80px 0px 80px;
}
#wpforms-form-120 label{
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 10px !important;
}
#wpforms-form-120  input{
  border: 1px solid #EDEAE4;
}

div.wpforms-container-full button[type=submit]:not(:hover):not(:active){
  background-color: #A0673A !important;
}
div.wpforms-container-full button[type=submit]:hover{
   background-color: #705947 !important;
}
 div.wpforms-container-full button[type=submit]{
     font-family: var(--font-body);
     font-size: 14px;
     line-height: 20px;
     font-weight: 600;
 }
 .wk-contact__form-body select.wpforms-field-large{
  font-size: 14px !important;
  line-height: 20px;
  font-weight: 500;
 }
/* contact form css end  */

/* SECTION: Header Responsive CSS Start
   ========== RESPONSIVE STACK ========== */

/* Tablet Landscape: 769–1024px — full 3-row header (same as desktop, slightly scaled) */
@media (min-width: 769px) and (max-width: 1024px) {
  .wk-header__brand-inner {
    padding: 0 var(--container-pad-tablet-land);
  }

  .wk-header__brand-row--1 {
    padding-top: 14px;
  }

  .wk-header__wordmark {
    font-size: 42px;
  }

  .wk-header__brand-row--2 {
    padding: 0 0 var(--space-5);
    gap: var(--space-8);
  }

  .wk-header__tagline {
    font-size: 18px;
  }

  .wk-header__subscribe {
    padding: 14px 24px;
    font-size: var(--fs-base);
    line-height: 20px;
  }

  .wk-header__socials {
    gap: 14px;
  }

  .wk-header__icon-link {
    padding-left: 0px;
  }

  .wk-header__social-link svg {
    width: 17px;
    height: 17px;
  }

  .wk-header__brand-center {
    align-self: center;
  }

  .wk-header__icon-link svg {
    width: 20px;
    height: 20px;
  }

  .wk-header__brand-right {
    gap: var(--space-7);
  }

  .wk-header__nav-inner {
    padding: 0 var(--container-pad-tablet-land);
  }

  .wk-header__nav-list {
    padding: var(--space-12) 0;
  }

  .wk-header__nav-list>li>a {
    /* padding: var(--space-1) var(--space-9); */
    font-size: var(--fs-lg-2);
    line-height: 24px;
  }
}

/* Tablet Portrait: 481–768px — FULL 3-ROW HEADER (matches tablet screenshot, same layout as desktop) */
@media (max-width: 768px) {
  .wk-header__brand-right{
    align-self: end !important;
  }
  .wk-header__nav{
    display: none;
  }
  .wk-header__brand-inner {
    padding: 0 var(--container-pad-tablet-port);
  }

  .wk-header__brand-row--1 {
    padding-top: 2px;
    padding-bottom: 12px;
  }

  .wk-header__wordmark {
    font-size: 23px;
  }

  .wk-header__brand-row--2 {
    padding: 0 0 12px;
    gap: var(--space-8);
  }

  .wk-header__tagline {
    font-size: 12px;
    line-height: 18px;
  }

  .wk-header__subscribe {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 16px;
  }

  .wk-header__socials {
    gap: 14px;
  }

  .wk-header__social-link svg {
    width: 17px;
    height: 17px;
  }

  .wk-header__icon-link svg {
    width: 20px;
    height: 20px;
  }

  .wk-header__brand-right {
    gap: 6px;
  }

  .wk-header__nav-inner {
    padding: 0 var(--container-pad-tablet-port);
  }

  .wk-header__nav-list {
    padding: var(--space-12) 0;
  }

  .wk-header__nav-list>li>a {
    padding: var(--space-1) var(--space-8);
    font-size: var(--fs-lg);
  }

  .wk-header__hamburger {
    display: grid;
  }

  .wk-header__icon-link {
    padding-left: 0px;
  }

  .wk-header__socials {
    display: none;
  }

  .wk-header__brand-center {
    align-self: center;
  }
.wk-footer__copyright-text{
  font-size: 12px;
  line-height: 18px !important;
  text-align: left;
}

.wk-footer__copyright{
  border: none !important;
}
}

/* Mobile: ≤480px — Row1=centered wordmark; Row2=L=SUBSCRIBE · C=tagline · R=search+hamburger; full nav via hamburger drawer */
/* @media (max-width: 480px) {
  .wk-header__brand-inner {
    padding: 0 var(--container-pad-mobile);
  }

  .wk-header__brand-row--1 {
    padding: var(--space-12) 0 var(--space-7);
  }

  .wk-header__wordmark {
    font-size: var(--fs-8xl);
    letter-spacing: var(--ls-sm-2);
  }

  .wk-header__brand-row--2 {
    grid-template-columns: auto 1fr auto;
    padding: 0 0 var(--space-12);
    gap: var(--space-4);
  }

  .wk-header__brand-left {
    display: block;
  }

  .wk-header__subscribe {
    padding: var(--space-5) var(--space-11);
    letter-spacing: var(--ls-lg-2);
    font-size: var(--fs-xs);
  }

  .wk-header__brand-center {
    display: block;
    justify-self: center;
    min-width: 0;
  }

  .wk-header__tagline {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal-2);
    text-align: center;
  }

  .wk-header__socials {
    display: none;
  }

  .wk-header__brand-right {
    gap: var(--space-4);
  }

  .wk-header__hamburger {
    display: inline-flex;
  }

  .wk-header__nav {
    display: none;
  }
} */

/* Body lock when drawer open */
body.wk-no-scroll {
  overflow: hidden;
  touch-action: none;
}

/* SECTION: Header Responsive CSS End */

/* SECTION: Site Header CSS End */

/* ================================================
   ZONE B — EDITORIAL LEAD (HOMEPAGE HERO)
   Layout: image left (~65%) / text right (~35%).
   Mobile: text block FIRST (stacked above full-width image).
   ================================================ */
.wk-hero {
  /* padding: var(--space-19) 0; */
  background: var(--bg-primary);
  contain: layout style;
  max-width: var(--content-width);
  padding: 40px 80px;
  margin: 0 auto;
}

.wk-hero__grid {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: 36px;
  align-items: center;
}

.wk-hero__image {
  position: relative;
  /* overflow: hidden;
  aspect-ratio: 4 / 3; */
  /* background: var(--border-subtle); */
  /* contain: layout paint; */
  border-radius: 2px;
}

.wk-hero__image a {
  display: block;
  width: 100%;
  height: 100%;
}

.wk-hero__image img {
  width: 100%;
  height: 100%;
  /* max-height: 554px !important; */
  object-fit: cover;
  transition: transform var(--dur-6) var(--ease-out);
}

.wk-hero__image:hover img {
  transform: scale(1.02);
}

.wk-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wk-hero__text .wk-pillar-label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-lg-3);
}

.wk-hero__text h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(var(--fs-7xl), 4.8vw, var(--fs-12xl));
  line-height: var(--lh-tight-3);
  color: var(--text-primary);
  margin: 0 0 var(--space-10);
}

.wk-hero__text h1 a {
  color: inherit;
  text-decoration: none;
  font-size: 48px;
  line-height: 54px;
  font-weight: 600;
  transition: color var(--dur-3) var(--ease-default);
}

.wk-hero__text h1 a:hover {
  color: var(--text-link-hover);
}

.wk-hero__excerpt {
  font-family: var(--font-body);
  font-size: var(--fs-lg-2);
  line-height: 32px;
  color: #3D3D3A;
  /* margin: 0 0 var(--space-14); */
}

.wk-hero__readmore {
  margin-top: 32px;
  min-height: var(--touch-target);
  /* padding: 0 var(--space-1); */
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-3) var(--ease-default);
}

.wk-hero__readmore:hover {
  color: var(--text-link-hover);
}

.wk-hero__readmore svg {
  width: 24px;
  height: 24px;
  transform: rotate(272deg);
  transition: transform var(--dur-4) var(--ease-out), color var(--dur-3) var(--ease-default);
}
.main-parent-wk-section{
  background: #ffffff;
  max-width: (var(--content-width));
}

/* .wk-hero__readmore:hover svg { transform: rotate(-272deg) translate(2px, -2px); } */

@media (min-width: 769px) and (max-width: 1024px) {
  .home #primary {
    padding: 0px;
  }

  .wk-section__head {
    margin-bottom: 40px !important;
  }

  .wk-section {
    padding: 32px !important;
    padding-bottom: 32px !important;
  }

  .wk-hero__excerpt {
    line-height: 32px !important;
  }

  .wk-hero {
    padding: 32px;
  }

  .wk-hero__grid {
    gap: var(--space-13);
  }

  .wk-hero__text {
    order: -1;
  }

  .wk-hero__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .wk-hero {
    padding: 64px 32px 32px 32px;
  }
  .wk-hero__text h1 a{
    font-size: 38px !important;
    line-height: 44px !important;
  }

  .wk-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .wk-hero__text {
    order: -1;
  }

  .wk-hero__text h1 {
    font-size: clamp(var(--fs-7xl), 8vw, var(--fs-10xl));
    margin-bottom: 16px;
  }

  .wk-hero__excerpt {
    font-size: var(--fs-lg);
    margin-bottom: 24px;
    line-height: 32px;
  }
  .wk-hero__readmore{
    margin-top: 0px !important;
  }
  .wk-section {
    padding: 32px 16px !important;
  }
  .wk-section__title{
    font-size: 24px !important;
    line-height: 30px !important;
  }
  .wk-section__head{
    margin-bottom: 16px !important;
  }
  .wk-featured-hero--home .wk-featured-hero__media{
    padding: 12px 12px 16px 12px !important;
    background: #F7F6F4 !important;
  }
  .wk-featured-hero--home .wk-featured-hero__content{
    padding: 0px 12px 12px 12px !important;
  }
  .wk-featured-hero{
    gap: 0px !important;
  }
  .wk-featured-hero__title{
    font-size: 24px !important;
    line-height: 30px !important;
    margin-bottom: 16px !important;
  }
  .wk-featured-hero__excerpt{
    font-size: 14px !important;
    line-height: 22px !important;
    margin-bottom: 28px !important;
  }
  .wk-featured-hero__btn{
    padding: 8px 30px !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }
  .wk-section--latest .wk-latest-list{
    gap: 16px !important;
  }
  .wk-featured-hero__actions{
    gap: 8px !important;
  }
  .wk-home-callout{
    padding: 0 16px 32px 16px !important;
  }
  .wk-home-callout__title{
    font-size: 24px !important;
    line-height: 30px !important;
  }
  .wk-home-callout__text{
    font-size: 14px !important;
    line-height: 22px !important;
  }
  .wk-link-arrow{
    line-height: 20px !important;
  }
  .wk-home-categories{
    padding : 32px 16px 16px 16px !important;
  }
  .wk-home-categories__label{
    font-size: 24px !important;
    line-height: 30px !important;
  }
  .wk-last-row{
    padding: 16px !important;
  }
  .wk-section--pillar .wk-section__head h2{
    font-size: 24px !important;
    line-height: 30px !important;
  }
  .wk-pillar-strip__item{
    padding: 0px !important;
  }
  .wk-pillar-strip__item-title{
    margin-bottom: 6px !important;
  }
  .wk-pillar-strip__item-excerpt{
    font-size: 14px !important;
    line-height: 22px !important;
  }
  .wk-pillar-strip .wk-pillar-strip__card--compact{
    padding: 12px 0px !important;
  }
      .wk-pillar-strip__item{
        grid-template-columns: 1fr 111px !important;
      }
      .wk-pillar-strip__item-media{
            width: 111px !important;
    height: 128px !important;
      }

}

.main-footer-row{
  background-color: #1A1A18;
}
/* ================================================
   ZONE C — LATEST GRID
   ================================================ */
.wk-section {
  padding: 80px;
  max-width: var(--content-width);
  margin: 0 auto;
  background: #ffffff;
}
.wk-last-row {
  background: #F7F6F4;
}
.wk-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-19);
  flex-wrap: wrap;
  gap: var(--space-10);
}

.wk-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  line-height: 36px;
}

.wk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12) var(--space-11);
  contain: layout style;
}

@media (min-width: 481px) and (max-width: 768px) {
  .wk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Post Card */
.wk-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  contain: layout paint;
}

.wk-card__thumb {
  position: relative;
  aspect-ratio: var(--ar-4-3);
  overflow: hidden;
  background: var(--border-subtle);
  contain: layout paint;
}

.wk-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-6) var(--ease-default);
}

.wk-card:hover .wk-card__thumb img {
  transform: scale(1.03);
}

.wk-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.wk-card__price {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  background: var(--action-primary);
  color: var(--action-primary-text);
  padding: var(--space-1) var(--space-7);
  line-height: var(--lh-tight);
}

.wk-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug-2);
  color: var(--text-primary);
}

.wk-card__title a {
  color: inherit;
}

.wk-card__title a:hover {
  color: var(--text-link-hover);
}

.wk-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

/* ================================================
   ZONE F — SITE FOOTER
   ================================================ */
/* SECTION: Site Footer CSS Start */
.wk-search-header{
  margin-bottom: 24px;
}
.wk-footer {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  max-width: var(--content-width);
  margin: 0 auto;
}

.wk-footer__container {
  display: flex;
  max-width: (var(--content-width));
  flex-direction: column;
  gap: var(--space-15);
  margin: 0 auto;
  padding: 80px 80px 40px 80px;
}

.wk-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-21);
  align-items: start;
}

/* Col 1 — Brand (WORTHKEEP + tagline + description) */
.wk-footer__logo {
  font-family: 'Georgia', 'display-hero-font', serif;
  font-size: var(--fs-12xl);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--text-inverse);
  margin: 0 0 var(--space-10);
  display: inline-block;
  line-height: var(--lh-tight);
}

.wk-footer__logo span {
  color: var(--action-primary);
}

.wk-footer__tagline {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 24px;
  line-height: 20px;
  color: #F7F6F4;
}

.wk-footer__description {
  font-size: var(--fs-body);
  line-height: var(--lh-loose-2);
  opacity: var(--opacity-90);
  max-width: 360px;
  margin: 0;
  color: var(--text-inverse);
}

/* Col 2/3 headings: EXPLORE / Company / NEWSLETTER */
.wk-footer__col-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-medium);
  line-height: 26px;
  text-transform: none;
  color: #F7F6F4;
  margin-bottom: 24px;
}

/* .wk-footer__col:nth-child(1) .wk-footer__col-title,
.wk-footer__col:nth-child(2) .wk-footer__col-title {
    text-align: center;
} */

/* .wk-footer__col:nth-child(2),
.wk-footer__col:nth-child(3) {
    text-align: center;
} */

/* Link list (Explore + Company shared) */
.wk-footer__link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wk-footer__link-list li {
  margin: 0;
}

.wk-footer__link-list a {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--text-inverse);
  display: inline-block;
  color: #F7F6F4;
}

.wk-footer__link-list a:hover {
  opacity: 1;
  color: var(--icon-accent);
}

/* Col 4 — Newsletter */
.wk-footer__newsletter-text {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  margin: 0 0 29px;
}

.wk-footer__newsletter-form {
  display: flex;
  gap: 0;
  margin: 0 0 var(--space-14);
}

.wk-footer__newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  background: transparent;
  border: var(--border-1-parchment);
  border-right: 0;
  color: var(--text-inverse);
  outline: 0;
  font-size: var(--fs-md);
  font-family: var(--font-body);
  border-radius: 0;
  transition: border-color var(--dur-3) var(--ease-default), background var(--dur-3) var(--ease-default);
}

.wk-footer__newsletter-input::placeholder {
  color: rgba(var(--prgb-parchment), var(--opacity-65));
  opacity: 1;
}

.wk-footer__newsletter-input:focus {
  border-color: var(--border-focus);
  background: rgba(var(--prgb-parchment), 0.03);
}

.wk-footer__newsletter-btn {
  background: var(--text-inverse);
  color: var(--bg-inverse);
  border: var(--border-width-1) solid var(--text-inverse);
  padding: 16px 24px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  /* letter-spacing: var(--ls-xl-3); */
  text-transform: uppercase;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background var(--dur-3) var(--ease-default), color var(--dur-3) var(--ease-default), border-color var(--dur-3) var(--ease-default);
}

.wk-footer__newsletter-btn:hover {
  background: var(--action-primary);
  color: var(--action-primary-text);
  border-color: var(--action-primary);
}

/* Social icons (shared with header URLs) */
.wk-footer__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  align-items: center;
}

.wk-footer__social-link {
  color: var(--icon-inverse);
  opacity: var(--opacity-92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  transition: color var(--dur-3) var(--ease-default), opacity var(--dur-3) var(--ease-default);
}

.wk-footer__social-link:hover {
  color: var(--icon-accent);
  opacity: 1;
}

.wk-footer__social-link svg {
  width: 20px;
  height: 20px;
}

/* Copyright bar (centered, under the 4 columns) */
.wk-footer__copyright {
  border-top: var(--border-width-1) solid rgba(var(--prgb-parchment), var(--opacity-12));
  padding-top: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.wk-footer__copyright-text {
  font-size: var(--fs-sm);
  margin: 0;
  line-height: var(--lh-relaxed-2);
}

/* ---------- Responsive breakpoints (shared 4-tier stack) ---------- */

/* Tablet Landscape 769-1024: matches tablet Figma
   Row 1: BRAND (full width)
   Row 2: EXPLORE 2-col left | COMPANY right
   Row 3: NEWSLETTER (full width)
*/

@media (min-width: 769px) and (max-width: 1024px) {
  .wk-footer {
    padding: 32px 32px 20px 32px;
  }

  .wk-footer__container {
    gap: var(--space-15);
  }

  .wk-footer__grid {
    grid-template-columns: 1.4fr 1fr;
    grid-template-areas:
      "brand       brand"
      "explore     company"
      "newsletter  newsletter";
    gap: 32px;
  }

  .wk-footer__col--brand {
    grid-area: brand;
  }

  .wk-footer__col--explore {
    grid-area: explore;
  }

  .wk-footer__col--company {
    grid-area: company;
  }

  .wk-footer__col--newsletter {
    grid-area: newsletter;
  }

  .wk-footer__logo {
    font-size: 42px;
    line-height: 48px;
    margin-bottom: 16px;
  }

  .wk-footer__container {
    padding: 0px;
  }

  .wk-footer__tagline {
    font-size: var(--fs-base);
    margin-bottom: 24px;
  }

  .wk-footer__description {
    font-size: 17px;
    line-height: 30px;
    max-width: none;
  }

  .wk-footer__col-title {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 24px;
  }

  .news-second-row .wk-footer__col-title {
    margin-bottom: 9px;
  }

  .wk-footer__link-list {
    gap: 12px !important;
  }

  /* EXPLORE on tablet: 2-column sub-grid (cat pairs side-by-side) */
  .wk-footer__link-list--explore {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-14);
    row-gap: var(--space-9);
  }

  .wk-footer__link-list--explore li {
    margin: 0;
  }

  .wk-footer__link-list--explore a {
    font-size: var(--fs-lg);
  }

  .wk-footer__link-list {
    gap: var(--space-9);
  }

  .wk-footer__link-list a {
    font-size: var(--fs-lg);
  }

  .wk-footer__socials {
    gap: 14px !important;
  }

  .wk-footer__newsletter-input {
    padding: var(--space-9) var(--space-10);
  }

  .wk-footer__newsletter-btn {
    padding: 15px 24px !important;
  }
}

/* Tablet Portrait 481-768: identical layout to tablet landscape but smaller */
@media (max-width: 768px) {
  .wk-footer {
    padding: 32px 16px 20px 16px;

  }


  .wk-footer__container {
    gap: 32px;
  }

  .wk-footer__container {
    padding: 0px;
  }

  .wk-footer__link-list {
    gap: 12px 24px !important;
  }

  .wk-footer__grid {
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
      "brand       brand"
      "explore     company"
      "newsletter  newsletter";
    gap: 32px;
  }

  .wk-footer__col--brand {
    grid-area: brand;
  }

  .wk-footer__col--explore {
    grid-area: explore;
  }

  .wk-footer__col--company {
    grid-area: company;
  }

  .wk-footer__col--newsletter {
    grid-area: newsletter;
  }

  .wk-footer__logo {
    font-size: 42px;
  }

  .wk-footer__tagline {
    font-size: var(--fs-sm-2);
    margin-bottom: var(--space-11);
  }

  .wk-footer__description {
    font-size: 17px;
    line-height: 30px;
    font-weight: 400;
    max-width: none;
  }

  .wk-footer__col-title {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-11);
  }

  /* EXPLORE on tablet: 2-column sub-grid (cat pairs side-by-side) */
  .wk-footer__link-list--explore {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-11);
    row-gap: var(--space-8);
  }

  .wk-footer__link-list--explore li {
    margin: 0;
  }

  .wk-footer__link-list--explore a {
    font-size: var(--fs-base);
  }

  .wk-footer__link-list {
    gap: var(--space-8);
  }

  .wk-footer__link-list a {
    font-size: var(--fs-base);
  }

  .wk-footer__newsletter-text {
    font-size: var(--fs-sm-2);
  }

  .wk-footer__newsletter-input {
    padding: var(--space-6) var(--space-8);
    font-size: var(--fs-sm-2);
  }

  .wk-footer__newsletter-btn {
    padding: var(--space-6) var(--space-12);
    /* letter-spacing: var(--ls-xl-2); */
  }

  .wk-footer__socials {
    gap: var(--space-11);
  }

  .wk-footer__copyright {
    padding: 0 0 0;
  }
}

/* Mobile ≤480: matches mobile Figma
   Row 1: BRAND (full width)
   Row 2: EXPLORE 2-col left | COMPANY right
   Row 3: NEWSLETTER (full width)
   Copyright below (left-aligned per mobile screenshot)
*/
/* @media (max-width: 480px) {
  .wk-footer {
    padding-top: var(--space-19);
    margin-top: var(--space-17);
  }

  .wk-footer__container {
    gap: var(--space-11);
  }

  .wk-footer__grid {
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas:
      "brand       brand"
      "explore     company"
      "newsletter  newsletter";
    gap: var(--space-11) var(--space-10);
  }

  .wk-footer__col--brand {
    grid-area: brand;
  }

  .wk-footer__col--explore {
    grid-area: explore;
  }

  .wk-footer__col--company {
    grid-area: company;
  }

  .wk-footer__col--newsletter {
    grid-area: newsletter;
  }

  .wk-footer__logo {
    font-size: var(--fs-8xl);
  }

  .wk-footer__tagline {
    font-size: var(--fs-sm);
    margin-bottom: var(--space-10);
  }

  .wk-footer__description {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    max-width: none;
  }

  .wk-footer__col-title {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-10);
  }

  /* EXPLORE on mobile: 2-column sub-grid */
/* .wk-footer__link-list--explore {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-9);
    row-gap: var(--space-8);
  }

  .wk-footer__link-list--explore li {
    margin: 0;
  }

  .wk-footer__link-list--explore a {
    font-size: var(--fs-sm);
  }

  .wk-footer__link-list {
    gap: var(--space-8);
  }

  .wk-footer__link-list a {
    font-size: var(--fs-base);
  }

  .wk-footer__newsletter-text {
    font-size: var(--fs-sm);
    margin-bottom: var(--space-10);
  }

  .wk-footer__newsletter-form {
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-bottom: 33px;
  }

  .wk-footer__newsletter-input {
    border-right: 0;
    padding: var(--space-6) var(--space-8);
    font-size: var(--fs-sm);
  }

  .wk-footer__newsletter-btn {
    border: var(--border-width-1) solid var(--text-inverse);
    padding: var(--space-6) var(--space-12);
    letter-spacing: var(--ls-xl-2);
  }

  .wk-footer__socials {
    gap: var(--space-10);
  }

  .wk-footer__social-link svg {
    width: 20px;
    height: 20px;
  }

  .wk-footer__copyright {
    padding: var(--space-11) 0 var(--space-14);
    justify-content: flex-start;
    text-align: left;
  }

  .wk-footer__copyright-text {
    font-size: var(--fs-xs);
  }
} */

/* SECTION: Site Footer CSS End */

/* ---------- HIDE UTILITY ---------- */
.wk-hidden {
  display: none !important;
}

/* ---------- WORDPRESS CORE ---------- */
.alignwide {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.wp-caption,
.gallery-caption {
  font-size: var(--fs-sm-2);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-3) 0;
}

.sticky {}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal !important;
}