/* ==========================================================================
   Daine Tutoring — "website" pages theme
   Ported from Daine College's design system (css/styles.css) so the
   marketing/auth pages (index, login, daine-college) feel like the same
   brand. The learning-app pages (hub, flashcards, games, etc.) keep their
   own playful multi-colour system on purpose — this file doesn't touch them.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/fraunces-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/fraunces-italic-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/plusjakarta-latin.woff2) format('woff2');
}

:root{
  --navy:#132048;
  --navy-dark:#0b1530;
  --gold:#c6a15b;
  --gold-light:#e3c98a;
  --gold-ink:#8a6a2f;
  --cream:#faf8f3;
  --paper:#f3efe4;
  --ink:#1c2436;
  --ink-soft:#4a5164;
  --white:#ffffff;
  --line:rgba(19,32,72,0.12);
  --shadow:0 20px 60px rgba(11,21,48,0.12);
  --shadow-soft:0 10px 30px rgba(11,21,48,0.08);
  --font-display:'Fraunces','Georgia',serif;
  --font-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --container:940px;
  --radius:14px;
  --radius-lg:22px;
  --star-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath fill='%23c6a15b' d='M17 0 L20.5 13.5 L34 17 L20.5 20.5 L17 34 L13.5 20.5 L0 17 L13.5 13.5 Z'/%3E%3C/svg%3E");
  --star-gold-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath fill='%23e3c98a' d='M17 0 L20.5 13.5 L34 17 L20.5 20.5 L17 34 L13.5 20.5 L0 17 L13.5 13.5 Z'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.ct{
  margin:0;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.ct img{max-width:100%;display:block;}
.ct a{color:inherit;text-decoration:none;}
.ct ul{list-style:none;margin:0;padding:0;}
.ct h1,.ct h2,.ct h3,.ct h4{
  font-family:var(--font-display);color:var(--navy);font-weight:600;line-height:1.15;letter-spacing:-0.01em;margin:0;
}
.ct h1{font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:630;line-height:1.06;letter-spacing:-0.02em;}
.ct h2{font-size:clamp(1.5rem,2.6vw,2rem);}
.ct p{color:var(--ink-soft);margin:0;}
.ct .container{max-width:var(--container);margin:0 auto;padding:0 28px;}
.ct section{padding:32px 0;}
.ct .section-tight{padding:18px 0;}
@media (max-width:720px){ .ct section{padding:24px 0;} }

/* ---------------- Eyebrow ---------------- */
.ct .eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-style:italic;font-size:0.82rem;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-bottom:14px;
}
.ct .eyebrow::before{
  content:'';width:12px;height:12px;background-image:var(--star-gold);background-size:contain;background-repeat:no-repeat;flex-shrink:0;
}
.ct .on-navy .eyebrow, .ct .hero .eyebrow, .ct .page-hero .eyebrow{color:var(--gold-light);}
.ct .on-navy .eyebrow::before, .ct .hero .eyebrow::before, .ct .page-hero .eyebrow::before{background-image:var(--star-gold-light);}

/* ---------------- Buttons ---------------- */
.ct .btn{
  display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:40px;
  font-family:var(--font-body);font-weight:700;font-size:0.86rem;border:1px solid transparent;
  cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;position:relative;overflow:hidden;
}
.ct .btn-gold::before,.ct .btn-primary::before{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .65s ease;pointer-events:none;
}
.ct .btn-gold:hover::before,.ct .btn-primary:hover::before{left:130%;}
.ct .btn::after{content:'\2192';display:inline-block;transition:transform .25s ease;}
.ct .btn:hover::after{transform:translateX(4px);}
/* Blue button: identical behaviour to Daine College's blue (.btn-ghost) button */
.ct .btn-primary{background:var(--navy);color:var(--white);border-color:transparent;transition:all .6s cubic-bezier(.34,1.56,.64,1);}
.ct .btn-primary:hover{background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 100%);color:var(--white);border-color:var(--white);transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-soft);}
.ct .hero .btn-primary,.ct .cta-band .btn-primary,.ct .site-footer .btn-primary{background:var(--navy);color:var(--white);box-shadow:0 0 0 4px var(--gold);}
.ct .hero .btn-primary:hover,.ct .cta-band .btn-primary:hover,.ct .site-footer .btn-primary:hover{background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 100%);color:var(--navy);box-shadow:none;}
/* Text is navy, not white: white on this gold gradient is only ~2.4:1 contrast,
   well under the 4.5:1 WCAG AA needs, navy is 6.5:1. Applies everywhere,
   including the navy-background contexts below, so nothing has to override it. */
.ct .btn-gold{background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 100%);color:var(--navy);border-color:transparent;box-shadow:0 0 0 4px var(--white);transition:all .6s cubic-bezier(.34,1.56,.64,1);}
.ct .btn-gold:hover{background:var(--navy-dark);color:var(--white);border-color:transparent;transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-soft);}
/* Gold button on a navy background: same rules as Daine College (navy fill and gold ring on hover) */
.ct .hero .btn-gold:hover,.ct .cta-band .btn-gold:hover,.ct .site-footer .btn-gold:hover{background:var(--navy);color:var(--white);box-shadow:0 0 0 4px var(--gold),0 0 18px rgba(198,161,91,.5);}
.ct .btn-outline{background:transparent;border-color:var(--navy);color:var(--navy);}
.ct .btn-outline:hover{background:var(--navy);color:var(--white);}
/* Ghost = Daine College's blue button */
.ct .btn-ghost{background:var(--navy);border-color:transparent;color:var(--white);box-shadow:0 0 0 4px var(--gold);transition:all .6s cubic-bezier(.34,1.56,.64,1);}
.ct .btn-ghost::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .65s ease;pointer-events:none;}
.ct .btn-ghost:hover::before{left:130%;}
.ct .btn-ghost:hover{background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 100%);color:var(--navy);box-shadow:none;transform:translateY(-3px) scale(1.02);}
.ct .btn-sm{padding:7px 15px;font-size:0.78rem;}
/* Buttons sitting side by side share one width */
.ct .hero-actions,.ct .cta-band .actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:fit-content;}
.ct .cta-band .actions{margin-left:auto;margin-right:auto;}
.ct .nav-cta .btn{min-width:112px;justify-content:center;}
.ct .hero-actions .btn,.ct .cta-band .actions .btn{justify-content:center;}
@media (max-width:560px){ .ct .hero-actions,.ct .cta-band .actions{grid-auto-flow:row;width:100%;max-width:340px;} .ct .cta-band .actions{margin-left:auto;margin-right:auto;} }
.ct .btn-block{width:100%;justify-content:center;}

/* ---------------- Nav: ported verbatim (two-tier nav-top/nav-bottom) from Daine College's real header ---------------- */
.ct .site-header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line);}
.ct .site-header::before{content:'';position:absolute;inset:0;background:rgba(250,248,243,.92);backdrop-filter:blur(10px);z-index:-1;}
.ct .site-header::after{content:'';display:block;height:2px;background:linear-gradient(90deg,var(--navy) 0%,var(--gold) 50%,var(--navy) 100%);background-size:200% 100%;animation:ct-gradient-drift 6s linear infinite;}
.ct .nav-top{background-color:var(--white);}
.ct .nav-top-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 28px 10px;max-width:var(--container);margin:0 auto;}
.ct .nav-bottom{border-top:1px solid var(--line);}
.ct .nav-bottom .nav-links{max-width:var(--container);margin:0 auto;padding:9px 28px;}
.ct .nav-links{display:flex;align-items:center;justify-content:center;gap:16px;}
.ct .nav-links a{font-size:0.88rem;font-weight:500;color:var(--ink);position:relative;padding:4px 0;}
.ct .nav-links a::before{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .3s cubic-bezier(.22,1,.36,1);}
.ct .nav-links a:hover{color:var(--navy);}
.ct .nav-links a:hover::before{transform:scaleX(1);}
/* ---- Logo lockup: ported verbatim (structure + animation) from Daine College's own .logo-lockup system ---- */
.ct .logo-lockup{display:inline-flex;flex-direction:column;align-items:flex-start;}
.ct .logo-top-row{display:inline-flex;align-items:center;gap:10px;}
.ct .logo-mark-wrap{position:relative;width:46px;flex-shrink:0;}
.ct .nav-logo-mark{width:100%;height:auto;display:block;}
.ct .nav-logo-mark-glow{position:absolute;inset:0;width:100%;height:auto;pointer-events:none;animation:ct-logo-mark-glow 3.2s ease-in-out infinite;}
.ct .logo-word{font-family:var(--font-display);font-weight:600;font-size:1.4rem;letter-spacing:1.2px;color:var(--navy);line-height:1.1;white-space:nowrap;}
.ct .logo-word.on-dark{color:var(--white);}
.ct .logo-tagline{
  display:block;width:100%;text-align:left;font-family:var(--font-body);font-size:0.6rem;
  letter-spacing:1.8px;font-weight:600;margin-top:3px;
  background:linear-gradient(90deg,#8a6a2f 0%,var(--gold) 25%,var(--gold-light) 50%,var(--gold) 75%,#8a6a2f 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:var(--gold);
  animation:ct-shimmer 5s linear infinite;
}
.ct .logo-tagline.on-dark{
  background:linear-gradient(90deg,var(--gold) 0%,#fff3d6 25%,var(--gold-light) 50%,#fff3d6 75%,var(--gold) 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:var(--gold-light);
}
@supports (-webkit-background-clip:text){ .ct .logo-tagline{-webkit-text-fill-color:transparent;} }

.ct .logo-full{text-align:center;}
.ct .logo-full-img{width:100%;max-width:220px;height:auto;margin:0 auto;animation:ct-logo-mark-glow 3.2s ease-in-out infinite;}
.ct .page-hero-mark{width:60px;height:auto;margin:0 auto 16px;}

@keyframes ct-shimmer{0%{background-position:0% 50%;}100%{background-position:300% 50%;}}
@keyframes ct-logo-mark-glow{
  0%,100%{filter:brightness(1) saturate(1) drop-shadow(0 0 2px rgba(198,161,91,.55));}
  50%{filter:brightness(1.6) saturate(1.5) drop-shadow(0 0 5px rgba(198,161,91,.95));}
}
.ct .nav-cta{display:flex;align-items:center;gap:14px;}

@keyframes ct-gradient-drift{ 0%{background-position:0% 0;} 100%{background-position:200% 0;} }
@keyframes ct-aurora{ 0%{background-position:0% 0%,100% 100%;} 100%{background-position:15% 10%,85% 90%;} }

/* ---------------- Hero (navy, gold glow) ---------------- */
.ct .hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-dark) 100%);color:var(--white);overflow:hidden;padding:36px 0 30px;}
.ct .hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 85% 15%,rgba(198,161,91,.22),transparent 45%),radial-gradient(circle at 10% 90%,rgba(198,161,91,.15),transparent 40%);
  background-size:200% 200%;animation:ct-aurora 16s ease-in-out infinite alternate;pointer-events:none;
}
.ct .hero .container{position:relative;}
.ct .hero h1{color:var(--white);}
.ct .hero p.lede{color:rgba(255,255,255,.8);}
.ct .page-hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-dark) 100%);color:var(--white);padding:30px 0 26px;text-align:center;overflow:hidden;}
.ct .page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(198,161,91,.18),transparent 55%);pointer-events:none;}
.ct .page-hero .container{position:relative;}
.ct .page-hero h1{color:var(--white);max-width:640px;margin:0 auto;}
.ct .page-hero .eyebrow{justify-content:center;}
.ct .page-hero p.lede{color:rgba(255,255,255,.8);max-width:560px;margin:16px auto 0;}

/* ---------------- Cards ---------------- */
.ct .card{background:var(--white);border-radius:var(--radius);padding:28px;border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;}
.ct .card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--navy) 0%,var(--gold) 100%);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.ct .card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent;}
.ct .card:hover::before{transform:scaleX(1);}
.ct .card .icon{
  width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--navy) 0%,#223466 100%);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#fff;
  position:relative;
  box-shadow:inset -6px -8px 14px rgba(0,0,0,0.35), inset 4px 5px 8px rgba(255,255,255,0.3), 0 10px 20px -6px rgba(19,32,72,0.4);
  animation:ct-icon-wobble 2.1s cubic-bezier(.34,1.56,.64,1) infinite;
}
.ct .card .icon::after{
  content:'';position:absolute;top:9%;left:18%;width:34%;height:24%;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 72%);
  pointer-events:none;
}
@keyframes ct-icon-wobble{
  0%,100%{transform:rotate(0deg) scale(1);}
  15%{transform:rotate(9deg) scale(1.04);}
  35%{transform:rotate(-7deg) scale(0.98);}
  55%{transform:rotate(5deg) scale(1.02);}
  75%{transform:rotate(-3deg) scale(1);}
}
.ct .card .icon svg{width:27px;height:27px;position:relative;z-index:1;}
.ct .card:hover .icon{animation:ct-icon-bounce 2.2s cubic-bezier(.22,1.2,.4,1);z-index:2;}
@keyframes ct-icon-bounce{
  0%{transform:scale(1);box-shadow:inset -6px -8px 14px rgba(0,0,0,0.35), inset 4px 5px 8px rgba(255,255,255,0.3), 0 10px 20px -6px rgba(19,32,72,0.4);}
  25%{transform:scale(0.78);box-shadow:inset -6px -8px 14px rgba(0,0,0,0.35), inset 4px 5px 8px rgba(255,255,255,0.3), 0 6px 10px -6px rgba(19,32,72,0.3);}
  55%{transform:scale(1.85);box-shadow:inset -6px -8px 14px rgba(0,0,0,0.35), inset 4px 5px 8px rgba(255,255,255,0.3), 0 30px 36px -8px rgba(19,32,72,0.48);}
  78%{transform:scale(0.92);box-shadow:inset -6px -8px 14px rgba(0,0,0,0.35), inset 4px 5px 8px rgba(255,255,255,0.3), 0 8px 12px -4px rgba(19,32,72,0.22);}
  100%{transform:scale(1);box-shadow:inset -6px -8px 14px rgba(0,0,0,0.35), inset 4px 5px 8px rgba(255,255,255,0.3), 0 10px 20px -6px rgba(19,32,72,0.4);}
}
.ct .card .icon-glyph{display:inline-block;}
.ct .card:hover .icon-glyph{animation:ct-icon-glyph-bounce 3.6s cubic-bezier(.22,1,.32,1);}
@keyframes ct-icon-glyph-bounce{
  0%{transform:scale(1);}
  15%{transform:scale(0.72);}
  34%{transform:scale(2.4);}
  70%{transform:scale(0.9);}
  100%{transform:scale(1);}
}
.ct .card h3,.ct .card h4{margin-bottom:8px;font-size:1.08rem;}
.ct .card p{font-size:0.95rem;}

.ct .check-list{display:flex;flex-direction:column;gap:13px;}
.ct .check-list li{display:flex;align-items:flex-start;gap:12px;font-size:1rem;color:var(--ink);}
.ct .check-list li::before{content:'';width:14px;height:14px;margin-top:4px;background-image:var(--star-gold);background-size:contain;background-repeat:no-repeat;flex-shrink:0;}

/* ---------------- CTA band ---------------- */
.ct .cta-band{position:relative;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%);color:var(--white);text-align:center;padding:30px 0;overflow:hidden;}
.ct .cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(198,161,91,.2),transparent 60%);pointer-events:none;}
.ct .cta-band .container{position:relative;}
.ct .cta-band h2{color:var(--white);max-width:600px;margin:0 auto;}
.ct .cta-band p{color:rgba(255,255,255,.78);max-width:520px;margin:14px auto 28px;}
.ct .cta-band .actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;width:fit-content;margin-left:auto;margin-right:auto;}

/* ---------------- Footer: ported verbatim from Daine College's .footer-columns grid ---------------- */
.ct .site-footer{background:var(--navy-dark);color:rgba(255,255,255,.7);padding-top:32px;}
.ct .footer-columns{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;}
/* A plain full-width rule, independent of the columns above, so this short
   row's own content never gets stretched to match the taller Explore list
   beside it — the same dead-gap bug fixed on the main Daine College site. */
.ct .fc-divider{width:100%;border:none;border-top:1px solid rgba(255,255,255,.12);margin:16px 0;}
.ct .footer-secondary-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;align-items:center;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1);}
.ct .fc-secondary{grid-column:1;}
.ct .fc-register{grid-column:2 / -1;display:flex;justify-content:flex-end;align-items:center;gap:14px;}
@media (max-width:900px){
  .ct .footer-secondary-row{grid-template-columns:1fr;gap:20px;}
  .ct .fc-register{grid-column:1;justify-content:flex-start;}
}
.ct .footer-columns h4{color:var(--white);font-size:0.78rem;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:12px;font-weight:700;}
.ct .footer-columns li{margin-bottom:8px;}
.ct .footer-columns a{font-size:0.86rem;color:rgba(255,255,255,.68);}
.ct .footer-columns a:hover{color:var(--gold-light);}
.ct .footer-columns p{color:rgba(255,255,255,.68);font-size:0.86rem;max-width:320px;}
.ct .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:0.78rem;flex-wrap:wrap;gap:8px;}
@media (max-width:900px){ .ct .footer-columns{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .ct .footer-columns{grid-template-columns:1fr;} }

/* ---------------- Generic section utilities (bg tint, centered headers, card grids) ---------------- */
.ct .bg-paper{background:var(--paper);}
.ct .section-head{max-width:640px;margin-bottom:18px;}
.ct .section-head.center{text-align:center;margin-left:auto;margin-right:auto;}
.ct .section-head p{margin-top:10px;}
.ct .grid{display:grid;gap:24px;}
.ct .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.ct .grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:900px){ .ct .grid-3,.ct .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .ct .grid-3,.ct .grid-4{grid-template-columns:1fr;} }