/**
 * Concatena Blocks CSS — Twenty Twenty-Five Child Theme
 * "Law, done differently." | Clear. Curious. Connected.
 *
 * Installation:
 *   a) Appearance → Site Editor → Styles → Additional CSS (paste contents)
 *   b) Enqueue via functions.php (recommended — see accompanying file)
 */

/* ============================================================
   DYNAMIC ASSET URLS
   functions.php overrides these with correct absolute paths.
   Static fallbacks assume standard install at /wp-content/themes/concatena-child/
   ============================================================ */
:root {
  --cnct-shape-blue:   url('./shape-blue.png');
  --cnct-shape-orange: url('./shape-orange.png');
  --cnct-shape-purple: url('./shape-purple.png');
  --cnct-shape-pink:   url('./shape-pink.png');
  --cnct-shape-mesh:   url('./shape-mesh.png');
  --cnct-bg-bright:    url('./bg-bright.jpeg');
  --cnct-bg-muted:     url('./bg-muted.png');
}

/* ============================================================
   BLOB IMAGE MASKS
   Add className to a wp:group wrapping a wp:image block.
   Four variants: blue (1), orange (2), purple (3), pink (4)

   Example block usage:
     <!-- wp:group {"className":"cnct-blob-mask-1"} -->
       <!-- wp:image {"sizeSlug":"large"} -->
         <figure class="wp-block-image size-large">
           <img src="..." alt="..." />
         </figure>
       <!-- /wp:image -->
     <!-- /wp:group -->
   ============================================================ */
.cnct-blob-mask-1 img,
.cnct-blob-mask-1 figure img { mask-image: var(--cnct-shape-blue); -webkit-mask-image: var(--cnct-shape-blue); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; display: block; width: 100%; }

.cnct-blob-mask-2 img,
.cnct-blob-mask-2 figure img { mask-image: var(--cnct-shape-orange); -webkit-mask-image: var(--cnct-shape-orange); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; display: block; width: 100%; }

.cnct-blob-mask-3 img,
.cnct-blob-mask-3 figure img { mask-image: var(--cnct-shape-purple); -webkit-mask-image: var(--cnct-shape-purple); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; display: block; width: 100%; }

.cnct-blob-mask-4 img,
.cnct-blob-mask-4 figure img { mask-image: var(--cnct-shape-pink); -webkit-mask-image: var(--cnct-shape-pink); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; display: block; width: 100%; }

/* ============================================================
   BLOB MESH BACKGROUND
   Apply to the COLUMN block that contains the blob-masked image
   (not the inner Group). The mesh renders as the column background,
   visible around the edges of the portrait.
   Example: add cnct-blob-mesh-bg to the wp:column block.
   ============================================================ */
.cnct-blob-mesh-bg {
  background-image: var(--cnct-shape-mesh) !important;
  background-size: 88% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ============================================================
   HERO SECTIONS
   Add className to a wp:group (align: full) block.

   Variants:
     .cnct-hero--bright   bg-bright.jpeg with dark overlay
     .cnct-hero--grad     Dark magenta gradient (no image)
     .cnct-hero--surface  Light pink surface tint
   ============================================================ */
.cnct-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--wp--preset--spacing--20, 5rem);
}

.cnct-hero--bright {
  background-image: var(--cnct-bg-bright);
  background-size: cover;
  background-position: center;
}

.cnct-hero--bright::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(61,0,37,0.40) 40%, rgba(61,0,37,0.05) 100%);
  z-index: 0;
}

.cnct-hero--bright > * {
  position: relative;
  z-index: 1;
}
.cnct-hero--bright h1,
.cnct-hero--bright h2,
.cnct-hero--bright p,
.cnct-hero--grad h1,
.cnct-hero--grad h2,
.cnct-hero--grad p {
  color: white;
}

.cnct-hero--grad {
  background: linear-gradient(135deg, #6f005d 0%, #420055 50%, #1c0048 100%);
}

.cnct-hero--surface {
  background-color: var(--wp--preset--color--surface-container-low, #fff0f4);
}
.cnct-hero--surface h1,
.cnct-hero--surface h2 {
  color: var(--wp--preset--color--primary, #6f005d);
}

/* ============================================================
   SECTION UTILITIES
   ============================================================ */
.cnct-section {
  padding-block: var(--wp--preset--spacing--20, 5rem);
}
.cnct-section--alt {
  background-color: var(--wp--preset--color--surface-container-low, #fff0f4);
}
.cnct-section--dark {
  background-color: #3d0025;
}
.cnct-section--dark h1,
.cnct-section--dark h2,
.cnct-section--dark h3,
.cnct-section--dark p { color: white; }

.cnct-section-label,
p.cnct-section-label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--wp--preset--color--on-surface-muted, #8a7080) !important;
  margin-block-end: 0.5rem !important;
}

/* ============================================================
   CSS GRID — CARD LAYOUTS
   Add className to a wp:group block containing child cards.
   The block editor's native grid layout is an alternative,
   but these classes give precise Concatena-spec column counts.
   ============================================================ */
.cnct-cards-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.cnct-cards-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.cnct-cards-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cnct-cards-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

/* Core's "is-layout-constrained" global styles add margin-block to every
   child except the first, which throws off row heights in a grid (the
   first card ends up taller than the rest). The grid's own `gap` already
   handles spacing, so strip these inherited margins. */
.cnct-cards-grid > *,
.cnct-cards-grid-4 > *,
.cnct-cards-grid-3 > *,
.cnct-cards-grid-2 > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

@media (max-width: 1024px) {
  .cnct-cards-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cnct-cards-grid-4,
  .cnct-cards-grid-3,
  .cnct-cards-grid-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   FLOATING CARDS
   Add className to wp:group blocks acting as cards.
   ============================================================ */
.cnct-card {
  background: var(--wp--preset--color--surface-container, #ffe8ef);
  border-radius: 2rem;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(61, 0, 37, 0.05);
  transition: transform 250ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 250ms cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
}
.cnct-card:hover,
a.cnct-card:hover  { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(61,0,37,0.10); }
.cnct-card--elevated { background: var(--wp--preset--color--surface-container-highest, #ffd8e7); }
.cnct-card--surface  { background: var(--wp--preset--color--surface-container-low, #fff0f4); }
a.cnct-card { text-decoration: none; color: inherit; display: block; }

/* ============================================================
   PILLBOX TAGS
   Add className to a wp:paragraph block.
   ============================================================ */
.cnct-tag,
p.cnct-tag {
  display: inline-flex;
  align-items: center;
  background: var(--wp--preset--color--surface-container-highest, #ffd8e7);
  color: var(--wp--preset--color--primary, #6f005d);
  border-radius: 9999px;
  padding: 0.2em 0.9em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  margin-block-end: 0.75rem;
}
.cnct-tag--cyan,   p.cnct-tag--cyan   { background: rgba(0,197,240,0.14);   color: #006b80; }
.cnct-tag--yellow, p.cnct-tag--yellow { background: rgba(255,179,0,0.14);   color: #6b4900; }
.cnct-tag--pink,   p.cnct-tag--pink   { background: rgba(255,0,169,0.12);   color: #6f005d; }
.cnct-tag--white,  p.cnct-tag--white  { background: rgba(255,255,255,0.16); color: white;   }

/* ============================================================
   PILLBOX TABS — SERVICE / AUDIENCE NAVIGATION ROW
   Wrap a set of wp:button blocks in a wp:group with
   className cnct-pill-tabs. Each button gets cnct-pill-tab.

   For active state: add is-active class via JavaScript,
   or use a Navigation block with current-page detection.
   ============================================================ */
.cnct-pill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 2rem;
}
.cnct-pill-tab .wp-block-button__link {
  background: var(--wp--preset--color--surface-container-highest, #ffd8e7) !important;
  color: var(--wp--preset--color--primary, #6f005d) !important;
  border-radius: 9999px !important;
  padding: 0.45em 1.25em !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.015em !important;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease !important;
  box-shadow: none !important;
  border: none !important;
}
.cnct-pill-tab .wp-block-button__link:hover,
.cnct-pill-tab.is-active .wp-block-button__link {
  background: var(--wp--preset--color--primary, #6f005d) !important;
  color: white !important;
  transform: scale(1.02) !important;
}

/* ============================================================
   SPLIT LAYOUT (60/40)
   Add className to wp:columns block.
   ============================================================ */
.cnct-split-60-40 {
  display: grid !important;
  grid-template-columns: 60fr 40fr !important;
  gap: 4rem !important;
  align-items: center !important;
}
.cnct-split-60-40 .wp-block-column { width: auto !important; flex: unset !important; }

.cnct-split-40-60 {
  display: grid !important;
  grid-template-columns: 40fr 60fr !important;
  gap: 4rem !important;
  align-items: center !important;
}
.cnct-split-40-60 .wp-block-column { width: auto !important; flex: unset !important; }

@media (max-width: 768px) {
  .cnct-split-60-40,
  .cnct-split-40-60 { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ============================================================
   CTA STRIP
   Add className to a wp:group block.
   ============================================================ */
.cnct-cta-strip {
  background: linear-gradient(135deg, #ffb300 0%, #e69500 100%);
  border-radius: 2rem;
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cnct-cta-strip h2,
.cnct-cta-strip h3 { color: #3d0025 !important; margin: 0 !important; }
.cnct-cta-strip p  { color: #6b4900 !important; margin: 0 !important; }

/* ============================================================
   INSIGHTS / BLOG CARDS
   Add className to a wp:group block for each card.
   ============================================================ */
.cnct-insight-card {
  background: var(--wp--preset--color--surface, #fff8f8);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(61,0,37,0.05);
  transition: transform 250ms ease, box-shadow 250ms ease;
  display: flex;
  flex-direction: column;
}
.cnct-insight-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(61,0,37,0.10); }
.cnct-insight-card .wp-block-image { aspect-ratio: 16/9; overflow: hidden; background: #ffd8e7; }
.cnct-insight-card .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.cnct-insight-card__body { padding: 1.5rem; flex: 1; }

/* ============================================================
   CALLOUT BOXES
   Add className to a wp:group block.
   ============================================================ */
.cnct-callout { border-radius: 1.5rem; padding: 1.5rem 2rem; margin-block: 1.5rem; }
.cnct-callout--key     { background: #fff0f4; }
.cnct-callout--tip     { background: #fff8e6; }
.cnct-callout--example { background: #e6f9fd; }
.cnct-callout--warning { background: #ffe8ef; }

.cnct-callout-label, p.cnct-callout-label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--wp--preset--color--primary, #6f005d) !important;
  margin-block-end: 0.5rem !important;
}

/* ============================================================
   BREADCRUMB / PAGE PATH TAGS
   Use a wp:group with cnct-breadcrumb class containing
   wp:paragraph or wp:navigation-submenu items.
   ============================================================ */
.cnct-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-block-end: 1rem;
}
.cnct-breadcrumb a,
.cnct-breadcrumb span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}
.cnct-breadcrumb--dark a,
.cnct-breadcrumb--dark span { color: #8a7080; }
.cnct-breadcrumb .current,
.cnct-breadcrumb--dark .current { font-weight: 700; color: white; }
.cnct-breadcrumb--dark .current { color: #3d0025; }
.cnct-breadcrumb .sep { opacity: 0.35; }

/* ============================================================
   STICKY GLASS NAVIGATION OVERRIDE
   ============================================================ */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,248,248,0.88) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 4px 20px rgba(61,0,37,0.05);
}

/* ============================================================
   TWENTY TWENTY-FIVE NORMALISATION
   ============================================================ */
.cnct-hero.alignfull { margin-inline: 0; max-width: 100%; }
.cnct-section.alignfull { margin-inline: 0; max-width: 100%; }

/* Ensure Poppins cascades into nav */
.wp-block-navigation,
.wp-block-navigation a {
  font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif) !important;
}

/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cnct-card,
  .cnct-insight-card,
  .cnct-pill-tab .wp-block-button__link {
    transition: none !important;
  }
  .cnct-card:hover,
  .cnct-insight-card:hover {
    transform: none !important;
  }
}
/* ----------------------------------------------------------
   Hero illustration column (audience-wide.png)
   Apply to the wp:group wrapping the illustration image.
   ---------------------------------------------------------- */
.cnct-hero__illustration .wp-block-image {
  overflow: visible;
}
.cnct-hero__illustration .wp-block-image img {
  mix-blend-mode: multiply;
  width: 110%;
  margin-right: -2rem;
  margin-bottom: -5rem;
  filter: saturate(1.1);
  display: block;
}

/* ----------------------------------------------------------
   Card variant: cyan surface
   ---------------------------------------------------------- */
.cnct-card--cyan { background: #e6f9fd; }

/* ----------------------------------------------------------
   JOURNEY SECTION — Find your path
   ---------------------------------------------------------- */

/* Full-width coaching panel */
.cnct-journey-coaching {
  background: linear-gradient(135deg, #ffb300 0%, #e8a200 100%);
  border-radius: var(--wp--preset--border-radius--large, 2rem);
  padding: 3rem 3.5rem;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 3rem;
  align-items: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 12px 36px rgba(200,120,0,0.18);
}
.cnct-journey-coaching::before {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 280px; height: 280px;
  background: var(--cnct-shape-purple, url('./shape-purple.png')) center/contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.cnct-journey-coaching > * { position: relative; z-index: 1; }

.cnct-journey-coaching h3,
.cnct-journey-coaching .wp-block-heading {
  color: #3d0025 !important;
  font-size: clamp(1.4rem, 2.5vw, 1.875rem) !important;
  line-height: 1.2 !important;
}
.cnct-journey-coaching p { color: #6b4900 !important; }

.cnct-journey-coaching__blob {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
}
.cnct-journey-coaching__blob .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
}

@media (max-width: 640px) {
  .cnct-journey-coaching {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem;
  }
  .cnct-journey-coaching__blob { display: none; }
}

/* Subheading between coaching panel and business cards */
.cnct-journey-subhead,
p.cnct-journey-subhead {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--wp--preset--color--on-surface-muted, #8a7080) !important;
  margin-block-start: 3rem !important;
  margin-block-end: 1rem !important;
}

/* Journey cards — extend cnct-card */
.cnct-journey-card { padding: 2.5rem; }
.cnct-journey-card .cnct-tag { margin-block-end: 1rem; }
.cnct-journey-card h3,
.cnct-journey-card .wp-block-heading { font-size: 1.375rem !important; margin-block-end: 0.875rem; }
.cnct-journey-card p { font-size: 0.9375rem; line-height: 1.65; }
.cnct-journey-card .wp-block-buttons { margin-block-start: auto; padding-block-start: 1.75rem; }

/* Colour overrides per card type */
.cnct-journey-card--legal h3,
.cnct-journey-card--legal .wp-block-heading { color: var(--wp--preset--color--primary, #6f005d) !important; }
.cnct-journey-card--biz h3,
.cnct-journey-card--biz .wp-block-heading   { color: #006b80 !important; }

/* ----------------------------------------------------------
   "OR BROWSE BY SERVICE" — demoted service grid
   ---------------------------------------------------------- */
.cnct-section--browse { padding-block: 4rem; }

.cnct-browse-card { padding: 1.5rem; }
.cnct-browse-card h4,
.cnct-browse-card .wp-block-heading {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--primary, #6f005d) !important;
  margin-block-end: 0.5rem !important;
}
.cnct-browse-card p { font-size: 0.8125rem; color: #8a7080; line-height: 1.6; }
.cnct-browse-card a { font-size: 0.8125rem; font-weight: 600; color: #6f005d; text-decoration: none; }
.cnct-browse-card a:hover { color: var(--wp--preset--color--accent, #ff00a9); }

/* ----------------------------------------------------------
   About photo — blob mask helper
   Add cnct-blob-mask-2 to the group wrapping the photo.
   The existing cnct-blob-mask-2 rule handles the mask.
   This ensures the column doesn't clip the mask.
   ---------------------------------------------------------- */
.cnct-split-60-40 .cnct-blob-mask-2 {
  aspect-ratio: 1;
  overflow: visible;
}