/* TeenWorks theme
   Primary Blue: #0063FD
   Accent Green: #9CD809
   Dark: #0B1020
*/

:root{
  --tw-blue:#0063fd;
  --tw-blue-2:#0353ea;
  --tw-green:#9cd809;
  --tw-dark:#0b1020;
  --tw-dark-2:#121a2e;
  --tw-text:#0f172a;
}

html,body{height:100%;}
body{
  color: var(--tw-text);
  background: #0b0f1a;
  background-image:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,99,253,.25), transparent 60%),
    radial-gradient(1200px 600px at 90% 10%, rgba(156,216,9,.20), transparent 60%),
    radial-gradient(1000px 500px at 50% 110%, rgba(0,99,253,.15), transparent 55%);
}

.tw-nav{
  background: rgba(11,16,32,.80);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.tw-logo{height:85px; width:auto;}

.navbar-dark .navbar-nav .nav-link{
  color: rgba(255,255,255,.85);
}
.navbar-dark .navbar-nav .nav-link:hover{
  color: #fff;
}
.navbar-dark .navbar-nav .nav-link.active{
  color: #fff;
  position: relative;
}
.navbar-dark .navbar-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left:.5rem;
  right:.5rem;
  bottom:.25rem;
  height:2px;
  background: linear-gradient(90deg,var(--tw-blue),var(--tw-green));
  border-radius: 99px;
  opacity:.95;
}

.tw-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  border-radius: 18px;
}

.tw-hero{
  padding: 64px 0 40px;
}
.tw-hero h1{
  letter-spacing: -0.02em;
}
.tw-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  font-size: .9rem;
}
.tw-grad{
  background: linear-gradient(90deg,var(--tw-blue),var(--tw-green));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}

.btn-tw-primary{
  background: var(--tw-green);
  border: none;
  color: #081018;
  font-weight: 700;
}
.btn-tw-primary:hover{filter: brightness(1.05);}

.btn-tw-secondary{
  background: var(--tw-blue);
  border: none;
  color: #ffffff;
  font-weight: 700;
}
.btn-tw-secondary:hover{filter: brightness(1.05);}

.btn-tw-primary:hover{filter: brightness(1.05);}
.btn-tw-ghost{
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.9);
}
.btn-tw-ghost:hover{background: rgba(255,255,255,.06);}


.tw-section-title{
  color:#fff;
  margin-bottom: .5rem;
}
.tw-section-sub{
  color: rgba(255,255,255,.75);
}

.tw-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,99,253,.12);
  border: 1px solid rgba(0,99,253,.22);
}

.tw-footer{
  background: rgba(11,16,32,.92);
  border-top: 1px solid rgba(255,255,255,.08);
}
.tw-link{
  color: rgba(255,255,255,.85);
  text-decoration:none;
}
.tw-link:hover{color:#fff; text-decoration: underline;}

.tw-form{
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.tw-note{
  color: rgba(255,255,255,.75);
  font-size: .95rem;
}


/* Newsletter bar + footer layout (matches sample) */
.tw-newsbar{
  background: var(--tw-blue);
}
.tw-newsbar h3{color:#fff; font-weight:800; margin:0;}
.tw-newsbar p{color: rgba(255,255,255,.85); margin:0;}

.tw-newsbar .tw-news-form{
  max-width: 560px;
}
.tw-newsbar .tw-news-input{
  border: none;
  height: 52px;
  border-radius: 14px 0 0 14px;
  padding: 0 16px;
}
.tw-newsbar .tw-news-btn{
  height: 52px;
  border-radius: 0 14px 14px 0;
  background: var(--tw-green);
  border: none;
  color: #081018;
  font-weight: 800;
}
.tw-newsbar .tw-news-btn:hover{filter: brightness(1.04);}

.tw-footer{
  background: linear-gradient(180deg, rgba(18,26,46,0.92), rgba(11,16,32,0.98));
  color: rgba(255,255,255,.85);
}
.tw-footer .tw-footer-title{
  color:#fff;
  font-weight:800;
  font-size: .95rem;
  margin-bottom: 14px;
}
.tw-footer .tw-footer-link{
  color: rgba(255,255,255,.75);
  text-decoration:none;
}
.tw-footer .tw-footer-link:hover{
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.tw-footer .tw-footer-muted{color: rgba(255,255,255,.65);}
.tw-footer .tw-footer-divider{
  border-top: 1px solid rgba(255,255,255,.08);
}
.tw-social-circle{
  display:inline-flex;
  width: 38px; height: 38px;
  border-radius: 50%;
  align-items:center; justify-content:center;
  background: rgba(255,255,255,.10);
  color:#fff;
  text-decoration:none;
  margin-left: 10px;
}
.tw-social-circle:hover{
  background: rgba(255,255,255,.18);
  color:#fff;
}

/* ===== TeenWorks v4 Final Styling (Header dark, content light, hero dark) ===== */

/* TeenWorks theme
   Primary Blue: #0063FD
   Accent Green: #9CD809
   Dark: #0B1020
*/

:root{
  --tw-blue:#0063fd;
  --tw-blue-2:#0353ea;
  --tw-green:#9cd809;
  --tw-dark:#0b1020;
  --tw-dark-2:#121a2e;
  --tw-text:#0f172a;
  --tw-bg:#F5F7FB;
}

html,body{height:100%;}

/* Light default page background + readable headings */
body{
  background: var(--tw-bg) !important;
  color: var(--tw-text);
}
h1,h2,h3,h4,h5,h6{ color: var(--tw-text); }

/* ===== Header/NAV: keep v1 look for header only ===== */
.tw-nav{
  background: rgba(11,16,32,.80) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.navbar-dark .navbar-nav .nav-link{
  color: rgba(255,255,255,.85) !important;
}
.navbar-dark .navbar-nav .nav-link:hover{ color:#fff !important; }
.navbar-dark .navbar-nav .nav-link.active{
  color:#fff !important;
  position:relative;
}
.navbar-dark .navbar-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left:.5rem; right:.5rem;
  bottom:.25rem;
  height:2px;
  background: linear-gradient(90deg,var(--tw-blue),var(--tw-green));
  border-radius: 99px;
  opacity:.95;
}

/* Bigger logo */
.tw-logo{height:85px; width:auto; display:block;}

/* ===== Hero: dark with gradients like v1 ===== */
.tw-hero{
  padding: 64px 0 40px;
  color: rgba(255,255,255,.92);
  background: #0b0f1a;
  background-image:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,99,253,.25), transparent 60%),
    radial-gradient(1200px 600px at 90% 10%, rgba(156,216,9,.20), transparent 60%),
    radial-gradient(1000px 500px at 50% 110%, rgba(0,99,253,.15), transparent 55%);
}
.tw-hero h1,.tw-hero h2,.tw-hero h3{ color:#fff; }

.tw-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  font-size: .9rem;
}
.tw-grad{
  background: linear-gradient(90deg,var(--tw-blue),var(--tw-green));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}

/* Cards */
.tw-card, .tw-form{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  border-radius: 18px;
}

/* Fix headings on light pages */
.tw-section-title{ color: var(--tw-text); margin-bottom:.5rem; }
.tw-section-sub{ color: rgba(15,23,42,.75); }

/* ===== Buttons: solid brand colors + slightly lighter hover ===== */
.btn-primary,
.btn-tw-primary,
.tw-news-btn{
  background: var(--tw-green) !important;
  border-color: var(--tw-green) !important;
  color: #081018 !important;
  font-weight: 700;
}
.btn-primary:hover,
.btn-tw-primary:hover,
.tw-news-btn:hover{
  background: #AEEA11 !important;
  border-color: #AEEA11 !important;
  color: #081018 !important;
}
.btn-primary:active,
.btn-tw-primary:active,
.tw-news-btn:active{
  background: #92C807 !important;
  border-color: #92C807 !important;
}

.btn-secondary,
.btn-tw-secondary{
  background: var(--tw-blue) !important;
  border-color: var(--tw-blue) !important;
  color: #fff !important;
  font-weight: 700;
}
.btn-secondary:hover,
.btn-tw-secondary:hover{
  background: #2A7BFF !important;
  border-color: #2A7BFF !important;
  color: #fff !important;
}
.btn-secondary:active,
.btn-tw-secondary:active{
  background: #0057E6 !important;
  border-color: #0057E6 !important;
}

.btn:focus{ box-shadow: 0 0 0 .25rem rgba(0,99,253,.20) !important; }

/* Newsletter bar cobalt blue */
.tw-newsbar{
  background: var(--tw-blue);
  color:#fff;
}
.tw-newsbar h3{ color:#fff; font-weight:800; }
.tw-newsbar p{ color: rgba(255,255,255,.90); margin:0; }
.tw-news-input{ border: 1px solid rgba(255,255,255,.25); }
.tw-news-input:focus{
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 0 0 .25rem rgba(255,255,255,.12);
}

/* Footer */
.tw-footer{
  background: rgba(11,16,32,.92);
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.80);
}
.tw-footer-title{
  color:#fff;
  font-weight:800;
  font-size: 1.05rem;
  margin-bottom: .75rem;
}
.tw-footer-muted{ color: rgba(255,255,255,.78); }
.tw-footer-link{
  color: rgba(255,255,255,.90);
  text-decoration:none;
}
.tw-footer-link:hover{ color:#fff; text-decoration: underline; }
.tw-footer-divider{ height:1px; background: rgba(255,255,255,.10); }

.tw-social-circle{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
  text-decoration:none;
}
.tw-social-circle i{ font-size: 1.35rem; }
.tw-social-circle:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
  color:#fff;
}

/* Policy pages: right-hand section nav */
.tw-sidebox{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 16px;
  position: sticky;
  top: 90px;
}
.tw-sidebox-title{ font-weight: 800; margin-bottom: 10px; }
.tw-sidebox a{
  display:block;
  padding: 6px 0;
  color: var(--tw-text);
  text-decoration:none;
}
.tw-sidebox a:hover{ text-decoration: underline; }


/* ===== v4 FIX PACK: contrast + header ===== */

/* Keep overall pages light */
body{ background:#F5F7FB !important; color: var(--tw-text,#0f172a) !important; }
h1,h2,h3,h4,h5,h6{ color: var(--tw-text,#0f172a) !important; }

/* Navbar must stay dark glass */
.tw-nav{
  background: rgba(11,16,32,.80) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.navbar-dark .navbar-nav .nav-link{ color: rgba(255,255,255,.85) !important; }
.navbar-dark .navbar-nav .nav-link:hover{ color:#fff !important; }

/* Bigger logo, tighter brand spacing */
.tw-logo{ height:85px !important; width:auto !important; display:block !important; }
.navbar-brand{ padding-top:0 !important; padding-bottom:0 !important; }

/* Hero stays dark */
.tw-hero{
  background: #0b0f1a !important;
  background-image:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,99,253,.25), transparent 60%),
    radial-gradient(1200px 600px at 90% 10%, rgba(156,216,9,.20), transparent 60%),
    radial-gradient(1000px 500px at 50% 110%, rgba(0,99,253,.15), transparent 55%) !important;
  color: rgba(255,255,255,.92) !important;
}
.tw-hero h1,.tw-hero h2,.tw-hero h3,.tw-hero h4,.tw-hero h5,.tw-hero h6{ color:#fff !important; }
.tw-hero .text-muted{ color: rgba(255,255,255,.75) !important; }

/* FIX: headings/text inside white cards must never be white */
.tw-card h1,.tw-card h2,.tw-card h3,.tw-card h4,.tw-card h5,.tw-card h6{ color: var(--tw-text,#0f172a) !important; }
.tw-card .text-white, .tw-card .text-white-50{ color: var(--tw-text,#0f172a) !important; opacity: .9 !important; }
.tw-card .text-white-50{ opacity: .75 !important; }

/* Button hover: slightly lighter (never white) */
.btn-primary:hover,.btn-tw-primary:hover,.tw-news-btn:hover{ background:#AEEA11 !important; border-color:#AEEA11 !important; }
.btn-secondary:hover,.btn-tw-secondary:hover{ background:#2A7BFF !important; border-color:#2A7BFF !important; }

/* Contact page: force light Turnstile container area to be readable */
.cf-turnstile{ background: transparent !important; }


/* ===== Contact page readability fixes ===== */
.tw-card .tw-link{ color: var(--tw-blue,#0063fd); }
.tw-card .tw-link:hover{ color: var(--tw-blue-2,#0353ea); }

/* Ensure card text is dark on light cards */
.tw-card, .tw-card *{ color: var(--tw-text,#0f172a); }
.tw-card .text-muted{ color: rgba(15,23,42,.70) !important; }

/* Social follow buttons on light cards */
.tw-card .btn-outline-secondary{
  border-color: rgba(15,23,42,.25);
  color: rgba(15,23,42,.85);
}
.tw-card .btn-outline-secondary:hover{
  border-color: rgba(15,23,42,.35);
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.95);
}


/* FORCE TeenWorks header logo size (logo-header-v2.png) */
nav .navbar-brand img.tw-logo{
  height: 85px !important;
  max-height: none !important;
  width: auto !important;
  display:block !important;
}
.navbar-brand{ padding-top:0 !important; padding-bottom:0 !important; }

.tw-footer-tagline{
  color: var(--tw-green);
  font-weight: 700;
  letter-spacing: .2px;
  text-shadow: 0 0 12px rgba(156,216,9,.25);
}

.tw-footer-tagline em{
  font-style: normal;
  text-decoration: underline;
}