/*!
 * Science Tek - Stylesheet
 * Replicates the GeneratePress-based architecture of flexipclink.com:
 *   - Unsemantic-style grid (25/75 split, left sidebar)
 *   - Red primary navigation (#cb2026) with hover (#9f191e)
 *   - Blue accent links (#0062a0)
 *   - Noto Sans typography, 16px base, 1.5 line-height
 *   - Header hero with fixed-attachment background
 *   - Three-column footer widget area
 * Class names deliberately mirror the source theme
 * (grid-container, grid-parent, grid-25, grid-75, inside-article, widget, etc.)
 */

/* ---------- Reset & Root Tokens ---------- */
*,*::before,*::after { box-sizing: border-box; }
:root {
  --contrast:#222;
  --contrast-2:#575760;
  --contrast-3:#b2b2be;
  --base:#f0f0f0;
  --base-2:#f7f8f9;
  --base-3:#fff;
  --accent:#0062a0;
  --accent-hover:#111;
  --nav-bg:#cb2026;
  --nav-bg-hover:#9f191e;
  --body-bg:#eaeced;
  --body-text:#333;
  --footer-text:#444;
  --muted:#595959;
  --border:#eaeced;
  --container-max:1100px;
  --content-pad:40px;
  --content-pad-sm:30px;
}

html { scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  color:var(--body-text);
  background-color:var(--body-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--accent);text-decoration:none;}
a:hover,a:focus,a:active{color:var(--accent-hover);text-decoration:underline;}
img{max-width:100%;height:auto;vertical-align:bottom;}
figure{margin:0;}

/* ---------- Accessibility ---------- */
.screen-reader-text{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  width:1px;height:1px;overflow:hidden;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#000;color:#fff;padding:10px 15px;
}
.skip-link:focus{left:10px;top:10px;}

/* ---------- Grid (Unsemantic-style, class names preserved) ----------
   We keep the flexipclink class names (grid-container, grid-25, grid-75,
   push-25, pull-75) so the markup remains template-compatible, but the
   two-column page layout is implemented with modern CSS Grid to avoid
   the float/overlap bugs of the original unsemantic grid. */

.grid-container{
  max-width:var(--container-max);
  margin-left:auto;margin-right:auto;
  padding-left:10px;padding-right:10px;
}
.grid-parent{padding:0;}

/* The page's two-column area — flexbox with explicit order so the sidebar
   lives on the LEFT even though it comes after main content in the DOM.
   Implemented with high-specificity selectors + !important so legacy
   float/width rules from the template class names cannot override. */
.site > .site-content,
.site-content#content{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:30px;
  padding:30px 0;
  width:100%;
}
.site-content > .content-area,
.site-content > #primary{
  order:2 !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  float:none !important;
  margin:0 !important;
}
.site-content > .widget-area,
.site-content > #left-sidebar{
  order:1 !important;
  flex:0 0 260px !important;
  min-width:0 !important;
  width:260px !important;
  float:none !important;
  margin:0 !important;
}

/* Legacy unsemantic utility classes — neutralised so they cannot win */
.grid-25,.grid-75,.grid-33{width:auto;float:none;}
.push-25,.pull-75{margin-left:0;}

/* Footer 3-column area uses flex */
.inside-footer-widgets{
  display:flex;flex-wrap:wrap;gap:30px;
}
.footer-widget-1,.footer-widget-2,.footer-widget-3{
  flex:1 1 260px;min-width:0;padding:0;
}

/* Clearfix for legacy floated contexts we still want to clear */
.grid-container:after,
.inside-header:after,
.inside-navigation:after,
.inside-site-info:after,
.footer-widgets-container:after{
  content:"";display:table;clear:both;
}


/* ---------- Header / Site Branding ---------- */
.site-header{
  color:#fff;
  background:
    radial-gradient(1200px 360px at 85% 20%, rgba(30,115,190,.35), transparent 60%),
    linear-gradient(135deg,#0b1a3a 0%,#13285b 60%,#0b1a3a 100%);
  padding:56px 10px 64px;
  position:relative;
  overflow:hidden;
}
.site-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.6;
}
.site-header .inside-header{
  max-width:var(--container-max);margin:0 auto;
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:6px;
}
.site-branding{max-width:760px;}
.main-title{
  font-weight:800;text-transform:none;letter-spacing:-.01em;
  font-size:46px;line-height:1.1;margin:0 0 .2em;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.main-title a,
.main-title a:hover,
.main-title a:focus{color:#fff;text-decoration:none;}
.main-title a::before{
  content:"";display:inline-block;width:14px;height:14px;border-radius:50%;
  margin-right:14px;vertical-align:2px;
  background:radial-gradient(circle at 30% 30%,#7dd3fc,#1e73be 70%);
  box-shadow:0 0 14px rgba(125,211,252,.55);
}
.site-description{
  color:#d6dbe4;font-size:17.5px;margin:0;max-width:760px;line-height:1.45;
}

/* ---------- Primary Navigation ---------- */
.main-navigation{
  background-color:var(--nav-bg);
  color:#fff;
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.main-navigation .inside-navigation{
  max-width:var(--container-max);margin:0 auto;padding:0 10px;
}
.main-navigation ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
}
.main-navigation .menu li{position:relative;}
.main-navigation .menu > li > a,
.main-navigation .menu > li > span.menu-link{
  display:block;color:#fff;padding:0 22px;line-height:48px;
  font-size:14.5px;font-weight:600;letter-spacing:.015em;
  text-decoration:none;cursor:pointer;
  transition:background-color .15s ease;
}
.main-navigation .menu > li:hover > a,
.main-navigation .menu > li:hover > span.menu-link,
.main-navigation .menu > li:focus-within > a,
.main-navigation .menu > li:focus-within > span.menu-link,
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current-menu-parent > span.menu-link{
  background-color:var(--nav-bg-hover);color:#fff;
}
.main-navigation .sub-menu{
  position:absolute;top:100%;left:0;min-width:240px;
  background:#fff;
  display:none;flex-direction:column;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  border-top:3px solid var(--nav-bg);
  z-index:50;
  padding:6px 0;
}
.main-navigation .menu li:hover > .sub-menu,
.main-navigation .menu li:focus-within > .sub-menu{display:flex;}
.main-navigation .sub-menu li{width:100%;}
.main-navigation .sub-menu li a{
  display:block;padding:9px 18px;color:#222;
  font-size:14px;font-weight:500;line-height:1.35;
  border:0;
  transition:background-color .12s ease,color .12s ease;
}
.main-navigation .sub-menu li a:hover,
.main-navigation .sub-menu li.current-menu-item a{
  background:#f5f6f8;color:var(--nav-bg);text-decoration:none;
}
.dropdown-menu-toggle{
  display:inline-block;margin-left:8px;
  border:solid transparent;border-width:5px 4px 0 4px;
  border-top-color:#fff;vertical-align:middle;
  transition:transform .2s ease;
}
.main-navigation .menu > li:hover .dropdown-menu-toggle,
.main-navigation .menu > li:focus-within .dropdown-menu-toggle{
  transform:rotate(180deg);
}
.menu-toggle{
  display:none;background:transparent;border:0;color:#fff;
  padding:10px 15px;font-size:15px;cursor:pointer;line-height:40px;
}
.menu-toggle::before{
  content:"\2630";margin-right:8px;font-size:18px;vertical-align:middle;
}

/* ---------- Main Site Layout ---------- */
.site{background:var(--body-bg);}
.inside-article,
.inside-left-sidebar{
  background:#fff;
  padding:var(--content-pad);
  border-radius:8px;
  box-shadow:0 2px 6px rgba(15,25,50,.05),0 1px 2px rgba(15,25,50,.04);
}
article{margin-bottom:20px;}

/* Entry content typography */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
  color:var(--contrast);font-weight:700;margin:1.4em 0 .55em;letter-spacing:-.005em;
}
.entry-content h1,
.entry-title{
  font-size:34px;line-height:1.2;margin-top:0;margin-bottom:.5em;
  color:var(--contrast);letter-spacing:-.015em;font-weight:800;
}
.entry-content h2{
  font-size:24px;line-height:1.3;padding-bottom:.35em;
  border-bottom:2px solid #eef0f3;
}
.entry-content h3{font-size:19px;line-height:1.35;color:#1f2937;}
.entry-content h4{font-size:17px;color:#1f2937;}
.entry-content p{margin:0 0 1.15em;}
.entry-content ul,.entry-content ol{margin:0 0 1.25em;padding-left:1.3em;}
.entry-content li{margin-bottom:.45em;}
.entry-content li::marker{color:var(--nav-bg);}
.entry-content strong{color:#111827;}
.entry-content a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(0,98,160,.25);}
.entry-content a:hover{color:var(--nav-bg);border-bottom-color:var(--nav-bg);}
.entry-content code{
  background:#f4f5f7;padding:2px 6px;border-radius:3px;
  font-family:Consolas,"Liberation Mono",Menlo,monospace;font-size:.92em;color:#c7254e;
}
.entry-content blockquote{
  margin:1em 0;padding:.6em 1em;border-left:4px solid var(--accent);
  background:#f7f8f9;color:#555;
}

/* Hero image inside article */
.wp-block-image{margin:0 0 1.5em;}
.wp-block-image.aligncenter{text-align:center;}
.wp-block-image figure{margin:0;}
.wp-block-image img{
  display:block;margin:0 auto;border-radius:6px;
  width:100%;max-width:100%;height:auto;
  box-shadow:0 6px 24px rgba(0,0,0,.15);
}

/* ---------- Left Sidebar ---------- */
.widget{margin-bottom:28px;}
.widget:last-child{margin-bottom:0;}
.widget-title,
.widget .menu-title{
  display:inline-block;
  font-size:15.5px;font-weight:800;color:#0b1a3a;
  margin:0 0 14px;padding-bottom:8px;
  border-bottom:3px solid var(--nav-bg);
  text-transform:none;letter-spacing:-.005em;
}
.widget ul{list-style:none;margin:0;padding:0;}
.widget li{margin:0;}
.widget li a{
  display:block;padding:9px 12px;
  color:#2d3748;font-size:14px;line-height:1.35;
  border-left:3px solid transparent;
  border-bottom:1px solid #f0f2f5;
  text-decoration:none;
  transition:all .12s ease;
}
.widget li:last-child a{border-bottom:0;}
.widget li a:hover{
  background:#f7f9fc;color:var(--accent);
  border-left-color:var(--accent);
  text-decoration:none;
}
.widget li.current-menu-item > a,
.widget li.current-menu-parent > a{
  background:#fdf1f1;color:var(--nav-bg);font-weight:700;
  border-left-color:var(--nav-bg);
}

/* Chaptered sidebar (Data Science curriculum) — collapsible + scrollable.
   ALL chapter boxes (Featured Topics + 15 chapters) live inside ONE short
   scrollable container so the full sidebar never exceeds ~520 px. */
.widget_ds_curriculum{font-size:13px;margin-bottom:24px;}
.widget_ds_curriculum > .widget-title{margin-bottom:10px;}
.ds-curriculum-scroll{
  max-height:480px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
  box-shadow:inset 0 -18px 18px -18px rgba(0,0,0,.08);
}
.ds-curriculum-scroll::-webkit-scrollbar{width:8px;}
.ds-curriculum-scroll::-webkit-scrollbar-thumb{
  background:#cbd5e1;border-radius:4px;
}
.ds-curriculum-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8;}
.ds-curriculum-scroll::-webkit-scrollbar-track{background:#f7f9fc;}

.ds-chapter{border-bottom:1px solid var(--border);}
.ds-chapter:last-child{border-bottom:0;}
.ds-chapter > summary{
  list-style:none;
  display:flex;align-items:center;gap:8px;
  cursor:pointer;
  padding:7px 10px;
  font-size:11.5px;font-weight:800;
  color:#0b1a3a;
  text-transform:uppercase;letter-spacing:.035em;
  background:#f8fafc;
  user-select:none;
  transition:background .12s ease, color .12s ease;
}
.ds-chapter > summary:hover{background:#eef2f7;color:var(--accent);}
.ds-chapter > summary::-webkit-details-marker{display:none;}
.ds-chapter > summary::marker{content:"";}
.ds-chapter > summary::before{
  content:"";flex:0 0 auto;
  width:0;height:0;
  border-left:5px solid #6b7280;
  border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent;
  transition:transform .15s ease;
}
.ds-chapter[open] > summary{background:#eef4fb;color:var(--accent);}
.ds-chapter[open] > summary::before{
  transform:rotate(90deg);border-left-color:var(--accent);
}
.ds-chapter-title{flex:1 1 auto;line-height:1.25;}
.ds-chapter-count{
  flex:0 0 auto;
  font-size:10px;font-weight:700;
  background:#fff;border:1px solid var(--border);
  color:#4b5563;
  padding:1px 7px;border-radius:10px;
  letter-spacing:0;
}
.ds-chapter[open] .ds-chapter-count{
  background:var(--accent);border-color:var(--accent);color:#fff;
}

/* Featured Topics box gets a subtle navy accent so users see it's distinct. */
.ds-chapter--featured > summary{
  background:#f0f5fc;color:#0b1a3a;
  border-left:3px solid var(--nav-bg);
}
.ds-chapter--featured[open] > summary{background:#e6efff;}

.ds-chapter .menu-chapter{margin:0;padding:2px 0 4px;}
.ds-chapter .menu-chapter li a{
  padding:5px 12px 5px 24px;
  font-size:12.5px;line-height:1.3;
  border-bottom:1px solid #f4f6f9;
  border-left:3px solid transparent;
}
.ds-chapter .menu-chapter li:last-child a{border-bottom:0;}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  font-size:13px;color:#6b7280;margin:0 0 1.2em;
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;
}
.breadcrumbs a{
  color:var(--accent);text-decoration:none;
}
.breadcrumbs a:hover{text-decoration:underline;}
.breadcrumbs .sep{margin:0 8px;color:#cbd5e1;font-weight:400;}
.breadcrumbs [aria-current="page"]{color:#1f2937;font-weight:600;}

/* ---------- Footer ---------- */
.site-footer{background:#fff;margin-top:30px;}
.footer-widgets{
  background:#fff;padding:40px 0 30px;
  border-top:1px solid var(--border);
}
.footer-widgets-container{padding:0 10px;}
.footer-widget-1,.footer-widget-2,.footer-widget-3{padding:0 10px;}
.inner-padding{padding:0;}
.footer-widgets .widget-title{
  display:inline-block;
  font-size:15px;color:#0b1a3a;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 14px;padding-bottom:8px;
  border-bottom:3px solid var(--nav-bg);
}
.footer-links{
  list-style:none;margin:0;padding:0;
  font-size:14px;line-height:1.5;
}
.footer-links li{margin-bottom:6px;}
.footer-links a{
  color:#4b5563;text-decoration:none;
  transition:color .12s ease;
}
.footer-links a:hover{color:var(--nav-bg);}
/* ---------- Related Resources (site-wide, above copyright) ---------- */
.related-resources{
  background:#f8fafc;
  border-top:1px solid var(--border);
  padding:28px 10px 24px;
}
.related-resources-title{
  display:inline-block;
  font-size:14px;font-weight:800;color:#0b1a3a;
  text-transform:uppercase;letter-spacing:.05em;
  margin:0 0 14px;padding-bottom:6px;
  border-bottom:3px solid var(--nav-bg);
}
.related-resources-list{
  list-style:none;margin:0;padding:0;
  columns:4 200px;
  column-gap:22px;
}
.related-resources-list li{
  margin:0;padding:0;
  break-inside:avoid;
}
.related-resources-list li a{
  display:block;
  padding:3px 0;
  color:var(--accent);
  font-size:13px;line-height:1.35;
  text-decoration:none;
}
.related-resources-list li a:hover{
  color:var(--nav-bg);text-decoration:underline;
}
@media (max-width:900px){ .related-resources-list{columns:2 160px;} }
@media (max-width:540px){ .related-resources-list{columns:1;} }

.site-info{
  background:#0b1a3a;color:#cbd5e1;
  padding:18px 0;font-size:13px;text-align:center;
  border-top:3px solid var(--nav-bg);
}
.site-info a,.copyright-bar a{color:#fff;}
.site-info a:hover{color:#7dd3fc;}

/* ---------- Forms (contact) ---------- */
.sciencetek-form{display:grid;gap:15px;max-width:640px;}
.sciencetek-form label{font-weight:700;font-size:14px;color:#333;}
.sciencetek-form input[type=text],
.sciencetek-form input[type=email],
.sciencetek-form input[type=tel],
.sciencetek-form textarea{
  width:100%;padding:10px 12px;
  border:1px solid #ccc;border-radius:3px;background:#fafafa;
  font-family:inherit;font-size:15px;color:#333;
}
.sciencetek-form input:focus,
.sciencetek-form textarea:focus{
  outline:0;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(0,98,160,.15);
}
.sciencetek-form button,
.sciencetek-form input[type=submit]{
  background:var(--accent);color:#fff;border:0;padding:12px 24px;
  font-weight:700;border-radius:3px;cursor:pointer;font-size:15px;
}
.sciencetek-form button:hover{background:var(--accent-hover);}

/* ---------- FAQ accordion ---------- */
.faq-list{list-style:none;padding:0;margin:0;}
.faq-item{
  margin-bottom:12px;border:1px solid #e5e7eb;border-radius:4px;background:#fff;
}
.faq-item summary{
  cursor:pointer;padding:14px 18px;font-weight:700;color:#222;
  list-style:none;position:relative;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";position:absolute;right:18px;top:14px;
  color:var(--accent);font-weight:700;
}
.faq-item[open] summary::after{content:"–";}
.faq-item .faq-body{padding:0 18px 16px;color:#444;}

/* ---------- Sitemap page ---------- */
.sitemap-columns{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;
}
.sitemap-columns h2{margin-top:0;}
.sitemap-columns ul{list-style:disc;padding-left:20px;}

/* ---------- Code examples on Data Science lesson pages ---------- */
.code-examples{
  margin:40px 0 0;padding-top:28px;
  border-top:1px solid #e5e7eb;
}
.code-examples > h2{margin:0 0 8px;}
.code-examples-count{color:#6b7280;font-weight:400;font-size:0.9em;}
.code-examples-intro{color:#4b5563;margin:0 0 20px;}
.code-example{margin:22px 0 26px;}
.code-example-title{
  font-size:1.05rem;margin:0 0 8px;color:#111827;
  font-weight:600;
}
.code-block{
  background:#1e1e2e;color:#e4e4e7;
  padding:16px 18px;border-radius:8px;
  overflow-x:auto;margin:0;
  font-size:0.9em;line-height:1.6;
  font-family:'Fira Code','JetBrains Mono',Consolas,Menlo,'Courier New',monospace;
  tab-size:4;-moz-tab-size:4;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
}
.code-block code{
  background:transparent;color:inherit;padding:0;
  font-family:inherit;font-size:inherit;white-space:pre;
  display:block;
}

/* ---------- Data Science curriculum on /sitemap/ page ---------- */
.ds-sitemap-curriculum{
  margin-top:40px;padding-top:30px;border-top:1px solid #e5e7eb;
}
.ds-sitemap-curriculum > h2{margin-top:0;}
.ds-sitemap-intro{color:#4b5563;margin-bottom:20px;}
.ds-sitemap-count{color:#6b7280;font-weight:400;font-size:0.9em;}
.ds-sitemap-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 30px;
}
.ds-sitemap-chapter h3{
  margin:0 0 8px;font-size:1.05em;line-height:1.3;
  padding-bottom:6px;border-bottom:1px solid #e5e7eb;
}
.ds-sitemap-chapter ul{list-style:disc;padding-left:20px;margin:0;}
.ds-sitemap-chapter li{margin:3px 0;font-size:0.95em;}
@media (max-width:900px){
  .ds-sitemap-grid{grid-template-columns:1fr;}
}
@media (min-width:901px) and (max-width:1200px){
  .ds-sitemap-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- Helpers ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
hr{border:0;border-top:1px solid #e5e7eb;margin:2em 0;}

/* ---------- Responsive (mirrors 768px GP breakpoint) ---------- */
@media (max-width:1024px){
  .grid-container{padding-left:15px;padding-right:15px;}
}
@media (max-width:900px){
  .main-title{font-size:34px;}
  .entry-content h1{font-size:28px;}
  .entry-content h2{font-size:22px;}
}
@media (max-width:900px){
  .site > .site-content,
  .site-content#content{
    flex-direction:column !important;
    gap:24px;
  }
  .site-content > .content-area,
  .site-content > #primary,
  .site-content > .widget-area,
  .site-content > #left-sidebar{
    width:100% !important;
    flex:1 1 auto !important;
  }
  .site-content > .widget-area,
  .site-content > #left-sidebar{order:2 !important;}
  .site-content > .content-area,
  .site-content > #primary{order:1 !important;}
}
@media (max-width:768px){
  .site-header{padding:40px 15px 44px;}
  .main-title{font-size:30px;}
  .main-title a::before{width:11px;height:11px;margin-right:10px;}
  .site-description{font-size:15.5px;}
  .inside-article,.inside-left-sidebar{padding:var(--content-pad-sm);}
  .footer-widget-1,.footer-widget-2,.footer-widget-3{margin-bottom:20px;}

  .menu-toggle{display:block;}
  .main-navigation .main-nav{display:none;width:100%;}
  .main-navigation.toggled .main-nav{display:block;}
  .main-navigation .menu{flex-direction:column;}
  .main-navigation .sub-menu{
    position:static;display:none;box-shadow:none;min-width:0;
    background:rgba(0,0,0,.15);
  }
  .main-navigation .menu li.open > .sub-menu{display:flex;}
  .main-navigation .menu > li > a,
  .main-navigation .menu > li > span.menu-link{
    border-top:1px solid rgba(255,255,255,.12);
  }
  .sitemap-columns{grid-template-columns:1fr;}
}