@import url("fonts.css");

/* ============ Coral Club FAQ — self-contained, scoped under .cf ============ */
.cf, .cf *, .cf *::before, .cf *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cf {
  --ink:#063145;        /* deep ocean — text */
  --deep:#04212e;       /* darkest — footer */
  --ocean:#0077B6;      /* azure */
  --aqua:#00B4D8;       /* primary aqua */
  --sky:#48CAE4;        /* light azure */
  --foam:#CAF0F8;       /* pale aqua */
  --mist:#EAF7FB;       /* section bg */
  --paper:#F6FCFE;      /* near-white aqua */
  --coral:#FF6F61;      /* warm brand accent */
  --coral-deep:#F2553F;
  --glass: rgba(255,255,255,.62);
  --shadow: 0 18px 50px -22px rgba(6,49,69,.45);
  --shadow-sm: 0 8px 26px -14px rgba(6,49,69,.40);
  --r: 22px;
  --display:'Prata', Georgia, serif;
  --body:'Manrope', system-ui, sans-serif;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
}
.cf img { max-width:100%; display:block; }
.cf a { color: inherit; text-decoration: none; }
.cf-wrap { width: min(1180px, 92vw); margin-inline: auto; }
.cf h1,.cf h2,.cf h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; letter-spacing:.2px; }

/* reveal */
.cf [data-rise]{ opacity:0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.cf [data-rise].is-in{ opacity:1; transform:none; }

/* ============ buttons ============ */
.cf-btn{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--body); font-weight:700; font-size:.98rem;
  padding:.85em 1.5em; border-radius:999px; cursor:pointer; border:0; transition:transform .25s, box-shadow .25s, background .25s; }
.cf-btn--coral{ background:linear-gradient(180deg,var(--coral),var(--coral-deep)); color:#fff; box-shadow:0 12px 26px -12px rgba(242,85,63,.8); }
.cf-btn--coral:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(242,85,63,.85); }
.cf-btn--ghost{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(6px); }
.cf-btn--ghost:hover{ background:rgba(255,255,255,.24); transform:translateY(-2px); }

/* ============ header ============ */
.cf-header{ position:sticky; top:0; z-index:50; background:var(--glass); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(6,49,69,.08); }
.cf-nav{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.cf-brand{ display:flex; align-items:center; gap:.6em; font-family:var(--display); font-size:1.25rem; color:var(--ink); }
.cf-brand .cf-drop{ width:34px; height:34px; filter:drop-shadow(0 6px 14px rgba(6,49,69,.20)); }
.cf-brand b{ font-family:var(--body); font-weight:800; letter-spacing:.3px; }
.cf-brand small{ display:block; font-family:var(--body); font-size:.62rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ocean); opacity:.7; margin-top:-2px; }
.cf-menu{ display:flex; align-items:center; gap:1.7rem; }
.cf-menu a{ font-weight:600; font-size:.95rem; color:var(--ink); position:relative; padding:.3em 0; }
.cf-menu a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--coral); transition:width .3s; }
.cf-menu a:hover::after{ width:100%; }
.cf-menu-cta{ display:flex; align-items:center; gap:1rem; }
.cf-burger{ display:none; }

/* ============ hero ============ */
.cf-hero{ position:relative; overflow:hidden; color:#fff; padding:96px 0 170px;
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(255,111,97,.30), transparent 60%),
    radial-gradient(900px 700px at 8% 0%, rgba(72,202,228,.55), transparent 55%),
    linear-gradient(160deg, #0096c7 0%, #0077B6 42%, #045a8d 100%);
}
.cf-hero::before{ /* caustic light sheen */
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px 300px at 50% 8%, rgba(255,255,255,.18), transparent 70%);
  mix-blend-mode:screen; pointer-events:none;
}
.cf-bubbles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.cf-bubble{ position:absolute; bottom:-60px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), rgba(255,255,255,.05) 60%, transparent);
  border:1px solid rgba(255,255,255,.25); animation:cf-float linear infinite; }
@keyframes cf-float{ to{ transform:translateY(-115vh) translateX(28px); opacity:0; } }
.cf-hero-inner{ position:relative; z-index:2; text-align:center; max-width:820px; margin-inline:auto; }
.cf-eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-weight:700; font-size:.72rem; letter-spacing:.25em;
  text-transform:uppercase; padding:.5em 1.1em; border-radius:999px; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.cf-eyebrow i{ width:7px; height:7px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px rgba(255,111,97,.3); }
.cf-hero h1{ font-size:clamp(2.5rem, 6vw, 4.4rem); margin:.5em 0 .35em; text-shadow:0 4px 30px rgba(2,33,46,.3); }
.cf-hero h1 em{ font-style:italic; color:var(--foam); }
.cf-hero p{ font-size:clamp(1rem,1.6vw,1.2rem); color:rgba(255,255,255,.9); max-width:620px; margin:0 auto 2em; }
/* search */
.cf-search{ display:flex; align-items:center; gap:.5rem; background:#fff; border-radius:999px; padding:.5rem .5rem .5rem 1.4rem;
  box-shadow:var(--shadow); max-width:560px; margin:0 auto; }
.cf-search svg{ width:22px; height:22px; color:var(--ocean); flex:0 0 auto; }
.cf-search input{ flex:1; border:0; outline:0; font-family:var(--body); font-size:1rem; color:var(--ink); background:transparent; }
.cf-search input::placeholder{ color:#7795a1; }
.cf-search .cf-btn{ padding:.7em 1.4em; }
.cf-tags{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.cf-tags span{ font-size:.82rem; font-weight:600; color:#fff; padding:.4em .9em; border-radius:999px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.25); transition:background .25s; cursor:pointer; }
.cf-tags span:hover{ background:rgba(255,255,255,.26); }
/* hero wave */
.cf-wave{ position:absolute; left:0; right:0; bottom:-1px; z-index:1; line-height:0; }
.cf-wave svg{ width:200%; height:130px; display:block; animation:cf-drift 18s linear infinite; }
.cf-wave--back svg{ height:150px; opacity:.5; animation-duration:26s; animation-direction:reverse; }
@keyframes cf-drift{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ===== section head (shared heading block) ===== */
.cf-sec-head{ text-align:center; max-width:640px; margin:0 auto 52px; }
.cf-sec-head .cf-kick{ font-weight:800; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--aqua); }
.cf-sec-head h2{ font-size:clamp(2rem,3.6vw,2.9rem); margin:.3em 0; color:var(--ink); }
.cf-sec-head p{ color:#4d6b77; }

/* ============ FAQ accordion ============ */
.cf-faq{ background:linear-gradient(180deg,var(--paper),var(--mist)); padding:14px 0 96px; }
.cf-faq-head{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:1rem; margin-bottom:18px; }
.cf-faq-head h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); color:var(--ink); }
.cf-faq-head .cf-kick{ font-weight:800; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--coral); }
.cf-acc{ display:grid; gap:14px; max-width:1040px; }
.cf-item{ background:#fff; border:1px solid rgba(6,49,69,.08); border-radius:18px; box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color .3s; }
.cf-item.is-open{ border-color:rgba(0,180,216,.45); }
.cf-q{ display:flex; align-items:center; gap:1rem; width:100%; text-align:left; cursor:pointer; background:none; border:0;
  font-family:var(--body); font-weight:700; font-size:1.06rem; color:var(--ink); padding:20px 22px; }
.cf-q .cf-qi{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--mist); color:var(--ocean); position:relative; transition:.3s; }
.cf-item.is-open .cf-qi{ background:var(--coral); color:#fff; transform:rotate(45deg); }
.cf-qi::before,.cf-qi::after{ content:""; position:absolute; background:currentColor; border-radius:2px; }
.cf-qi::before{ width:13px; height:2.4px; }
.cf-qi::after{ width:2.4px; height:13px; }
.cf-q span.t{ flex:1; }
.cf-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.cf-a-in{ padding:0 22px 22px 68px; color:#4d6b77; font-size:.98rem; }
.cf-a-in .cf-ph{ display:inline-block; margin-top:.8em; font-size:.8rem; font-weight:700; color:var(--ocean);
  background:var(--mist); border-radius:8px; padding:.4em .8em; }

/* ============ footer ============ */
.cf-foot{ background:var(--deep); color:rgba(255,255,255,.72); padding:64px 0 28px; font-size:.92rem; }
.cf-foot-grid{ display:grid; grid-template-columns:2fr 1fr; gap:36px; padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1); }
.cf-foot .cf-brand{ color:#fff; margin-bottom:1em; }
.cf-foot .cf-brand small{ color:var(--sky); }
.cf-foot h4{ color:#fff; font-family:var(--body); font-weight:800; font-size:.95rem; margin-bottom:1em; letter-spacing:.02em; }
.cf-foot ul{ list-style:none; display:grid; gap:.7em; }
.cf-foot ul a:hover{ color:var(--sky); }
.cf-foot-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:22px; font-size:.82rem; }
.cf-disc{ max-width:760px; font-size:.78rem; color:rgba(255,255,255,.45); margin-top:18px; line-height:1.5; }

/* ============ responsive ============ */
@media (max-width:1024px){ .cf-foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){
  .cf-menu{ display:none; } .cf-burger{ display:grid; }
  .cf-hero{ padding:64px 0 130px; }
  .cf-foot-grid{ grid-template-columns:1fr; gap:26px; }
  .cf-faq-head{ align-items:flex-start; }
  .cf-a-in{ padding-left:22px; }
}
.cf-burger{ width:44px;height:44px;border-radius:12px;background:rgba(6,49,69,.06);border:0;place-items:center;cursor:pointer;}
.cf-burger span,.cf-burger span::before,.cf-burger span::after{ content:"";display:block;width:20px;height:2px;background:var(--ink);position:relative;}
.cf-burger span::before{ position:absolute;top:-6px;} .cf-burger span::after{ position:absolute;top:6px;}

/* ============ search / filter ============ */
.cf .cf-hidden { display: none !important; }
.cf .cf-empty { text-align: center; color: #4d6b77; padding: 30px 0; font-weight: 600; }
.cf .cf-subhead { font-family: var(--body); font-weight: 800; color: var(--ocean); margin: 40px 0 16px; font-size: 1.18rem; text-transform: uppercase; letter-spacing: .04em; scroll-margin-top: 90px; }
.cf .cf-cat-title { font-family: var(--display); font-weight: 400; color: var(--ink); font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 34px 0 14px; }
.cf .cf-cat:first-child .cf-cat-title { margin-top: 0; }

/* ===== INDEX (rubric directory) ===== */
.cf-index{ position:relative; background:var(--paper); padding:84px 0 48px; }
/* Index uses more of the page width than the rest (it's a wide scan grid) */
.cf-index .cf-wrap{ width:min(1520px,94vw); }
.cf-index .cf-cols{ display:grid; grid-template-columns:repeat(var(--cf-cols,8),1fr); gap:36px 30px; align-items:start; }
/* fixed 2-line height so the underline aligns across columns regardless of title length */
.cf-col-title{ display:block; font-weight:800; font-size:1rem; line-height:1.25; min-height:52px; color:var(--ink); margin-bottom:.8em; padding-bottom:.55em; border-bottom:2px solid rgba(0,180,216,.3); text-decoration:none; }
.cf-col-title:hover{ color:var(--ocean); }
.cf-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6em; }
.cf-col li.cf-col-sub{ font-weight:800; font-size:.84rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ocean); margin-top:1.7em; margin-bottom:.3em; }
.cf-col li.cf-col-sub:first-child{ margin-top:0; }
.cf-col li.cf-col-sub a{ color:var(--ocean); font-size:inherit; font-weight:inherit; text-decoration:none; transition:color .2s; }
.cf-col li.cf-col-sub a:hover{ color:var(--aqua); }
.cf-col a:not(.cf-col-title){ color:#4d6b77; text-decoration:none; font-size:.9rem; line-height:1.4; transition:color .2s; }
.cf-col a:not(.cf-col-title):hover{ color:var(--aqua); }

/* expand/collapse-all controls */
.cf-toggle-all{ display:flex; gap:.5rem; flex-wrap:wrap; }
.cf-toggle-all button{ font-size:.82rem; font-weight:700; padding:.5em 1em; border-radius:999px; background:#fff; color:#56727d; border:1px solid rgba(6,49,69,.12); cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.cf-toggle-all button:hover{ background:var(--aqua); color:#fff; border-color:var(--aqua); }

/* target highlight when jumping from index */
.cf-flash{ animation:cfFlash 1.2s ease; }
@keyframes cfFlash{ 0%{ box-shadow:0 0 0 3px rgba(255,111,97,0);} 30%{ box-shadow:0 0 0 3px rgba(255,111,97,.55);} 100%{ box-shadow:0 0 0 3px rgba(255,111,97,0);} }

@media (max-width:1000px){ .cf-index .cf-cols{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:600px){ .cf-index{ display:none; } }
@media (prefers-reduced-motion: reduce){ .cf-flash{ animation:none; } }