/*
Theme Name: BlueCT
Author: BlueCT
Description: Block theme for BlueCT, a webdesign and digital services agency in Tilburg. Refined tech-minimal direction: confident electric blue on cool white, type-forward, structured cards. Tokens live in theme.json; bespoke look and motion live here.
Version: 0.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: bluect
*/

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

/* ---------- Atmosphere ---------- */
.wp-site-blocks { position: relative; }
/* Soft cool gradient wash behind the page, never on top of content. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 50% at 85% -5%, rgba(51,94,234,0.10), transparent 60%),
    radial-gradient(50% 40% at 0% 0%, rgba(51,94,234,0.06), transparent 55%);
}
.wp-site-blocks > * { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.nav { padding-block: 1.3rem; }
.brand a, .brand {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
  text-decoration: none; color: var(--wp--preset--color--ink);
}
.nav .wp-block-navigation { gap: clamp(1rem, 2.2vw, 2rem); font-weight: 500; }
.nav .wp-block-navigation a { color: var(--wp--preset--color--ink); text-decoration: none; }
.nav .wp-block-navigation a:hover { color: var(--wp--preset--color--accent-text); }
.nav .wp-block-button__link { font-weight: 600; }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 600; color: var(--wp--preset--color--accent-text); margin-bottom: 0.4rem;
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 8vw, 7rem); }
.hero h1 { max-width: 18ch; }
.hero-lead { max-width: 50ch; color: var(--wp--preset--color--ink-soft); }

/* ---------- Intro / manifesto ---------- */
.lead { max-width: 56ch; color: var(--wp--preset--color--ink-soft); }
.rule { height: 2px; width: 64px; background: var(--wp--preset--color--accent); border: 0; margin: 0; }

/* ---------- Stats ---------- */
.stat .figure {
  font-family: var(--wp--preset--font-family--display); font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1; color: var(--wp--preset--color--ink);
}
.stat .label { color: var(--wp--preset--color--ink-soft); font-size: 0.95rem; margin-top: 0.4rem; }

/* ---------- Cards (services) ---------- */
.cards { gap: 1.25rem; }
.card {
  border: 1px solid var(--wp--preset--color--line); border-radius: 6px;
  padding: 1.9rem 1.6rem; background: var(--wp--preset--color--white);
  transition: transform .4s cubic-bezier(0.16,1,0.3,1), box-shadow .4s, border-color .4s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(10,31,110,0.35); border-color: var(--wp--preset--color--accent); }
.card .num { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.4rem; color: var(--wp--preset--color--accent); line-height: 1; display: block; }
.card a { text-decoration: none; }
.card .more { font-weight: 600; color: var(--wp--preset--color--accent-text); }
.card .more::after { content: " \2192"; }

/* ---------- Pricing ---------- */
.price-card {
  border: 1px solid var(--wp--preset--color--line); border-radius: 6px;
  padding: 1.9rem 1.6rem; background: var(--wp--preset--color--white);
}
.price-card.featured { border-color: var(--wp--preset--color--accent); box-shadow: 0 18px 40px -24px rgba(10,31,110,0.35); }
.price-card .amount { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); color: var(--wp--preset--color--ink); line-height: 1.1; }
.price-card .per { color: var(--wp--preset--color--ink-soft); font-size: 0.9rem; }
.checklist { list-style: none; margin: 1rem 0 0; padding: 0; }
.checklist li { position: relative; padding-left: 1.6rem; margin: 0.45rem 0; color: var(--wp--preset--color--ink-soft); }
.checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--wp--preset--color--accent); font-weight: 700; }

/* ---------- Partner / proof strip ---------- */
.partners { color: var(--wp--preset--color--ink-soft); font-weight: 600; letter-spacing: 0.02em; }
.partners .sep { color: var(--wp--preset--color--accent); padding: 0 0.4rem; }

/* ---------- Process / steps ---------- */
.steps { gap: 1.25rem; }
.step { border-top: 2px solid var(--wp--preset--color--accent); padding-top: 1rem; }
.step .num { font-family: var(--wp--preset--font-family--display); font-weight: 700; color: var(--wp--preset--color--accent); }

/* ---------- CTA band ---------- */
.cta-band { border-radius: 10px; }
.cta-band h2, .cta-band p { color: var(--wp--preset--color--white); }
.cta-band .wp-block-button__link { font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer a { color: var(--wp--preset--color--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--wp--preset--color--accent-text); }
.footer-col .col-head { font-weight: 700; color: var(--wp--preset--color--ink); margin-bottom: 0.6rem; font-size: 0.95rem; }

/* ---------- Buttons (global polish) ---------- */
.wp-block-button__link { transition: transform .25s ease, box-shadow .25s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }

/* ---------- Focus visibility (a11y) ---------- */
a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; border-radius: 3px;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 99999; background: var(--wp--preset--color--ink); color: #fff; padding: 0.6rem 1rem; }
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wp-block-button__link, .card { transition: none !important; }
}

/* =====================================================================
   MOBILE (mandatory — section 13)
   ===================================================================== */
@media (max-width: 599px) {
  .wp-site-blocks { padding-inline: 1.25rem; }
  .wrap { padding-inline: 0; }
  .cards { display: flex; flex-direction: column; }
  .steps { display: flex; flex-direction: column; }
  .step { flex-direction: column; gap: 0.5rem; }
}

/* Hamburger (closed-state toggle) sits on the light header — keep it dark. */
.wp-block-navigation__responsive-container-open {
  color: var(--wp--preset--color--ink) !important;
}
/* Close button lives inside the dark overlay — keep it light. */
.wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--paper) !important;
}

/* Bidirectional open/close animation. WP sets display:none by default; override
   it so the transition runs in both directions. Never style the container
   without .is-menu-open scoping, or the menu shows permanently. */
.wp-block-navigation__responsive-container:not(.is-menu-open) {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.wp-block-navigation__responsive-container.is-menu-open {
  display: flex !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, visibility 0s linear 0s;
  background: var(--wp--preset--color--ink-deep) !important;
  padding: 5rem 1.75rem 2.5rem !important;
  z-index: 9999 !important;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: clamp(2rem, 7vw, 3rem) !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--paper) !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
  padding: 0.6rem 0 !important;
  display: block;
  border-bottom: 1px solid rgba(244,246,255,0.14);
  transition: color 0.2s ease, padding-left 0.22s cubic-bezier(0.16,1,0.3,1);
}
.wp-block-navigation__responsive-container.is-menu-open a:hover {
  color: var(--wp--preset--color--accent) !important;
  padding-left: 0.5rem !important;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container,
  .wp-block-navigation__responsive-container.is-menu-open {
    transition: none !important;
  }
}

/* Hide the nav CTA button on very small screens (it lives in the overlay menu too). */
@media (max-width: 480px) {
  .nav .wp-block-buttons { display: none; }
}