/* ==========================================================================
   CircleTime Al Karama — Global design system
   Principle: premium first, warm second, playful through photography and
   subtle details — not through childish graphics.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   NOTE: All colour values below are PROVISIONAL estimates sampled by eye
   from the logo image. They are not official CircleTime brand values and
   must be replaced once the official brand colours are supplied.
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours (provisional) */
  --ct-blue: #1a8fd6;
  --ct-blue-deep: #1577b5;   /* darker blue for small text/links on light bg */
  --navy: #0f2f57;
  --navy-deep: #0b2444;
  --sky: #3ec3ec;
  --sky-soft: #d4effa;
  --sky-tint: #eaf7fc;
  --yellow: #ffc416;
  --butter: #fff5d6;
  --pink: #f6c8d3;
  --pink-tint: #fdf0f3;

  /* Neutrals (provisional) */
  --white: #ffffff;
  --off-white: #fbf8f3;
  --sand: #f3ede4;
  --grey-200: #e4e6ea;
  --grey-500: #6b7280;
  --charcoal: #23272f;

  /* Semantic roles */
  --color-bg: var(--off-white);
  --color-surface: var(--white);
  --color-text: var(--charcoal);
  --color-heading: var(--navy);
  --color-muted: var(--grey-500);
  --color-border: var(--grey-200);
  --color-accent: var(--ct-blue);
  --color-focus: var(--ct-blue);

  /* Typography */
  --font-heading: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.125rem, 1.45rem + 3.3vw, 3.75rem);   /* 34 → 60px */
  --fs-h2: clamp(1.875rem, 1.45rem + 1.8vw, 2.625rem);        /* 30 → 42px */
  --fs-h3: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);          /* 21 → 24px */
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);   /* 17 → 19px */
  --fs-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);    /* 17 → 18px */
  --fs-small: 0.9375rem;                                      /* 15px */
  --fs-xs: 0.8125rem;                                         /* 13px */

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.7;
  --tracking-heading: -0.02em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;
  --section-space: clamp(4.5rem, 2.4rem + 8vw, 8.5rem);       /* 72 → 136px */

  /* Layout */
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);                      /* 20 → 40px */
  --measure: 64ch;                                            /* comfortable reading width */

  /* Shape */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Elevation — soft, navy-tinted, never harsh */
  --shadow-soft: 0 1px 2px rgba(15, 47, 87, 0.04), 0 12px 32px -12px rgba(15, 47, 87, 0.12);
  --shadow-lift: 0 2px 4px rgba(15, 47, 87, 0.04), 0 24px 56px -20px rgba(15, 47, 87, 0.22);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.25s;
  --dur: 0.5s;
  --dur-slow: 0.7s;

  /* Header */
  --header-height: 84px;
}

@media (max-width: 767px) {
  :root {
    --header-height: 68px;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--ct-blue-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--butter);
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--color-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.t-display {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
}

.t-h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.t-h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.t-small {
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* Subtle brand emphasis inside a heading or paragraph (same words, only styled) */
.accent {
  /* deeper brand blue: 4.0:1 on the hero's sky background (AA for large text) */
  color: var(--ct-blue-deep);
  font-weight: 800;
}

.highlight {
  color: var(--ct-blue-deep);
  font-weight: 600;
}

/* Thin yellow rule used under selected headings */
.heading-rule {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--yellow);
}

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-space);
  overflow-x: clip; /* keep soft decorative glows from causing sideways scroll */
}

/* Section background tones — the page rhythm */
.bg-off-white { background: var(--off-white); }
.bg-sky       { background: var(--sky-tint); }
.bg-sand      { background: var(--sand); }
.bg-pink      { background: var(--pink-tint); }
.bg-butter    { background: var(--butter); }

.nowrap {
  white-space: nowrap;
}

.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;
}

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   5. Buttons — KidEdu-inspired hover
   A circle of the hover colour sweeps in from the bottom-left corner and
   fills the pill, while the arrow slides out and a new one slides in.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--yellow);
  --btn-fg: var(--navy);
  --btn-fill: var(--navy);
  --btn-fg-hover: var(--white);
  --btn-icon-bg: var(--navy);
  --btn-icon-fg: var(--yellow);
  --btn-icon-bg-hover: var(--yellow);
  --btn-icon-fg-hover: var(--navy);
  --btn-border: transparent;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: 0.5rem 0.5rem 0.5rem 1.625rem;
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

/* The sweeping fill */
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 240%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--btn-fill);
  transform: translate(-50%, 50%) scale(0);
  transition: transform var(--dur-slow) var(--ease-out);
}

.btn__label {
  position: relative;
}

.btn__icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--btn-icon-bg);
  color: var(--btn-icon-fg);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.btn__icon svg {
  width: 18px;
  height: 18px;
  grid-area: 1 / 1;
  transition: transform var(--dur) var(--ease-out);
}

/* Second arrow waits off to the left */
.btn__icon svg + svg {
  transform: translateX(-160%);
}

@media (hover: hover) {
  .btn:hover {
    color: var(--btn-fg-hover);
    border-color: var(--btn-fill);
  }

  .btn:hover::before {
    transform: translate(-50%, 50%) scale(1);
  }

  .btn:hover .btn__icon {
    background: var(--btn-icon-bg-hover);
    color: var(--btn-icon-fg-hover);
  }

  .btn:hover .btn__icon svg:first-child {
    transform: translateX(160%);
  }

  .btn:hover .btn__icon svg + svg {
    transform: translateX(0);
  }
}

.btn:focus-visible {
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

.btn:active {
  transform: translateY(1px);
}

/* Secondary: white pill with outline that inverts to navy on hover */
.btn--secondary {
  --btn-bg: var(--white);
  --btn-fg: var(--navy);
  --btn-fill: var(--navy);
  --btn-fg-hover: var(--white);
  --btn-icon-bg: var(--sky-tint);
  --btn-icon-fg: var(--ct-blue-deep);
  --btn-icon-bg-hover: var(--yellow);
  --btn-icon-fg-hover: var(--navy);
  --btn-border: var(--grey-200);
}

/* Ghost: for use on the navy panel — outline that fills with white on hover */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-fill: var(--white);
  --btn-fg-hover: var(--navy);
  --btn-icon-bg: rgba(255, 255, 255, 0.14);
  --btn-icon-fg: var(--white);
  --btn-icon-bg-hover: var(--navy);
  --btn-icon-fg-hover: var(--white);
  --btn-border: rgba(255, 255, 255, 0.4);
}

/* Compact size (header) */
.btn--sm {
  min-height: 46px;
  gap: var(--space-2);
  padding: 0.3125rem 0.3125rem 0.3125rem 1.25rem;
  font-size: 0.9375rem;
}

.btn--sm .btn__icon {
  width: 36px;
  height: 36px;
}

.btn--sm .btn__icon svg {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   6. Trust item — small icon in a soft tinted circle + label
   Minimal by design: small icons, subtle brand accents, no boxes/shadows.
   -------------------------------------------------------------------------- */
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--navy);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.005em;
}

.trust-item__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sky-tint);
  color: var(--ct-blue-deep);
}

.trust-item__icon svg {
  width: 18px;
  height: 18px;
}

.trust-item__icon--butter { background: var(--butter); color: #9a6a00; }
.trust-item__icon--pink   { background: var(--pink-tint); color: #b04a66; }
.trust-item__icon--cyan   { background: #e3f7fd; color: #0e87ad; }
.trust-item__icon--sand   { background: var(--sand); color: var(--navy); }

/* --------------------------------------------------------------------------
   7. Photo frames & placeholders
   Placeholders mark where authentic CircleTime Al Karama photography goes.
   They are temporary and must be replaced with real photos — never stock.
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--sand);
}

.frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame--rounded { border-radius: var(--radius-xl); }
.frame--circle  { border-radius: 50%; aspect-ratio: 1; }
.frame--arch    { border-radius: 999px 999px var(--radius-lg) var(--radius-lg); }

.media-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--space-6);
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 196, 22, 0.18), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(62, 195, 236, 0.22), transparent 48%),
    linear-gradient(135deg, var(--sky-tint), var(--off-white) 55%, var(--butter));
  color: var(--grey-500);
  text-align: center;
}

.media-placeholder__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 34ch;
  padding: var(--space-2) var(--space-4);
  border: 1.5px dashed rgba(15, 47, 87, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
}

.media-placeholder__label svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Soft decorative circles (brand motif) */
.deco-circle {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.deco-circle--glow {
  background: radial-gradient(circle, rgba(62, 195, 236, 0.28), rgba(62, 195, 236, 0) 70%);
}

.deco-circle--yellow {
  background: var(--yellow);
}

.deco-circle--pink {
  background: var(--pink);
}

/* --------------------------------------------------------------------------
   8. Motion — gentle reveal on scroll (enabled by JS)
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Organic blob reveal (used on the hero photo). The element starts fully
   clipped; js/main.js grows wobbly blobs from the centre until the whole
   image shows, then removes the clip. Without JS the image simply shows. */
.js [data-blob-reveal] {
  clip-path: circle(0 at 50% 50%);
}

.js [data-blob-reveal].is-revealed {
  clip-path: none;
}

/* Calm float — the shared idle movement for feature photos and decorations.
   Small amplitude, long cycle: it should read as breathing, not bouncing. */
@keyframes ct-float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -8px, 0); }
}

.ct-float {
  animation: ct-float var(--float-dur, 9s) ease-in-out infinite alternate;
  animation-delay: var(--float-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-blob-reveal] {
    clip-path: none;
  }

  .ct-float {
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}