/*
Theme Name: GeneratePress Inkbot Design
Theme URI: https://inkbotdesign.com
Description: A highly optimized, SEO-focused child theme for Inkbot Design. Features local font hosting and 2026 fluid typography.
Author: Inkbot Design
Author URI: https://inkbotdesign.com
Template: generatepress
Version: 2026.3.3
*/

/* =============================================================================
   0. LOCAL FONTS (Inter Variable Optimization)
   ============================================================================= */

/* Inter Variable (Roman)
 * Path: /wp-content/uploads/generatepress/fonts/inter-variable/InterVariable.woff2
 * font-display: optional — eliminates FOUT for locally hosted fonts.
 * swap would cause a visible flash; optional renders fallback once and never swaps.
 */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('../woff2/intervariable.woff2') format('woff2');
}

/* Inter Variable (Italic) */
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-weight: 100 900;
  font-display: optional;
  src: url('../woff2/intervariable-italic.woff2') format('woff2');
}

/* Metric Compatible Fallback
 * Adjusted Arial fallback to match Inter's metrics and prevent layout shift.
 * size-adjust corrected to 105.21% — 107.40% rendered fallback slightly too large,
 * causing a visible reflow on font swap even with fast local loading.
 */
@font-face {
  font-family: "Inter-Fallback";
  src: local("Arial");
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 105.21%;
}

/* =============================================================================
   1. GLOBAL VARIABLES (FULL INKBOT 2026 PALETTE)
   ============================================================================= */
:root {
  /* --- COLOR PALETTE --- */
  --accent: #0055FF; 
  --contrast: #0A0A0A; 
  --contrast-2: #334155; 
  --base-3: #F8F9FA; 
  --id-grey-mid: #536072; 
  --id-accent-gold: #D4A017; 

  /* --- CITATION BOX VARIABLES --- */
  --citation-bg-hover: #f9f9f9;
  --citation-border: #e2e2e2;
  --citation-text: #333;
  --citation-spacing: 2rem;

  /* --- UTILITY VARIABLES --- */
  --border-radius: 0.5rem;
  --caption-color: #6b7280;
  --caption-color-hover: #4b5563;
  --caption-font-size: 16px;
  --caption-font-size-mobile: 14px;
  --caption-spacing: 12px;
  --caption-spacing-mobile: 10px;
  --btn-glow-color: rgba(0, 85, 255, 0.5); 
  --btn-shadow-color: rgba(0, 0, 0, 0.1);

  /* --- FLUID TYPOGRAPHY VARIABLES --- */
  --fs-h1: clamp(2.5rem, 8vw + 1rem, 5rem); 
  --ls-h1: -0.04em; 
  --lh-h1: 1.05;    

  --fs-h2: clamp(2rem, 5vw + 1rem, 3.5rem);
  --ls-h2: -0.03em;
  --lh-h2: 1.1;

  --fs-h3: clamp(1.5rem, 3vw + 1rem, 2.2rem);
  --ls-h3: -0.02em;
  --lh-h3: 1.2;

  --fs-body: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --lh-body: 1.6;
  --mb-body: 1.6em;

  /* --- SPACING VARIABLES --- */
  /* Note: --section-padding-v and --section-padding-h available for use in blocks */
  --section-padding-v: clamp(4rem, 10vh, 10rem);
  --section-padding-h: 8vw;
}

/* =============================================================================
   1A. GLOBAL & P3 COLOR SYSTEM (2026 STANDARDS)
   ============================================================================= */
@media (color-gamut: p3) {
    :root {
        --accent: color(display-p3 0.05 0.35 1);
        --id-accent-gold: color(display-p3 0.85 0.65 0.15);
    }
}

/* Fix mobile wrapping */
h1, h2, h3 { text-wrap: balance; }

/* =============================================================================
   2. CORE SETUP & TYPOGRAPHY
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html {
  scrollbar-color: var(--id-grey-mid) var(--base-3);
  scrollbar-width: thin;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: 'Inter Variable', "Inter-Fallback", sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--contrast-2);
  background-color: var(--base-3);
  /* text-rendering: optimizeLegibility removed — Inter Variable has excellent
     built-in kerning, making this redundant. It causes measurable paint overhead
     on mobile by triggering full ligature/kerning calculations on every text node. */
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: common-ligatures;
  font-optical-sizing: auto;
  position: relative;
}

/* =============================================================================
   2C. BACKGROUND
   Background colour is set via --base-3 on body above.
   Blueprint grid (body::before) and atmosphere pulse (body::after) removed —
   background is now a clean flat colour with no pseudo-element overhead.
   ============================================================================= */

::selection {
  background-color: var(--accent);
  color: #ffffff;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--base-3); }
::-webkit-scrollbar-thumb {
  background-color: var(--id-grey-mid);
  border-radius: 6px;
  border: 3px solid var(--base-3);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }

p {
  margin-bottom: var(--mb-body);
  orphans: 3; 
  widows: 3;
  /* 2026 Addition: Prevents unbalanced lines in long text blocks */
  text-wrap: pretty; 
}

h1, h2, h3 {
  font-weight: 700;
  color: var(--contrast);
  margin-bottom: 0.75em;
  page-break-after: avoid; 
}

h1 {
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-h1);
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-h2);
}

h3 {
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-h3);
  color: var(--contrast-2); 
}

/* Standard In-Text Links */
p a, .wp-block-list a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

p a:hover, .wp-block-list a:hover {
  text-decoration-color: var(--id-accent-gold);
}

/* Dark Mode Fixes */
:where(.has-black-background-color, .has-contrast-background-color) p a { color: #ffffff; }
:where(.has-black-background-color, .has-contrast-background-color) p a:hover {
    color: #ffffff; 
    text-decoration-color: var(--id-accent-gold); 
}

/* =============================================================================
   2A. GLOBAL INTERACTIVE REFINEMENTS
   ============================================================================= */

/* Soft Page Load Animation */
@media (prefers-reduced-motion: no-preference) {
  #main {
    animation: inkbotFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
}

@keyframes inkbotFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tactile Blog Feed Cards */
.inside-article, .wp-block-post {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .inside-article:hover, .wp-block-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .inside-article:hover, .wp-block-post:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    /* Transform disabled, shadow effect remains */
  }
}

/* =============================================================================
   3. IMAGES & CAPTIONS
   ============================================================================= */

.wp-block-image img,
.wp-block-gallery .wp-block-image img,
.wp-block-media-text .wp-block-image img {
  border-radius: var(--border-radius);
}

figure img:not(:where(.wp-block-image:has(figcaption) img)) {
  margin-bottom: 1.5em;
}

:is(.single-post, .blog, .archive) .wp-block-image:has(figcaption) {
  margin-bottom: 0;
}

:is(.single-post, .blog, .archive) .wp-block-image figcaption {
  font-size: var(--caption-font-size);
  line-height: 1.4;
  color: var(--caption-color);
  text-align: center;
  font-style: italic;
  font-weight: 400;
  margin-block-start: var(--caption-spacing);
  margin-block-end: 24px;
  margin-inline: auto;
  padding-inline: 20px;
  max-width: 100%;
  transition: color 0.2s ease;
}

:is(.single-post, .blog, .archive) .wp-block-image figcaption strong { font-weight: 500; }
:is(.single-post, .blog, .archive) .wp-block-image:hover figcaption { color: var(--caption-color-hover); }

/* Mobile caption adjustments */
@media (max-width: 768px) {
  :is(.single-post, .blog, .archive) .wp-block-image figcaption {
    font-size: var(--caption-font-size-mobile);
    margin-block-start: var(--caption-spacing-mobile);
    padding-inline: 16px;
  }
}

/* Gallery Captions */
:is(.single-post, .blog, .archive) :where(.wp-block-gallery .blocks-gallery-item figcaption, .wp-block-gallery .wp-block-image figcaption) {
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
  color: #fff;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 500;
  text-align: center;
  padding: var(--caption-spacing) 16px 16px;
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* Chrome Lazy Load Fix */
img:is([sizes="auto" i]) { contain-intrinsic-size: unset !important; }

/* =============================================================================
   4. BUTTONS & QUOTES & SEPARATORS
   ============================================================================= */

/* Primary Nav Button (Updated Spacing) */
.main-navigation .main-nav > ul > li.nav-button-primary a {
  border: 2px solid var(--accent);
  border-radius: 0.5rem;
  margin-inline: 10px;
  
  /* OPTIMIZED: Uses em so button grows if user scales text size */
  padding: 0.375em 1em; 
  
  background-color: var(--accent);
  color: var(--base-3); 
  display: inline-block;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  font-weight: 600;
  box-shadow: 0 2px 8px var(--btn-shadow-color);
}

.main-navigation .main-nav > ul > li.nav-button-primary a:hover {
  background-color: #0044CC;
  box-shadow: 0 6px 20px var(--btn-glow-color); 
}

@media (prefers-reduced-motion: no-preference) {
  .main-navigation .main-nav > ul > li.nav-button-primary a:hover {
    transform: translateY(-2px);
  }
  
  .main-navigation .main-nav > ul > li.nav-button-primary a:active {
    transform: translateY(0px);
  }
}

.main-navigation .main-nav > ul > li.nav-button-primary a:active {
  box-shadow: 0 3px 10px var(--btn-shadow-color);
}

/* Separator Block */
.wp-block-separator {
    border-top: 2px solid var(--contrast-2);
    max-width: 8em;
    margin: 3rem auto;
    opacity: 0.15;
}

/* =============================================================================
   5. RESPONSIVE & MOBILE (CLEANED UP)
   ============================================================================= */

@media (max-width: 768px) {
  /* Position fix for Mobile CTA Button */
  .nav-button-primary {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-top: 15px;
      margin-bottom: 25px; 
      padding: 0;
  }

  /* BUTTON: The "Modern App" Look */
  .nav-button-primary a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    margin-inline: 0 !important;
    width: auto;
    min-width: 240px; 
    padding: 0.75em 1.5em; 
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 85, 255, 0.2); 
  }

  :is(.single-post, .blog, .archive) :where(.wp-block-gallery .blocks-gallery-item figcaption, .wp-block-gallery .wp-block-image figcaption) {
    font-size: 12px;
    padding: var(--caption-spacing-mobile) 12px 12px;
  }
}

@media print {
  .nav-button-primary a {
    background: none !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
  }
  .wp-block-table table {
      border: 1px solid #000;
      box-shadow: none;
  }
}

/* =============================================================================
   6. ACCESSIBILITY & PERFORMANCE
   ============================================================================= */

/* Reduced Motion - Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus States */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 2px;
}

.screen-reader-text:focus {
    background-color: var(--base-3);
    color: var(--accent);
    box-shadow: 0 0 0 4px var(--contrast);
    z-index: 99999; 
    border-radius: var(--border-radius);
    font-weight: 700;
    top: 20px;
    left: 20px;
    padding: 15px 20px;
}

/* =============================================================================
   7. NEW PERFORMANCE UTILITIES (2026)
   ============================================================================= */

/* Lazy Render Helper (Apply to Footer Containers) */
.inkbot-lazy-render {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1000px; /* Estimates height to prevent scrollbar jumping */
}

/* =============================================================================
   8. GUTENBERG BLOCK "CARD" STYLING (MATCHING FAQ/TOC)
   ============================================================================= */

/* --- 1. CODE BLOCKS --- */
.wp-block-code {
    background-color: var(--contrast) !important;
    color: #f8fafc;
    border-radius: var(--border-radius);
    padding: 25px 30px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--contrast);
    font-size: 0.9em;
    position: relative;
    margin-bottom: 2rem;
    overflow-x: auto; 
}

.wp-block-code::before {
    content: "Code Snippet";
    display: block;
    font-family: 'Inter Variable', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 10px;
    border-bottom: 1px solid #334155;
    padding-bottom: 10px;
}

/* --- 2. QUOTE BLOCKS --- */
blockquote, .wp-block-quote {
    background-color: #fff;
    border: 1px solid #e2e8f0; 
    border-radius: var(--border-radius);
    padding: 30px 40px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    border-left: 1px solid #e2e8f0 !important; 
    border-inline-start: 1px solid #e2e8f0 !important;
    position: relative;
}

blockquote::before, 
.wp-block-quote::before {
    content: "\201C";
    font-family: serif;
    font-size: 6rem;
    line-height: 0;
    position: absolute;
    top: 40px;
    left: 20px;
    color: rgba(0, 85, 255, 0.1); 
    background: none; 
    height: auto;
    width: auto;
}

blockquote p {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--contrast-2);
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
}

blockquote cite {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--contrast);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- 3. TABLE BLOCKS --- */
.wp-block-table {
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    border-spacing: 0; 
    overflow: hidden;  
    margin-bottom: 2rem;
}

.wp-block-table table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;         
    margin: 0 !important;
    border: none !important;
}

.wp-block-table thead th {
    background-color: #f8fafc;
    color: var(--contrast);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    /* REMOVED: white-space: nowrap; - allows wrapping on narrow screens */
}

.wp-block-table tbody td {
    padding: 16px 24px;
    color: var(--contrast-2);
    border-bottom: 1px solid #f1f5f9; 
    border-left: none !important;
    border-right: none !important;
    font-size: 1rem;
    line-height: 1.5;
    vertical-align: middle;
}

.wp-block-table tbody tr:last-child td {
    border-bottom: none !important;
}

.wp-block-table tbody tr:nth-child(even) { 
    background-color: #fcfcfc; 
}

/* Hover effect with motion preference handling */
@media (prefers-reduced-motion: no-preference) {
    .wp-block-table tbody tr:hover td {
        background-color: #F1F5F9;
        color: var(--contrast);
        transition: background-color 0.2s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-table tbody tr:hover td {
        background-color: #F1F5F9;
        color: var(--contrast);
    }
}

/* Mobile table adjustments */
@media (max-width: 768px) {
    .wp-block-table {
        border-radius: 6px; 
        overflow-x: auto;   
    }
    
    .wp-block-table table { 
        min-width: 500px; 
    }
    
    .wp-block-table thead th, 
    .wp-block-table tbody td {
        padding: 12px 16px; 
        font-size: 0.9rem;  
    }
}

/* =============================================================================
   9. INKBOT 2026: LUMINOUS BLUE SUMMARY BOX
   ============================================================================= */
div.wpsummary_box.design-formal {
    background-color: var(--base-3) !important;
    border: 1px solid var(--accent) !important; 
    border-radius: var(--border-radius) !important;
    padding: 30px !important;
    margin: 4rem auto !important;
    position: relative !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; 
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

div.wpsummary_box.design-formal:hover {
    transform: translateY(-4px) !important;
    box-shadow: 
        0 10px 30px rgba(0, 85, 255, 0.15), 
        0 0 15px rgba(0, 85, 255, 0.25) !important;
    border-color: #5599ff !important; 
}

/* =============================================================================
   10. INKBOT SOURCE CITATION BOX
   ============================================================================= */
.source-citation-box {
    display: flex;
    align-items: center;
    margin: var(--citation-spacing) 0; 
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--citation-border);
    border-radius: 8px;
    background-color: transparent;
    gap: 12px; 
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease;
}

.source-citation-box:hover,
.source-citation-box:focus-within {
    background-color: var(--citation-bg-hover);
    border-color: #ccc;
}

.source-icon {
    display: flex;
    color: var(--citation-text);
    flex-shrink: 0; 
}

.source-link {
    text-decoration: none;
    color: var(--citation-text);
    font-size: 0.95rem;
    line-height: 1.4;
}

.source-link:focus {
    outline: 2px solid #007cba; 
    outline-offset: 4px;
}

.source-link strong { font-weight: 700; }

/* =============================================================================
   11. LAYOUT UTILITIES: IMAGE BREAKOUT
   ============================================================================= */
/* Expands images based on text width for a magazine-style look.
   Only applies to desktop (>820px) to prevent mobile horizontal scroll.
*/
@media (min-width: 820px) { 
    
    /* 1. Target the image container inside your post */
    .single-post .dynamic-entry-content .wp-block-image {
        width: 125% !important; 
        margin-left: -12.5% !important;
        margin-right: -12.5% !important;
        max-width: none !important;
        display: block;
        margin-top: 3.5rem !important;
        margin-bottom: 3.5rem !important;
    }

    /* 2. Force the image to fill that new 125% space */
    .single-post .dynamic-entry-content .wp-block-image img {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
    }

    /* 3. CRITICAL: Allow the image to spill out of the text column */
    .dynamic-entry-content, 
    .entry-content,
    .gb-container {
        overflow: visible !important;
    }
}

/* =============================================================================
   12. MOBILE OVERFLOW PREVENTION (2026)
   ============================================================================= */

/* Prevent horizontal overflow on mobile devices */
@media (max-width: 768px) {
    .gb-grid-wrapper,
    .alignfull,
    .gb-container {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Allow flex containers to wrap properly on mobile */
    .is-nowrap {
        flex-wrap: wrap !important;
    }
    
    /* Ensure images don't exceed viewport width */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}