/*
 * Theme Name: Twenty Twenty-Four IAM York
 * Template: twentytwentyfour
 * Version: 1.0
 * Description: IAM York Advanced Drivers child theme
 */
 
 /*
 * IAM York Advanced Drivers — Custom Theme CSS
 * Base theme: Twenty Twenty-Four 1.3
 * Brand: IAM RoadSmart 2022 Guidelines
 *
 * HOW TO USE:
 * Paste into Appearance → Customise → Additional CSS
 * OR add as a child theme stylesheet.
 *
 * FONT: Titillium Web (add to Appearance → Editor → Styles → Typography
 *       OR use the @import below if not loaded via Google Fonts block)
 */

/* ─── Google Font ─────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');


/* ─── Brand Tokens ────────────────────────────────────────────────────────── */
:root {
  --iam-blue:       #00B2E2;   /* Smart Blue  */
  --iam-gravel:     #2C3D4A;   /* Gravel      */
  --iam-sky:        #74D0F6;   /* Sky         */
  --iam-sea:        #007CB0;   /* Sea         */
  --iam-cloud:      #EDF5FA;   /* Cloud       */
  --iam-tarmac:     #000F1A;   /* Tarmac      */
  --iam-white:      #FFFFFF;

  --iam-font:       'Titillium Web', sans-serif;

  --iam-radius-sm:  4px;
  --iam-radius-md:  8px;
  --iam-radius-lg:  12px;

  --iam-shadow:     0 2px 16px rgba(0, 178, 226, 0.12);
  --iam-shadow-md:  0 4px 28px rgba(0, 178, 226, 0.18);
}

/* ─── Global Reset / Base ────────────────────────────────────────────────── */
body,
.wp-site-blocks {
  font-family: var(--iam-font) !important;
  color: var(--iam-gravel);
  background: var(--iam-white);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--iam-font) !important;
  font-weight: 700;
  color: var(--iam-gravel);
  line-height: 1.15;
}

p, li, td, th, label, input, textarea, select {
  font-family: var(--iam-font) !important;
}

a { color: var(--iam-blue); text-decoration: none; }
a:hover { color: var(--iam-sea); }

/* ─── Site Header ────────────────────────────────────────────────────────── */
.wp-block-template-part[data-slug="header"],
header.wp-block-template-part,
.site-header,
#masthead {
  background: var(--iam-white) !important;
  border-bottom: 2px solid var(--iam-blue) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* Logo sizing */
.wp-block-site-logo img,
.custom-logo {
  max-height: 56px !important;
  width: auto !important;
}

/* Nav links */
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--iam-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--iam-gravel) !important;
  letter-spacing: 0.01em;
  padding: 6px 4px !important;
  text-decoration: none !important;
  transition: color 0.2s;
}

.wp-block-navigation a:hover,
.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--iam-blue) !important;
}

/* Nav CTA button */
.wp-block-navigation .wp-block-navigation-item.is-style-button a,
.wp-block-navigation .nav-cta a {
  background: var(--iam-blue) !important;
  color: var(--iam-white) !important;
  border-radius: var(--iam-radius-sm) !important;
  padding: 9px 22px !important;
  font-weight: 700 !important;
  transition: background 0.2s !important;
}

.wp-block-navigation .wp-block-navigation-item.is-style-button a:hover,
.wp-block-navigation .nav-cta a:hover {
  background: var(--iam-sea) !important;
}

/* ─── Hero Block ─────────────────────────────────────────────────────────── */
.iam-hero,
.wp-block-cover.is-style-iam-hero {
  background-color: var(--iam-gravel) !important;
  min-height: 480px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Decorative wave overlay — uses ::after pseudo on cover block */
.iam-hero::after,
.wp-block-cover.is-style-iam-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(0,178,226,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 30% 40% at 100% 0%, rgba(0,124,176,0.2) 0%, transparent 60%);
  pointer-events: none;
}

.iam-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

/* Hero eyebrow text */
.iam-hero-eyebrow {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--iam-blue) !important;
  margin-bottom: 12px !important;
}

/* Hero heading */
.iam-hero h1,
.iam-hero .wp-block-heading {
  font-size: clamp(32px, 5vw, 52px) !important;
  font-weight: 700 !important;
  color: var(--iam-white) !important;
  line-height: 1.08 !important;
  margin-bottom: 20px !important;
}

.iam-hero h1 em,
.iam-hero-accent {
  font-style: normal !important;
  color: var(--iam-blue) !important;
}

/* Hero body text */
.iam-hero p {
  font-size: 18px !important;
  font-weight: 300 !important;
  color: var(--iam-sky) !important;
  max-width: 520px !important;
  margin-bottom: 32px !important;
  line-height: 1.55 !important;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
  font-family: var(--iam-font) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border-radius: var(--iam-radius-sm) !important;
  padding: 13px 28px !important;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.15s !important;
  border: none !important;
}

.wp-block-button__link:hover { transform: translateY(-1px); }

/* Primary */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link {
  background: var(--iam-blue) !important;
  color: var(--iam-white) !important;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--iam-sea) !important;
}

/* Outline */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--iam-white) !important;
  border: 2px solid rgba(255,255,255,0.45) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--iam-blue) !important;
  color: var(--iam-blue) !important;
}

/* White (for dark backgrounds) */
.wp-block-button.is-style-iam-white .wp-block-button__link {
  background: var(--iam-white) !important;
  color: var(--iam-blue) !important;
}
.wp-block-button.is-style-iam-white .wp-block-button__link:hover {
  background: var(--iam-cloud) !important;
}

/* ─── Stats Bar ──────────────────────────────────────────────────────────── */
.iam-stats-bar,
.wp-block-group.is-style-iam-stats {
  background: var(--iam-blue) !important;
  padding: 22px 40px !important;
}

.iam-stats-bar .wp-block-columns,
.iam-stats-bar .iam-stat {
  text-align: center;
}

.iam-stat-number {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--iam-white) !important;
  line-height: 1 !important;
  display: block;
}

.iam-stat-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
  display: block;
}

/* ─── Section Tags / Eyebrows ────────────────────────────────────────────── */
.iam-tag,
.section-tag {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--iam-blue) !important;
  margin-bottom: 10px !important;
}

/* ─── Course / Feature Cards ─────────────────────────────────────────────── */
.iam-card,
.wp-block-group.is-style-iam-card {
  background: var(--iam-white) !important;
  border: 1px solid #d5e6ef !important;
  border-top: 5px solid var(--iam-blue) !important;
  border-radius: var(--iam-radius-md) !important;
  padding: 24px !important;
  transition: box-shadow 0.25s, transform 0.2s !important;
  height: 100% !important;
}

.iam-card:hover,
.wp-block-group.is-style-iam-card:hover {
  box-shadow: var(--iam-shadow-md) !important;
  transform: translateY(-3px) !important;
}

.iam-card--sea { border-top-color: var(--iam-sea) !important; }
.iam-card--sky { border-top-color: var(--iam-sky) !important; }
.iam-card--gravel { border-top-color: var(--iam-gravel) !important; }

.iam-card h3,
.iam-card .wp-block-heading {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--iam-gravel) !important;
  margin-bottom: 10px !important;
}

.iam-card p { font-size: 14px !important; color: #5a6e7a !important; line-height: 1.6 !important; }

.iam-card .wp-block-button__link {
  font-size: 14px !important;
  padding: 0 !important;
  background: none !important;
  color: var(--iam-blue) !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: none !important;
  box-shadow: none !important;
}
.iam-card .wp-block-button__link::after { content: ' →'; }
.iam-card .wp-block-button__link:hover { color: var(--iam-sea) !important; }

/* Card icon circle */
.iam-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--iam-cloud);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* ─── How It Works Steps ─────────────────────────────────────────────────── */
.iam-step-number {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--iam-blue) !important;
  color: var(--iam-white) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  font-family: var(--iam-font) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
}

.iam-steps-section {
  background: var(--iam-cloud) !important;
}

/* ─── Quote / Testimonial Block ──────────────────────────────────────────── */
.iam-quote-section,
.wp-block-group.is-style-iam-quote {
  background: var(--iam-gravel) !important;
  padding: 56px 40px !important;
  text-align: center !important;
}

.iam-quote-section blockquote,
.wp-block-quote.is-style-iam {
  border: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 640px !important;
}

.iam-quote-section blockquote p,
.wp-block-quote.is-style-iam p {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--iam-white) !important;
  line-height: 1.4 !important;
  font-style: normal !important;
  position: relative !important;
}

.iam-quote-section blockquote p::before {
  content: '\201C';
  font-size: 72px;
  font-weight: 700;
  color: var(--iam-blue);
  line-height: 0;
  vertical-align: -0.35em;
  margin-right: 6px;
}

.wp-block-quote.is-style-iam cite,
.iam-quote-section cite {
  font-size: 14px !important;
  color: var(--iam-sky) !important;
  font-style: normal !important;
  margin-top: 16px !important;
  display: block !important;
}

/* ─── Event Items ────────────────────────────────────────────────────────── */
.iam-event {
  background: var(--iam-cloud);
  border-left: 4px solid var(--iam-blue);
  border-radius: 0 var(--iam-radius-sm) var(--iam-radius-sm) 0;
  padding: 14px 20px;
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 12px;
}

.iam-event-date-day {
  font-size: 26px;
  font-weight: 700;
  color: var(--iam-blue);
  line-height: 1;
  min-width: 32px;
  text-align: center;
}
.iam-event-date-mon {
  font-size: 11px;
  font-weight: 700;
  color: #5a6e7a;
  text-transform: uppercase;
  text-align: center;
}
.iam-event h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--iam-gravel) !important;
  margin-bottom: 3px !important;
}
.iam-event p {
  font-size: 13px !important;
  color: #5a6e7a !important;
  margin: 0 !important;
}

/* ─── CTA Band ───────────────────────────────────────────────────────────── */
.iam-cta-band,
.wp-block-group.is-style-iam-cta {
  background: var(--iam-blue) !important;
  padding: 56px 40px !important;
  text-align: center !important;
}

.iam-cta-band h2,
.wp-block-group.is-style-iam-cta h2 {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--iam-white) !important;
  margin-bottom: 12px !important;
}

.iam-cta-band p,
.wp-block-group.is-style-iam-cta p {
  font-size: 17px !important;
  color: rgba(255,255,255,0.88) !important;
  margin-bottom: 28px !important;
}

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.iam-badge {
  display: inline-block;
  background: var(--iam-cloud);
  border: 1px solid #b5d4f4;
  color: var(--iam-sea);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--iam-font);
  padding: 4px 14px;
  border-radius: 20px;
  margin: 0 6px 8px 0;
}

/* ─── Official Provider Badge ────────────────────────────────────────────── */
.iam-official-provider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,178,226,0.12);
  border: 1px solid rgba(0,178,226,0.35);
  border-radius: var(--iam-radius-sm);
  padding: 7px 16px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--iam-font);
  color: var(--iam-blue);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.wp-block-template-part[data-slug="footer"],
footer.wp-block-template-part,
.site-footer,
#colophon {
  background: var(--iam-gravel) !important;
  color: rgba(255,255,255,0.75) !important;
}

.site-footer a,
#colophon a {
  color: rgba(255,255,255,0.7) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color 0.2s;
}
.site-footer a:hover,
#colophon a:hover {
  color: var(--iam-blue) !important;
}

.site-footer h5,
.site-footer .wp-block-heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--iam-sky) !important;
  margin-bottom: 14px !important;
}

.site-footer p,
#colophon p {
  font-size: 13px !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.6 !important;
}

/* Footer bottom bar */
.iam-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  margin-top: 32px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* ─── Utility colour helpers ─────────────────────────────────────────────── */
.has-iam-blue-background-color { background-color: var(--iam-blue) !important; }
.has-iam-gravel-background-color { background-color: var(--iam-gravel) !important; }
.has-iam-cloud-background-color { background-color: var(--iam-cloud) !important; }
.has-iam-sea-background-color { background-color: var(--iam-sea) !important; }

.has-iam-blue-color { color: var(--iam-blue) !important; }
.has-iam-gravel-color { color: var(--iam-gravel) !important; }
.has-iam-white-color { color: var(--iam-white) !important; }
.has-iam-sky-color { color: var(--iam-sky) !important; }

/* ─── Separators ─────────────────────────────────────────────────────────── */
.wp-block-separator.is-style-wide {
  border-color: var(--iam-blue) !important;
  border-top-width: 3px !important;
  max-width: 60px !important;
  margin: 0 0 24px !important;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .iam-hero h1 { font-size: 30px !important; }
  .iam-hero p  { font-size: 15px !important; }
  .iam-stats-bar { padding: 18px 20px !important; }
  .iam-cta-band h2 { font-size: 24px !important; }
  .iam-quote-section blockquote p { font-size: 18px !important; }
  .wp-block-columns.iam-cards-grid { flex-direction: column !important; }
}

@media (max-width: 480px) {
  .iam-stats-bar .wp-block-columns {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
}

/* ── Remove sticky header ── */
.wp-block-template-part[data-slug="header"],
header.wp-block-template-part {
  position: relative !important;
  top: auto !important;
}

/* ── Hide WordPress auto page title ── */
.wp-block-post-title {
  display: none !important;
}

/* ── Reduce hero height on inner pages ── */
.iam-hero {
  min-height: 160px !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}


/* ── Match team card photo heights ── */
.wp-image-160,
img[src*="Chair1"] {
  height: 400px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
}

/* ── Hide auto page title ── */
.wp-block-post-title {
  display: none !important;
}

css/* ── Hero heading size ── */
.iam-hero h1 {
  font-size: clamp(24px, 3.5vw, 38px) !important;
}