/*
 Theme Name:   Converging Currents (Starter)
 Description:  Optimized for GenerateBlocks & GeneratePress
 Author:       Ed Hall
 Template:     generatepress
 Version:      0.2.0
*/

/* =========================================
   0.0 RESET (Modern CSS & WP Core)
   ========================================= */

/* --- 1.1 MODERN CSS RESET --- */

/* 1. Box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
/* This makes the .flow utility the sole source of vertical rhythm */
* {
  margin: 0;
}

/* 3. Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 4. Improve media defaults */
img, picture, video, canvas {
  display: block;
  max-width: 100%;
}

/* If the SVG has a width attribute (like width="20"), ensure it uses it */
svg[width] {
  width: attr(width px); /* Fallback support varies */
  flex-shrink: 0; /* Prevents the carousel from squishing it */
}

/* More reliable fix for GB */
.gb-icon svg {
  display: inline-block;
  width: 1em; /* Scales with the font size set in the GB editor */
  height: 1em;
}

/* 5. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 6. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* --- 1.2 WORDPRESS SPECIFIC OVERRIDES --- */

/* Admin Bar Fixed Header Offset */
.admin-bar .site-header.fixed {
  top: 32px; 
}
@media screen and (max-width: 782px) {
  .admin-bar .site-header.fixed {
    top: 46px; 
  }
}

/* Gutenberg Alignments */
.alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.alignwide {
  max-width: var(--width-l); 
  margin-inline: auto;
}

/* Media Resets */
.wp-block-image,
.wp-block-gallery,
.wp-block-cover {
  margin-block: 0;
  padding: 0;
}
figcaption {
  font-size: var(--step--1);
  line-height: 1.4;
  text-align: center;
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
}

/* =========================================
   1. DESIGN TOKENS (Variables)
   ========================================= */
:root {
  /* --- Colors (OKLCH) --- */
  --primary-50: oklch(90.1% 0.03849 208.75);
  --primary-100: oklch(87.451% 0.04793 209.59);
  --primary-200: oklch(82.752% 0.06651 209.34);
  --primary-300: oklch(77.934% 0.08246 209.62);
  --primary-400: oklch(73.249% 0.09634 210.12);
  --primary-500: oklch(68.067% 0.10121 211.2);
  --primary-600: oklch(58.425% 0.08613 211.69);
  --primary-700: oklch(48.632% 0.07054 211);
  --primary-800: oklch(38.074% 0.05308 212.05);
  --primary-900: oklch(26.998% 0.03476 210.86);
  --primary-950: oklch(20.828% 0.02448 209.53);

  --accent-50: oklch(83.914% 0.06733 15.146);
  --accent-100: oklch(80.118% 0.08528 16.391);
  --accent-200: oklch(72.809% 0.12504 18.128);
  --accent-300: oklch(66.108% 0.16327 20.39);
  --accent-400: oklch(60.547% 0.19643 23.395);
  --accent-500: oklch(55.741% 0.20759 25.798);
  --accent-600: oklch(47.949% 0.17702 25.519);
  --accent-700: oklch(39.711% 0.14329 25.255);
  --accent-800: oklch(31.179% 0.10899 24.545);
  --accent-900: oklch(22.225% 0.06989 22.501);
  --accent-950: oklch(17.09% 0.04976 18.818);

  --surface-0: oklch(100% 0 0);
  --surface-50: oklch(96.011% 0.00169 145.56);
  --surface-100: oklch(92.995% 0.00171 145.56);
  --surface-200: oklch(86.809% 0.00257 165.07);
  --surface-300: oklch(80.512% 0.00361 174.46);
  --surface-400: oklch(74.06% 0.00533 164.95);
  --surface-500: oklch(67.496% 0.00646 170.35);
  --surface-600: oklch(58.143% 0.0067 170.29);
  --surface-700: oklch(48.396% 0.00701 170.2);
  --surface-800: oklch(37.969% 0.00434 174.25);
  --surface-900: oklch(26.617% 0.00344 164.8);
  --surface-950: oklch(20.752% 0.00248 145.49);
  --surface-1000: oklch(0% 0 0);

  /* --- Semantic Mappings (Use these in GB Global Styles) --- */
  --color-text: var(--surface-950);
  --color-text-muted: var(--surface-600);
  --color-bg-body: var(--surface-50);
  --color-bg-card: var(--surface-0);
  --color-primary: var(--primary-500);
  --color-primary-hover: var(--primary-600);
  --color-accent: var(--accent-500);
  --color-accent-hover: var(--accent-600);

  /* --- Typography (Utopia) --- */
  --font-body: var(--gp-font-body, system-ui, sans-serif); 
  --font-heading: var(--gp-font-headings, system-ui, sans-serif);

  --step--2: clamp(0.56rem, 0.86rem + -0.32vw, 0.79rem);
  --step--1: clamp(0.75rem, 0.93rem + -0.20vw, 0.89rem);
  --step-0: clamp(1.00rem, 1.00rem + 0.00vw, 1.00rem);
  --step-d: clamp(1.06rem, 1.03rem + 0.15vw, 1.17rem); /* Default P */
  --step-1: clamp(1.13rem, 1.07rem + 0.30vw, 1.33rem);
  --step-2: clamp(1.27rem, 1.12rem + 0.73vw, 1.78rem);
  --step-3: clamp(1.42rem, 1.15rem + 1.35vw, 2.37rem);
  --step-4: clamp(1.60rem, 1.16rem + 2.22vw, 3.16rem);
  --step-5: clamp(1.80rem, 1.11rem + 3.44vw, 4.21rem);
  --step-6: clamp(2.03rem, 1.00rem + 5.12vw, 5.61rem);
  --step-7: clamp(2.28rem, 0.80rem + 7.43vw, 7.48rem);

  /* --- Spacing (Utopia) --- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.48rem + 0.09vw, 0.56rem);
  --space-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.88rem);
  --space-s: clamp(1.00rem, 0.96rem + 0.18vw, 1.13rem);
  --space-m: clamp(1.50rem, 1.45rem + 0.27vw, 1.69rem);
  --space-l: clamp(2.00rem, 1.93rem + 0.36vw, 2.25rem);
  --space-xl: clamp(3.00rem, 2.89rem + 0.54vw, 3.38rem);
  --space-2xl: clamp(4.00rem, 3.86rem + 0.71vw, 4.50rem);
  --space-3xl: clamp(6.00rem, 5.79rem + 1.07vw, 6.75rem);
  --space-4xl: clamp(8.00rem, 7.71rem + 1.43vw, 9.00rem);
  /* --- Extended Spacing (Utopia) --- */
--space-5xl: clamp(12.00rem, 11.57rem + 2.14vw, 13.50rem);
--space-6xl: clamp(16.00rem, 15.43rem + 2.86vw, 18.00rem);
  
  /* Pairs for Section Padding */
  /* Standard: S (1rem) to L (2.25rem) */
  --space-s-l: clamp(1.00rem, 0.71rem + 1.43vw, 2.25rem);
  /* Strong: S (1rem) to XL (3.38rem) */
  --space-s-l-strong: clamp(1.00rem, 0.46rem + 2.72vw, 3.38rem);
  /* Standard: L (2rem) to 3XL (6.75rem) */
  --space-l-3xl: clamp(2.00rem, 0.91rem + 5.43vw, 6.75rem);
  /* Strong: L (2rem) to 4XL (9.00rem) */
  --space-l-3xl-strong: clamp(2.00rem, 0.40rem + 8.00vw, 9.00rem);
  /* --- Corrected 2xl-5xl Pair --- */
  --space-2xl-5xl: clamp(4.00rem, 2.36rem + 8.21vw, 13.50rem);
  --space-2xl-5xl-strong: clamp(4.00rem, 1.93rem + 10.36vw, 16.00rem);
  --space-4xl-6xl: clamp(8.00rem, 6.29rem + 8.57vw, 18.00rem);
  /* --- 4xl-6xl Strong (Header-Safe) --- */
  /* Increased mobile floor to prevent header overlap */
  --space-4xl-6xl-strong: clamp(10.00rem, 8.28rem + 8.57vw, 20.25rem);

  /* --- Layout Widths --- */
  --width-full: 100%;
  --width-xl: 1440px; 
  --width-l: 1280px;
  --width-m: 1024px;
  --width-s: 720px;
  --width-xs: 60ch;

  /* --- Component: Service Icons (Revised) --- */
  /* Min: 4.00rem (64px) | Max: 6.00rem (96px) */
  --step-icon: clamp(4.00rem, 3.31rem + 3.43vw, 6.00rem);
}

/* =========================================
   2. GLOBAL RESETS & TYPOGRAPHY
   ========================================= */

body {
  background-color: var(--color-bg-body);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.looks-h1, .looks-h2, .looks-h3, .looks-h4 {
  font-family: var(--font-heading);
  line-height: 1.1;
  text-wrap: balance; 
  margin-block-end: var(--space-s);
  color: var(--color-text);
}

p {
  font-size: var(--step-d);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: var(--step-2);
  text-wrap: pretty; /* Prevents single-word orphans */
}

/* --- EMPTY PARAGRAPH KILLER --- */
/* Standard check for truly empty P tags */
p:empty {
  display: none;
}
/* Aggressive check for P tags containing only BRs or spaces (modern browsers) */
p:has(> br:only-child) {
  display: none;
}

/* --- External Links --- */
a[target="_blank"]:not(.gb-button)::after {
    content: "";
    display: inline-flex;
    width: 1em;
    height: 1em;
    margin-inline-start: 0.2em;
    margin-block-end: 0.2em;
    /* Updated to your thicker SVG */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,104a12,12,0,0,1-24,0V69l-59.51,59.51a12,12,0,0,1-17-17L187,52H152a12,12,0,0,1,0-24h64a12,12,0,0,1,12,12Zm-44,24a12,12,0,0,0-12,12v64H52V84h64a12,12,0,0,0,0-24H48A20,20,0,0,0,28,80V208a20,20,0,0,0,20,20H176a20,20,0,0,0,20-20V140A12,12,0,0,0,184,128Z'%3E%3C/path%3E%3C/svg%3E");
    
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: currentColor;
    vertical-align: middle;
}

/* =========================================
   3. LAYOUT PRIMITIVES (Structure)
   ========================================= */

/* --- Wrappers (Max Widths) --- */
/* Apply to GB Inner Containers */
.wrapper-xl { max-width: var(--width-xl); margin-inline: auto; width: 100%; }
.wrapper-l  { max-width: var(--width-l); margin-inline: auto; width: 100%; }
.wrapper-m  { max-width: var(--width-m); margin-inline: auto; width: 100%; }
.wrapper-s  { max-width: var(--width-s); margin-inline: auto; width: 100%; }
.wrapper-xs { max-width: var(--width-xs); margin-inline: auto; width: 100%; }

/* --- Section Padding (Vertical) --- */
/* Apply to GB Outer Containers */
.section-s { padding-block: var(--space-s-l); }
.section-m { padding-block: var(--space-l-3xl); }
.section-l { padding-block: var(--space-2xl-5xl); }
.section-l-bottom { padding-block: var(--space-2xl-5xl) var(--space-2xl-5xl-strong); }
.section-no-bot { padding-bottom: 0 !important; }

/* --- Horizontal Padding --- */
/* Prevents content hitting mobile edges */
.pad-inline { padding-inline: var(--space-s-l); }

/* --- The Flow (Owl) --- */
/* Apply to Container blocks to manage vertical rhythm automatically */
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}
.flow-s { --flow-space: var(--space-s); }
.flow-m { --flow-space: var(--space-m); }
.flow-l { --flow-space: var(--space-l); }

/* --- The Cluster --- */
/* Apply to Containers to align items horizontally (tags, buttons, meta) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-s));
  align-items: center;
}
.cluster-xs { --cluster-gap: var(--space-xs); }
.cluster-m  { --cluster-gap: var(--space-m); }

/* --- Auto Grid --- */
/* Creates responsive grid without media queries */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col-width, 300px), 100%), 1fr));
  gap: var(--grid-gap, var(--space-m));
}
.grid-gap-s { --grid-gap: var(--space-s); }
.grid-gap-l { --grid-gap: var(--space-l); }

/* =========================================
   4. COMPONENT UTILITIES
   ========================================= */

/* --- Buttons --- */
/* Apply to GB Button Wrapper or individual button links */
.btn {
  display: inline-flex;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.75em 1.5em;
  border-radius: 4px; 
  transition: all 0.2s ease;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--surface-0);
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--surface-0);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--surface-0);
}

/* --- Cards --- */
.surface-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--surface-200);
  border-radius: var(--space-2xs);
  padding: var(--space-m);
}

/* --- Aspect Ratios --- */
/* Apply to Images or Containers wrapping images */
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-video  { aspect-ratio: 16 / 9; }
.ratio-portrait { aspect-ratio: 3 / 4; }
.ratio-landscape { aspect-ratio: 4 / 3; }

[class*="ratio-"] {
  width: 100%;
  object-fit: cover;
}
/* Ensure inner images conform */
[class*="ratio-"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Text Utilities --- */
.text-upper { text-transform: uppercase; letter-spacing: 0.05em; }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }

/* --- Line Clamping (Truncation) --- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
	display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Helper Utilities --- */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}