/*
Theme Name: CCRF
Theme URI: https://childcancerresearch.com.au
Description: Custom theme for the Child Cancer Research Foundation, built from the approved CCRF design system (Poppins, navy/red/cyan/gold, lightly-softened 4px shapes). Classic theme driven by ACF + Gravity Forms.
Author: CCRF Build Team
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: ccrf
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --navy: #283670;
  --navy-hover: #1d2a5c;
  --navy-deep: #0E1A3D;
  --navy-deep-2: #0D1A3C;
  --red: #EC2027;
  --red-hover: #d11820;
  --cyan: #00B9DB;
  --gold: #FFCB05;
  --gold-deep: #C8920A;
  --cream: #FAF8F4;
  --hairline: #E7E1D7;
  --blue-tint: #E4F6FB;
  --ink: #4A5066;
  --ink-2: #39506B;
  --muted: #6F6557;
  --muted-2: #9097BC;
  --line: #D7DAE6;

  --maxw: 1240px;
  --radius: 4px;
  --radius-sm: 3px;

  --pad-y: clamp(54px, 6.5cqi, 108px);
  --pad-x: clamp(20px, 4cqi, 80px);

  --font: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ----------------------------------------------------------------
     Shared form-control + button tokens. These are the SINGLE source
     of truth for field and button appearance. Native theme controls,
     Gravity Forms (css/gravity.css) and WooCommerce (css/woocommerce.css)
     all reference these so every form on the site matches.
     ---------------------------------------------------------------- */
  --field-border-color: var(--line);   /* #D7DAE6 */
  --field-radius: var(--radius);
  --field-pad: 13px 15px;
  --field-fs: 15px;
  --field-bg: #fff;
  --field-text: var(--navy);
  --field-placeholder: #9097BC;
  --field-focus-ring: 0 0 0 3px rgba(40, 54, 112, .12);

  --btn-pad: 14px 28px;
  --btn-fs: 15px;
  --btn-radius: var(--radius);
  --btn-red-shadow: 0 6px 18px -6px rgba(236, 32, 39, .5);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: #1B2236;
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a { color: var(--red); }

/* Container-query shell: the whole site lives inside this so the design's
   cqi-based clamp() sizing behaves exactly as authored. */
.ccrf-shell {
  container-type: inline-size;
  width: 100%;
  overflow-x: clip;
  background: #fff;
  color: #1B2236;
}

.ccrf-wrap { max-width: var(--maxw); margin: 0 auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible { outline: 3px solid rgba(40,54,112,.5); outline-offset: 2px; }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}
.eyebrow--red { color: var(--red); }
.eyebrow--gold { color: var(--gold-deep); }
.eyebrow--navy { color: var(--navy); }

/* Generic CCRF buttons (used outside content) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--radius);
  padding: 14px 28px;
  cursor: pointer;
  border: none;
  line-height: 1.1;
}
.btn--red { background: var(--red); color: #fff; box-shadow: 0 6px 18px -6px rgba(236,32,39,.5); }
.btn--red:hover { background: var(--red-hover); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-hover); }
.btn--ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--navy); }

/* Diagonal-hatch image placeholder helper */
.ccrf-ph {
  background-image: repeating-linear-gradient(135deg,#E7DFD4 0 14px,#EFE9DF 14px 28px);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 18px;
}
.ccrf-ph__cap {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: #A89C8C;
  text-transform: uppercase;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.ccrf-header { position: relative; z-index: 50; font-family: var(--font); }

.ccrf-utility {
  background: var(--navy);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: .02em;
}
.ccrf-utility__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 7px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ccrf-utility__inner > span:first-child { opacity: .85; }
.ccrf-utility__social { display: flex; gap: 14px; align-items: center; opacity: .9; }
.ccrf-utility__social a { color: #fff; display: flex; align-items: center; }
.ccrf-utility__social a:hover { color: var(--cyan); }

.ccrf-bar {
  background: #fff;
  border-bottom: 1px solid #ECEDF3;
}
.ccrf-bar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.ccrf-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.ccrf-logo img { height: 58px; width: auto; display: block; }
.ccrf-bar__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ccrf-contact-btn {
  text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--navy);
  padding: 11px 20px; border: 1.5px solid var(--line); border-radius: var(--radius);
}
.ccrf-contact-btn:hover { border-color: var(--navy); }
.ccrf-donate-btn {
  text-decoration: none; font-weight: 700; font-size: 14.5px; color: #fff;
  background: var(--red); padding: 12px 28px; border-radius: var(--radius);
  box-shadow: 0 6px 18px -6px rgba(236,32,39,.5);
}
.ccrf-donate-btn:hover { background: var(--red-hover); }

/* primary nav row */
.ccrf-primary { border-top: 1px solid #ECEDF3; background: #fff; }
.ccrf-nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 54px;
}
.ccrf-nav__item { position: relative; display: flex; align-items: stretch; }
.ccrf-nav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 0 17px; height: 54px;
  text-decoration: none; font-weight: 600; font-size: 15px; color: var(--navy);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.ccrf-nav__item:hover > .ccrf-nav__link,
.ccrf-nav__item:focus-within > .ccrf-nav__link { color: var(--red); border-bottom-color: var(--red); }
.ccrf-nav__caret { font-size: 9px; opacity: .5; transform: translateY(1px); }

.ccrf-mega {
  position: absolute;
  top: 100%;
  left: 0;
  width: var(--mega-w, auto);
  background: #fff;
  border: 1px solid #ECEDF3;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 24px 50px -20px rgba(40,54,112,.28);
  overflow: hidden;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.ccrf-nav__item--right .ccrf-mega { left: auto; right: 0; }
.ccrf-nav__item:hover > .ccrf-mega,
.ccrf-nav__item:focus-within > .ccrf-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.ccrf-mega__inner { display: flex; gap: 36px; padding: 30px 32px; }
.ccrf-mega__cols { display: flex; gap: 40px; flex: 1; }
.ccrf-mega__col { min-width: 170px; }
.ccrf-mega__title {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 14px;
}
.ccrf-mega__links { display: flex; flex-direction: column; gap: 11px; }
.ccrf-mega__links a { text-decoration: none; font-size: 15px; font-weight: 500; color: #3A4256; }
.ccrf-mega__links a:hover { color: var(--red); }
.ccrf-mega__feature {
  width: 236px; flex-shrink: 0; text-decoration: none; border-radius: var(--radius);
  overflow: hidden; background: #F6F7FB; border: 1px solid #ECEDF3; display: block;
}
.ccrf-mega__feature:hover { border-color: var(--cyan); }
.ccrf-mega__feature-img {
  height: 118px;
  background-image: repeating-linear-gradient(135deg,#E5E8F2 0 9px,#EDEFF6 9px 18px);
  display: flex; align-items: center; justify-content: center;
}
.ccrf-mega__feature-img span {
  font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .08em;
  color: #9499AE; text-transform: uppercase;
}
.ccrf-mega__feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccrf-mega__feature-body { padding: 15px 16px 17px; }
.ccrf-mega__feature-label { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 8px; }
.ccrf-mega__feature-cta { font-size: 13px; font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: 5px; }

/* mobile header */
.ccrf-mobile { display: none; background: #fff; border-bottom: 1px solid #ECEDF3; }
.ccrf-mobile__bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; height: 60px; }
.ccrf-mobile__bar .ccrf-logo img { height: 40px; }
.ccrf-mobile__actions { display: flex; align-items: center; gap: 10px; }
.ccrf-mobile__donate { text-decoration: none; font-weight: 700; font-size: 13px; color: #fff; background: var(--red); padding: 9px 16px; border-radius: var(--radius); }
.ccrf-burger {
  border: none; background: #F2F3F8; width: 42px; height: 42px; border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 0;
}
.ccrf-burger span { width: 18px; height: 2px; background: var(--navy); border-radius: 2px; }
.ccrf-drawer { display: none; border-top: 1px solid #ECEDF3; background: #fff; }
.ccrf-drawer.is-open { display: block; }
.ccrf-drawer__item { border-bottom: 1px solid #F1F2F7; }
.ccrf-drawer__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: none; border: none; cursor: pointer; font-family: inherit;
  text-decoration: none;
}
.ccrf-drawer__toggle span:first-child { font-weight: 600; font-size: 16px; color: var(--navy); }
.ccrf-drawer__chev { font-size: 11px; color: #9499AE; transition: transform .2s; }
.ccrf-drawer__item.is-expanded .ccrf-drawer__chev { transform: rotate(180deg); }
.ccrf-drawer__sub { display: none; padding: 2px 20px 18px; flex-direction: column; gap: 2px; }
.ccrf-drawer__item.is-expanded .ccrf-drawer__sub { display: flex; }
.ccrf-drawer__sub a {
  text-decoration: none; font-size: 15px; font-weight: 500; color: #5A6075;
  padding: 9px 0 9px 14px; border-left: 2px solid #E6E8F0;
}
.ccrf-drawer__cta { padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.ccrf-drawer__cta a { text-decoration: none; text-align: center; border-radius: var(--radius); }
.ccrf-drawer__cta .donate { font-weight: 700; font-size: 15px; color: #fff; background: var(--red); padding: 14px; }
.ccrf-drawer__cta .contact { font-weight: 600; font-size: 15px; color: var(--navy); border: 1.5px solid var(--line); padding: 13px; }

@container (max-width: 980px) {
  .ccrf-header__desktop { display: none; }
  .ccrf-mobile { display: block; }
}
/* Fallback for browsers/contexts without container support on the shell */
@media (max-width: 980px) {
  .ccrf-header__desktop { display: none; }
  .ccrf-mobile { display: block; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.ccrf-footer { background: var(--navy-deep-2); color: #fff; font-family: var(--font); }

.ccrf-newsletter { padding: clamp(14px,1.5cqi,22px) var(--pad-x); background: var(--gold); }
.ccrf-newsletter__inner {
  max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap;
  gap: clamp(20px,3cqi,48px); align-items: center; justify-content: space-between;
}
.ccrf-newsletter__text { min-width: 280px; flex: 1; }
.ccrf-newsletter__text h2,
.ccrf-newsletter__text h3 { font-size: clamp(24px,3.4cqi,38px); font-weight: 700; letter-spacing: -.015em; color: var(--navy); margin: 0 0 8px; }
.ccrf-newsletter__text p { font-size: 16px; line-height: 1.5; color: #5a4d12; margin: 0; }
.ccrf-newsletter__form { display: flex; flex-wrap: wrap; gap: 10px; min-width: 280px; flex: 1; }
.ccrf-newsletter__form input[type=email] {
  flex: 1; min-width: 200px; border: none; padding: 16px 22px; font-family: inherit;
  border-radius: var(--radius); font-size: 15px; color: var(--navy); outline: none;
}
.ccrf-newsletter__form button {
  border: none; font-weight: 700; font-size: 15px; color: #fff; background: var(--navy);
  padding: 16px 30px; cursor: pointer; border-radius: var(--radius); font-family: inherit;
}
.ccrf-newsletter__form button:hover { background: var(--navy-hover); }

.ccrf-footer__top { padding: clamp(48px,5cqi,72px) var(--pad-x) clamp(40px,4cqi,60px); }
.ccrf-footer__cols { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(34px,4cqi,60px); }
.ccrf-fcol--brand { flex: 1.7; min-width: 270px; }
.ccrf-fcol--brand img.logo { height: 58px; width: auto; display: block; margin-bottom: 24px; }
.ccrf-fcol--brand p { font-size: 15px; line-height: 1.55; color: #C9CEE4; margin: 0; max-width: 30ch; font-weight: 500; }
.ccrf-badges { display: flex; align-items: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.ccrf-badges .acnc { height: 78px; width: auto; display: block; }
.ccrf-badges .fia-chip { background: #fff; display: inline-flex; align-items: center; border-radius: var(--radius); overflow: hidden; }
.ccrf-badges .fia-chip img { height: 50px; width: auto; display: block; }
.ccrf-lottery { margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.ccrf-lottery__label { font-size: 14px; font-weight: 600; color: #C9CEE4; }
.ccrf-lottery img { height: 56px; width: auto; display: block; }

.ccrf-fcol { flex: 1; min-width: 150px; }
.ccrf-fcol--involved { flex: 1.1; min-width: 180px; }
.ccrf-fcol--contact { flex: 1.5; min-width: 250px; }
.ccrf-fhead { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.ccrf-fhead span.bar { width: 5px; height: 26px; background: var(--gold); flex-shrink: 0; }
.ccrf-fhead span.txt { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.ccrf-flinks { display: flex; flex-direction: column; gap: 14px; }
.ccrf-flinks a { display: flex; align-items: center; gap: 12px; color: #C9CEE4; text-decoration: none; font-size: 15px; }
.ccrf-flinks a:hover { color: #fff; }
.ccrf-flinks a .arrow { width: 6px; height: 6px; border-top: 1.6px solid #7E89B0; border-right: 1.6px solid #7E89B0; transform: rotate(45deg); flex-shrink: 0; }
.ccrf-fhead--mt { margin: 36px 0 22px; }
.ccrf-social { display: flex; gap: 12px; }
.ccrf-social a { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ccrf-social a:hover { opacity: .85; }
.ccrf-social a.fb { background: #1877F2; }
.ccrf-social a.li { background: #0A66C2; }
.ccrf-social a.tw { background: #1DA1F2; }
.ccrf-social a.ig { background: #E1306C; }
.ccrf-contact-list { display: flex; flex-direction: column; gap: 18px; font-size: 15px; line-height: 1.4; color: #C9CEE4; }
.ccrf-contact-list a, .ccrf-contact-list span.row { display: flex; gap: 12px; align-items: flex-start; color: #C9CEE4; text-decoration: none; }
.ccrf-contact-list a:hover { color: #fff; }
.ccrf-contact-list a.break { word-break: break-word; }
.ccrf-contact-list svg { flex-shrink: 0; margin-top: 1px; }

.ccrf-ack { background: #fff; color: #13213F; padding: clamp(20px,2.5cqi,34px) var(--pad-x); }
.ccrf-ack__inner { max-width: var(--maxw); margin: 0 auto; }
.ccrf-ack__row { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.ccrf-ack__row > p, .ccrf-ack__text { flex: 1; min-width: 300px; }
.ccrf-ack__row p { font-size: clamp(12px,1.05cqi,13.5px); line-height: 1.5; color: #13213F; margin: 0; font-weight: 500; }
.ccrf-ack__text { display: grid; gap: 10px; }
.ccrf-flags { display: flex; gap: 13px; align-items: center; flex-shrink: 0; }
.ccrf-flags img { width: 54px; height: auto; display: block; box-shadow: 0 0 0 1px rgba(19,33,63,.12); }
.ccrf-ack__rule { height: 1px; background: #D7DBE6; margin: clamp(14px,1.6cqi,20px) 0; }
.ccrf-ack__statement { font-size: clamp(12px,1.05cqi,13.5px); line-height: 1.5; color: #13213F; margin: 0 auto; font-weight: 500; text-align: center; max-width: 104ch; }

.ccrf-footer__bottom { background: var(--navy-deep-2); padding: clamp(28px,3cqi,42px) var(--pad-x) clamp(22px,2.5cqi,32px); }
.ccrf-footer__bottom-inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.ccrf-footer__bottom-inner > p { font-size: 14px; line-height: 1.5; color: #8E97BC; margin: 0 0 18px; }
.ccrf-footer__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; align-items: center; font-size: 14px; font-weight: 600; color: #E3E7F4; }
.ccrf-footer__meta a { color: #E3E7F4; text-decoration: none; }
.ccrf-footer__meta a:hover { color: #fff; }
.ccrf-footer__meta .sep { color: #41507F; }

/* Section / card / template component helpers live in css/components.css.   */

/* ============================================================
   Editor colour palette → front-end classes
   (classic themes must ship these; theme.json themes get them free)
   ============================================================ */
.has-navy-color { color: #283670 !important; }
.has-navy-background-color { background-color: #283670 !important; }
.has-navy-deep-color { color: #0E1A3D !important; }
.has-navy-deep-background-color { background-color: #0E1A3D !important; }
.has-red-color { color: #EC2027 !important; }
.has-red-background-color { background-color: #EC2027 !important; }
.has-cyan-color { color: #00B9DB !important; }
.has-cyan-background-color { background-color: #00B9DB !important; }
.has-gold-color { color: #FFCB05 !important; }
.has-gold-background-color { background-color: #FFCB05 !important; }
.has-ink-color { color: #4A5066 !important; }
.has-ink-background-color { background-color: #4A5066 !important; }
.has-muted-color { color: #6F6557 !important; }
.has-muted-background-color { background-color: #6F6557 !important; }
.has-cream-color { color: #FAF8F4 !important; }
.has-cream-background-color { background-color: #FAF8F4 !important; }
.has-blue-tint-color { color: #E4F6FB !important; }
.has-blue-tint-background-color { background-color: #E4F6FB !important; }
.has-white-color { color: #FFFFFF !important; }
.has-white-background-color { background-color: #FFFFFF !important; }

/* Editor font-size palette → front-end classes */
.has-small-font-size { font-size: 14px !important; }
.has-regular-font-size { font-size: 17px !important; }
.has-large-font-size { font-size: 20px !important; }
.has-x-large-font-size { font-size: 24px !important; }
.has-xx-large-font-size { font-size: 30px !important; }
.has-display-font-size { font-size: 40px !important; line-height: 1.1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}