/*
Theme Name: Butterfly Nursery
Theme URI: https://www.butterfly-nursery.co.uk
Author: Adregen
Author URI: https://adregen.com
Description: Global styles (tokens, layout, type, utilities) for Butterfly Nursery theme
Version: 0.2.0
Text Domain: butterfly
*/

/* ===========================
   0) Minimal Reset
   =========================== */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { display:block; max-width:100%; height:auto; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

/* Prefer safer focus outline everywhere */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ===========================
   1) Design Tokens
   =========================== */
:root{
  /* --- Brand palette --- */
  --primary-red: #D42020;
  --black:       #222443;
  --yellow:      #FFD358;
  --white:       #FFFFFF;
  --green:       #AED032;
  --cream:       #FFF6F1;

  /* Overlays */
  --hero-overlay: rgba(255,107,107,0.70);
  --body-overlay: rgba(255,246,241,0.70);

  /* Borders / shadows */
  --border:       #E0E0E0;
  --border-light: #F0F0F0;
  --shadow-1: 0 10px 30px rgba(0,0,0,.10);
  --shadow-1h:0 15px 40px rgba(0,0,0,.15);

  /* Z-index layers (reference only) */
  --z-overlay: 1000;
  --z-drawer:  1001;
  --z-header:  1002;

  /* --- Breakpoints (reference) --- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-xxl:1440px;

  /* --- Container system --- */
  --container:            1240px;
  --container-pad-mobile: 20px;
  --container-pad-tablet: 40px;

  /* --- Radius --- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --round-pill: 30px;

  /* --- Vertical rhythm scale --- */
  --space-1: clamp(8px,  1.0vw, 12px);
  --space-2: clamp(12px, 1.4vw, 16px);
  --space-3: clamp(16px, 2.2vw, 24px);
  --space-4: clamp(20px, 3.0vw, 32px);
  --space-5: clamp(28px, 4.2vw, 48px);



  /* --- Typography --- */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lh-body: 1.55;

  /* Fluid base size (16 → 18 across widths) */
  --font-body: clamp(16px, 1.2vw, 18px);

  /* Fluid heading scale */
  --fs-h1: clamp(36px, 6.2vw, 64px);
  --lh-h1: 1.15;
  --w-h1:  600;

  --fs-h2: clamp(24px, 3.8vw, 48px);
  --lh-h2: 1.15;
  --w-h2:  600;

  --fs-h3: clamp(20px, 2.4vw, 32px);
  --lh-h3: 1.25;
  --w-h3:  600;

  /* Buttons / small */
  --fs-btn: clamp(15px, 1.2vw, 18px);
  --lh-btn: 1.35;

  /* --- Spacing (section + gaps) --- */
  --sec-pad: clamp(40px, 6vw, 80px);
  --sec-gap: clamp(30px, 7vw, 120px);
  --in-sec-gap: clamp(24px, 4vw, 48px);
  --grid-gap: clamp(18px, 3.5vw, 48px);

  /* --- Button padding --- */
  --btn-pad-y: 10px;
  --btn-pad-x: 28px;

  /* --- Focus --- */
  --focus: var(--black);

  /* --- Body background image (optional) --- */
  --site-bg-image: url('assets/background-image.webp');

  /* --- Header height (for components that need it) --- */
  --header-h-desktop: 100px;
  --header-h-mobile:  72px;
}

/* ===========================
   2) Base
   =========================== */
html, body { height: auto; }
body{
  font-family: var(--font-sans);
  color: var(--black);
  background: var(--white);
  font-size: var(--font-body);
  line-height: var(--lh-body);
}

/* Global background + cream overlay:
   - Homepage: NO overlay
   - All other templates: overlay on
   Add your image file once it's in theme assets. */
body {
  position: relative;
  background-image: var(--site-bg-image);
  background-repeat: repeat-y;
  background-size: 120% auto;
  background-position-x: 68%;
  background-position-y: top;
  background-color: var(--cream);
}



body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--cream);
  opacity: 0.8; /* adjust between 0.8–0.9 for your preferred softness */
  z-index: -1;
  pointer-events: none;
}


/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===========================
   3) Containers
   =========================== */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}
@media (min-width: 768px){
  .container{ padding-inline: var(--container-pad-tablet); }
}

/* Optional variants */
.container--wide{ max-width: calc(var(--container) + 160px); }
.container--full{ max-width: none; padding-inline: 0; }

/* ===========================
   4) Sections & flow
   =========================== */
.section {
  padding-block: var(--sec-pad); /* keeps internal spacing consistent */
}

/* Remove the extra space between stacked sections */
.section + .section {
  margin-top: 0;
}


/* Low-specificity flow utility for vertical rhythm inside sections */
.flow > * + *{ margin-top: var(--in-sec-gap); }

/* ===========================
   5) Typography (rhythm normalised)
   =========================== */
:where(h1,h2,h3,h4,h5,h6){ color: var(--black); font-weight: 600; }
:where(p,ul,ol){ color:#333; }

/* Bottom margins driven by the global scale */
h1{ font-size: var(--fs-h1); line-height: var(--lh-h1); margin: 0 0 var(--space-4); }
h2{ font-size: var(--fs-h2); line-height: var(--lh-h2); margin: 0 0 var(--space-3); }
h3{ font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0 0 var(--space-2); }
:where(p,ul,ol){ margin: 0 0 var(--space-2); }

/* Page vs hero wordmark (opt-in) */
.h1--page{ font-size: clamp(36px, 4.4vw, 64px); line-height: 1.15; margin: 0 0 var(--space-4); }
.h1--home{ font-size: clamp(36px, 6.8vw, 90px); line-height: 1.25; margin: 0 0 var(--space-3); }


/* ===========================
   6) Buttons (global)
   =========================== */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--round-pill);
  border: 0;
  font-weight: 600;
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  cursor: pointer;

  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  will-change: transform;
}

.btn:active,
button:active,
input[type="submit"]:active{ transform: translateY(1px); }

/* Color variants (opt-in) */
.btn--primary{ background: var(--primary-red); color:#fff; box-shadow: var(--shadow-1); }
.btn--secondary{ background: var(--yellow); color: var(--black); box-shadow: var(--shadow-1); }
.btn--green{ background: var(--green); color:#fff; box-shadow: var(--shadow-1); }

.btn--primary:hover,
.btn--primary:focus-visible,
.btn--secondary:hover,
.btn--secondary:focus-visible,
.btn--green:hover,
.btn--green:focus-visible{
  filter: brightness(1.05);
  box-shadow: var(--shadow-1h);
  transform: translateY(-1px) scale(1.01);
}

/* ===========================
   Global CTA primitives
   =========================== */

/* 1) Stop global link hover from changing button text colour */
a:not(.btn):hover,
a:not(.btn):focus { color: var(--primary-red); }

/* 2) Map common WP button classes to our system */
.btn,
.wp-element-button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--round-pill);
  border: 0;
  font-weight: 600;
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  cursor: pointer;

  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  will-change: transform;
  text-decoration: none;
}

/* 3) Colour variants (use anywhere) */
.btn--primary,
.wp-element-button.is-style-primary,
.wp-block-button__link.is-style-primary {
  background: var(--primary-red);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn--secondary,
.wp-element-button.is-style-secondary,
.wp-block-button__link.is-style-secondary {
  background: var(--yellow);
  color: var(--black);
  box-shadow: var(--shadow-1);
}
.btn--green,
.wp-element-button.is-style-green,
.wp-block-button__link.is-style-green {
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow-1);
}

/* Keep readable on hover/focus */
.btn--primary:hover,
.btn--primary:focus-visible,
.wp-element-button.is-style-primary:hover,
.wp-element-button.is-style-primary:focus-visible,
.wp-block-button__link.is-style-primary:hover,
.wp-block-button__link.is-style-primary:focus-visible {
  color:#fff; filter:brightness(1.05); box-shadow:var(--shadow-1h);
  transform: translateY(-1px) scale(1.01);
}
.btn--secondary:hover,
.btn--secondary:focus-visible,
.wp-element-button.is-style-secondary:hover,
.wp-element-button.is-style-secondary:focus-visible,
.wp-block-button__link.is-style-secondary:hover,
.wp-block-button__link.is-style-secondary:focus-visible {
  color:var(--black); filter:brightness(1.05); box-shadow:var(--shadow-1h);
  transform: translateY(-1px) scale(1.01);
}
.btn--green:hover,
.btn--green:focus-visible,
.wp-element-button.is-style-green:hover,
.wp-element-button.is-style-green:focus-visible,
.wp-block-button__link.is-style-green:hover,
.wp-block-button__link.is-style-green:focus-visible {
  color:#fff; filter:brightness(1.05); box-shadow:var(--shadow-1h);
  transform: translateY(-1px) scale(1.01);
}

/* 4) Sizes you can opt into globally */
.btn--lg { padding: calc(var(--btn-pad-y) + 4px) calc(var(--btn-pad-x) + 8px); font-size: clamp(16px, 1.4vw, 20px); }
.btn--sm { padding: calc(var(--btn-pad-y) - 4px) calc(var(--btn-pad-x) - 8px); font-size: clamp(14px, 1vw, 16px); }

/* 5) Button groups (optional) */
.btn-group { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }


/* ===========================
   7) Forms (global baseline)
   =========================== */
.form-group{ margin-bottom: 16px; }
label{ display:block; font-weight:600; margin: 0 0 8px; }
.input, .form-input, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--black);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus, .form-input:focus,
input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-red) 20%, transparent);
}

::placeholder{ color: #808080; }

/* Contact Form 7 common bits */
.wpcf7 form .wpcf7-response-output{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}

/* ===========================
   8) Cards (global primitive)
   =========================== */
.card{
  background:#fff;
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.2vw, 30px);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-1h);
}

/* Variants */
.card--image-header{ 
  padding:0; 
  overflow:hidden; 
}
.card--flush{ 
  padding:0; 
  box-shadow:none; 
}
.card--outlined{
  border:1px solid var(--border);
  box-shadow:none;
}


/* ===========================
   9) Layout helpers
   =========================== */
/* Grid primitive with tunable gap */
.grid{ display:grid; gap: var(--grid-gap); }
.grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 1023.98px){
  .grid--3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 599.98px){
  .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; }
}

/* Flex cluster helper */
.cluster{
  display:flex; flex-wrap: wrap; align-items:center; gap: var(--grid-gap);
}

/* Media wrapper to keep aspect ratios easily */
.ratio{
  position: relative; width:100%; overflow:hidden;
  --ratio: 16/9;
  padding-bottom: calc(100% / (var(--ratio)));
}
.ratio > *{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover;
}

/* ===========================
   10) Accessibility helpers
   =========================== */
.visually-hidden{
  position: absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border:0;
}

/* ===========================
   11) Utilities
   =========================== */
/* Text alignment */
.text-center{ text-align:center !important; }
.text-start{ text-align:left   !important; }
.text-end  { text-align:right  !important; }

/* Spacing nudges */
.mt-0{ margin-top:0 !important; }
.mb-0{ margin-bottom:0 !important; }
.mt-1{ margin-top: .25rem !important; }
.mb-1{ margin-bottom:.25rem !important; }
.mt-2{ margin-top: .5rem !important; }
.mb-2{ margin-bottom:.5rem !important; }
.mt-3{ margin-top: 1rem !important; }
.mb-3{ margin-bottom:1rem !important; }
.pt-0{ padding-top:0 !important; }
.pb-0{ padding-bottom:0 !important; }

/* Width helpers */
.w-100{ width:100% !important; }
.maxw-none{ max-width:none !important; }

/* Display shortcuts */
.d-block{ display:block !important; }
.d-inline{ display:inline !important; }
.d-flex{ display:flex !important; }
.d-grid{ display:grid !important; }

/* Hide on small / show on small (for quick tweaks) */
@media (max-width: 767.98px){
  .hide-sm{ display:none !important; }
  .show-sm{ display:initial !important; }
}
@media (min-width: 768px){
  .hide-md-up{ display:none !important; }
}

/* Vertical stack utility (controls gap with a single custom prop) */
.stack{ --stack-gap: var(--space-3); }
.stack > * + *{ margin-top: var(--stack-gap); }

/* Quick variants */
.stack--tight{ --stack-gap: var(--space-2); }
.stack--loose{ --stack-gap: var(--space-4); }


/* ===========================
   12) Page background hero (generic opt-in)
   =========================== */
/* This is a generic, optional pattern to give non-home pages a
   soft, branded hero without component-specific styling.
   Use in your templates if helpful; else delete. */
.page-hero-basic{
  position:relative;
background:
  url('assets/non-homepage-hero-background.svg') center/cover no-repeat,
  #FFD1D1;
  min-height: clamp(146px, 22vw, 280px);
  isolation: isolate;
}
.page-hero-basic::before{
  content:"";
  position:absolute; inset:0;
  background: var(--hero-overlay);
  z-index:0;
}
.page-hero-basic > *{ position:relative; z-index:1; }

/* ======================================
   Default inner page hero (non-home pages)
   ====================================== */
body:not(.home) .h1--page {
  display: flex;
  align-items: center;             /* vertical centering */
  justify-content: center;         /* horizontal centering */
  min-height: clamp(240px, 30vw, 380px); /* responsive height */
}