/*
Theme Name: ScholarshipVV
Theme URI: https://scholarshipvv.com
Author: ScholarshipVV
Author URI: https://scholarshipvv.com
Description: A fast, lightweight, SEO-optimized WordPress theme built for ScholarshipVV — scholarships, grants, online courses and school news. Fully responsive (mobile, tablet, desktop), with FAQ accordion, student review cards, category "ticket" cards and all legal pages ready to go.
Version: 1.6.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scholarshipvv
Tags: education, blog, news, one-column, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   0. DESIGN TOKENS
   Palette: ticket-stub scholarship theme
   ========================================================= */
:root{
  --navy: #1C1B3A;
  --navy-soft: #2C2B55;
  --orange: #F2994A;
  --orange-deep: #E0691F;
  --cream: #FBF9F4;
  --paper: #FFFFFF;
  --ink: #221F3D;
  --slate: #6B6A8A;
  --line: #E7E3F3;
  --teal: #2FB6A5;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow-soft: 0 10px 30px -14px rgba(28,27,58,.20);
  --shadow-lift: 0 18px 40px -16px rgba(28,27,58,.30);
  --font-head: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1180px;
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%; /* stops iOS Safari auto-inflating text on rotate */
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; /* matches antialiasing on Firefox/macOS */
  -webkit-tap-highlight-color:transparent; /* removes gray flash on tap in Mobile Safari/Chrome */
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);line-height:1.18;margin:0 0 .5em;font-weight:600;overflow-wrap:break-word;}
h1{font-size:clamp(2.1rem,4vw,3.4rem);font-weight:700;}
h2{font-size:clamp(1.6rem,3vw,2.3rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1em;color:var(--slate);}
.container{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
/* WP-core-standard accessible hiding technique — degrades safely on every
   browser/screen-reader combo, unlike a bare off-screen left offset. */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  overflow:hidden;position:absolute!important;word-wrap:normal!important;margin:-1px;padding:0;
}
/* Plain :focus first — this is the fallback for any browser that doesn't
   understand :focus-visible; the :not(:focus-visible) rule below is simply
   invalid there and gets skipped, so this ring always applies. */
a:focus,button:focus,input:focus,textarea:focus{outline:3px solid var(--teal);outline-offset:2px;}
/* In browsers that DO support :focus-visible, hide the ring for mouse
   clicks and show the refined keyboard-only version instead. */
a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),textarea:focus:not(:focus-visible){outline:none;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--teal);outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* -------------------------------------------------------
   Form control reset — Safari/iOS renders buttons, text
   inputs and search inputs with heavy native chrome (inner
   shadows, rounded corners, gradients) that Chrome/Firefox
   don't add. Reset just the types actually used on the
   front end; checkbox/radio (used by the default WP comment
   form) are deliberately excluded so their native, accessible
   appearance is preserved everywhere.
   ------------------------------------------------------- */
button,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="submit"]{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none; /* removes Safari's default gray "x" clear icon so our own styling is consistent */
}

/* eyebrow label */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-deep);font-weight:600;margin-bottom:10px;
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--orange);display:inline-block;}
.text-center{text-align:center;}
.section{padding:72px 0;}
.section-tight{padding:48px 0;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:100px;font-weight:600;font-family:var(--font-head);
  font-size:.95rem;border:2px solid transparent;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{background:var(--orange);color:#fff;box-shadow:var(--shadow-soft);}
.btn-primary:hover{background:var(--orange-deep);transform:translateY(-2px);}
.btn-outline{border-color:var(--navy);color:var(--navy);}
.btn-outline:hover{background:var(--navy);color:#fff;}
.btn-ghost{color:var(--navy);font-weight:600;border-bottom:2px solid var(--orange);border-radius:0;padding:4px 2px;}

/* =========================================================
   2. HEADER / NAV
   ========================================================= */
.site-header{
  position:-webkit-sticky;position:sticky;top:0;z-index:999;background:rgba(251,249,244,.92);
  -webkit-backdrop-filter:saturate(160%) blur(8px);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;max-width:var(--wrap);margin:0 auto;}
.site-branding{display:flex;align-items:center;gap:10px;}
.site-title{font-family:var(--font-head);font-weight:700;font-size:1.35rem;color:var(--navy);}
.site-title span{color:var(--orange);}
.site-logo img{height:40px;width:auto;}

.primary-nav ul{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
.primary-nav ul::-webkit-scrollbar{display:none;}
.primary-nav a{
  padding:10px 14px;border-radius:100px;font-weight:600;font-size:.94rem;color:var(--navy);
  transition:background .15s ease,color .15s ease;white-space:nowrap;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a{background:var(--navy);color:#fff;}
.primary-nav .sub-menu{
  position:absolute;background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-lift);
  padding:8px;min-width:200px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s ease;
}
.primary-nav li.menu-item-has-children{position:relative;}
.primary-nav li.menu-item-has-children:hover > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.primary-nav .sub-menu a{display:block;color:var(--ink);border-radius:var(--radius-sm);}
.primary-nav .sub-menu a:hover{background:var(--cream);color:var(--navy);}

.header-cta{display:flex;align-items:center;gap:10px;}
.menu-toggle{display:none;background:none;border:2px solid var(--navy);border-radius:10px;padding:8px 10px;position:relative;z-index:1001;}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0;border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
.menu-toggle.is-active{background:var(--navy);border-color:var(--navy);}
.menu-toggle.is-active span{background:#fff;}
.menu-toggle.is-active span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-toggle.is-active span:nth-child(2){opacity:0;}
.menu-toggle.is-active span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width: 900px){
  .primary-nav{
    position:fixed;top:0;right:0;bottom:0;left:30%;
    width:70%;height:100vh;height:100dvh;
    background:var(--navy);padding:100px 28px 28px;
    transform:translateX(100%);transition:transform .25s ease;z-index:1000;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .primary-nav.is-open{transform:translateX(0);}
  .primary-nav ul{flex-direction:column;align-items:flex-start;gap:2px;}
  .primary-nav a{color:#fff;width:100%;}
  .primary-nav a:hover{background:var(--orange);}
  .primary-nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;background:var(--navy-soft);box-shadow:none;display:none;}
  .primary-nav li.menu-item-has-children.sub-open > .sub-menu{display:block;}
  .menu-toggle{display:inline-block;}
  .header-cta .btn{display:none;}
  html.svv-nav-open, html.svv-nav-open body{overflow:hidden;}
}

/* =========================================================
   3. HERO
   ========================================================= */
.hero{padding:64px 0 40px;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.hero-grid > *{min-width:0;} /* WebKit/Safari won't shrink grid children below their content size without this */
.hero h1{margin-bottom:18px;}
.hero h1 .accent{color:var(--orange);}
.hero-lead{max-width:46ch;font-size:1.05rem;}
.hero-actions{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap;}
.hero-figure{position:relative;}
.hero-figure img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);}
.hero-stat-pill{
  position:absolute;bottom:-18px;left:-18px;background:#fff;border-radius:var(--radius-md);
  padding:14px 18px;box-shadow:var(--shadow-lift);display:flex;gap:10px;align-items:center;
}
.hero-stat-pill strong{display:block;font-family:var(--font-head);color:var(--navy);font-size:1rem;}
.hero-stat-pill span{font-size:.78rem;color:var(--slate);}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-figure{order:-1;}
}

/* =========================================================
   4. FEATURE / ABOUT CARDS
   ========================================================= */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;}
.feature-grid > *{min-width:0;}
.feature-card{
  background:var(--paper);border-radius:var(--radius-md);padding:26px;border:1px solid var(--line);
  transition:transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);}
.feature-icon{
  width:46px;height:46px;border-radius:12px;background:var(--cream);display:flex;align-items:center;
  justify-content:center;margin-bottom:14px;color:var(--orange);
}
@media (max-width: 780px){.feature-grid{grid-template-columns:1fr;}}

/* =========================================================
   5. STATS / PLATFORM BAND
   ========================================================= */
.stats-band{background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:48px;margin:0 24px;
  max-width:calc(var(--wrap) - 0px);margin-left:auto;margin-right:auto;}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;}
.stats-grid > *{min-width:0;}
.stats-grid strong{display:block;font-family:var(--font-head);font-size:2rem;color:var(--orange);}
.stats-grid span{color:#C9C7E8;font-size:.85rem;}
.stats-band h2, .stats-band .eyebrow{color:#fff;}
.stats-band .eyebrow{color:var(--orange);}
@media (max-width: 780px){.stats-grid{grid-template-columns:1fr;}}

/* =========================================================
   6. CATEGORY "TICKET" CARDS  — signature element
   Category cards look like admission tickets: icon stub on
   the left, dashed perforation, meta on the right, with
   circular notches punched top & bottom of the perforation.
   ========================================================= */
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;}
.category-grid > *{min-width:0;}
.ticket-card{
  position:relative;display:flex;background:var(--paper);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-soft);border:1px solid var(--line);
}
.ticket-stub{
  width:74px;flex:none;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
  position:relative;
}
.ticket-stub svg{width:26px;height:26px;}
.ticket-stub::after{
  content:"";position:absolute;right:-1px;top:0;bottom:0;width:0;
  border-left:2px dashed rgba(255,255,255,.5);
}
.ticket-stub::before{
  content:"";position:absolute;left:50%;top:-9px;transform:translateX(-50%);width:18px;height:18px;
  background:var(--cream);border-radius:50%;
}
.ticket-body{padding:16px 18px;flex:1;min-width:0;}
.ticket-body h3{margin-bottom:4px;font-size:1.02rem;}
.ticket-body p{margin:0;font-size:.85rem;}
.ticket-card:hover .ticket-stub{background:var(--orange);}
@media (max-width: 980px){.category-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width: 560px){.category-grid{grid-template-columns:1fr;}}

/* =========================================================
   7. GUIDE / CTA SPLIT
   ========================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.split > *{min-width:0;}
.split img{border-radius:var(--radius-lg);}
@media (max-width: 860px){.split{grid-template-columns:1fr;}}

/* =========================================================
   8. NEWSLETTER
   ========================================================= */
.newsletter{background:var(--orange);border-radius:var(--radius-lg);padding:48px;text-align:center;margin:0 24px;}
.newsletter h2{color:var(--navy);}
.newsletter p{color:#5b3714;max-width:52ch;margin:0 auto 20px;}
.newsletter-form{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center;}
.newsletter-form input[type=email]{
  flex:1;min-width:220px;padding:14px 18px;border-radius:100px;border:none;font-size:.95rem;
}
.newsletter-note{font-size:.78rem;color:#5b3714;margin-top:10px;}

/* =========================================================
   9. TESTIMONIALS / STUDENT REVIEWS
   ========================================================= */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px;}
.review-grid > *{min-width:0;}
.review-card{background:var(--paper);border-radius:var(--radius-md);padding:24px;border:1px solid var(--line);position:relative;}
.review-stars{color:var(--orange);letter-spacing:2px;margin-bottom:10px;font-size:.95rem;}
.review-person{display:flex;align-items:center;gap:12px;margin-top:16px;}
.review-person img{width:44px;height:44px;border-radius:50%;object-fit:cover;}
.review-person strong{display:block;font-size:.92rem;color:var(--navy);}
.review-person span{font-size:.78rem;color:var(--slate);}
@media (max-width: 900px){.review-grid{grid-template-columns:1fr;}}

/* =========================================================
   10. FAQ ACCORDION
   ========================================================= */
.faq-list{max-width:820px;margin:36px auto 0;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-question{
  width:100%;text-align:left;background:none;border:none;padding:20px 4px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--font-head);font-weight:600;color:var(--navy);font-size:1rem;
}
.faq-question .icon{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--cream);color:var(--orange);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:transform .2s ease;
}
.faq-item.is-open .faq-question .icon{transform:rotate(45deg);background:var(--orange);color:#fff;}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-answer-inner{padding:0 4px 20px;color:var(--slate);}
.faq-item.is-open .faq-answer{max-height:600px;}

/* =========================================================
   11. ARCHIVE / BLOG / SINGLE
   ========================================================= */
.content-wrap{display:grid;grid-template-columns:2.2fr 1fr;gap:40px;padding:56px 0;align-items:start;}
.content-wrap > *{min-width:0;}
.post-card{background:var(--paper);border-radius:var(--radius-md);border:1px solid var(--line);overflow:hidden;margin-bottom:24px;box-shadow:var(--shadow-soft);}
.post-card img{aspect-ratio:16/9;object-fit:cover;width:100%;}
@supports not (aspect-ratio: 16/9){
  .post-card img{height:220px;object-fit:cover;}
}
.post-card-body{padding:20px 22px;}
.post-meta{font-size:.78rem;color:var(--orange-deep);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:6px;}
.post-card h2{font-size:1.25rem;margin-bottom:8px;}
.post-card h2 a:hover{color:var(--orange-deep);}
.pagination{display:flex;gap:10px;margin-top:20px;}
.pagination a,.pagination span{padding:10px 16px;border-radius:10px;border:1px solid var(--line);font-weight:600;}
.pagination .current{background:var(--navy);color:#fff;border-color:var(--navy);}

.sidebar .widget{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;margin-bottom:22px;}
.sidebar .widget h2,.sidebar .widget-title{font-size:1rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;}
.sidebar .widget ul li{padding:8px 0;border-bottom:1px dashed var(--line);font-size:.92rem;}

.single-article{max-width:820px;}
.single-article .post-thumb{border-radius:var(--radius-lg);margin-bottom:24px;}
.single-article .entry-content h2{margin-top:1.6em;}
.single-article .entry-content p{color:var(--ink);}
.single-article .entry-content blockquote{
  border-left:4px solid var(--orange);padding:8px 20px;color:var(--navy);font-style:italic;margin:24px 0;
}
.tags-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;}
.tags-row a{background:var(--cream);padding:6px 14px;border-radius:100px;font-size:.8rem;font-weight:600;}

@media (max-width: 940px){.content-wrap{grid-template-columns:1fr;}}

/* =========================================================
   12. LEGAL PAGES
   ========================================================= */
.legal-page .entry-content{max-width:820px;margin:0 auto;}
.legal-page .entry-content h2{margin-top:1.6em;}
.legal-updated{color:var(--slate);font-size:.85rem;margin-bottom:2em;}

/* =========================================================
   13. FOOTER
   ========================================================= */
.site-footer{background:var(--navy);color:#C9C7E8;margin-top:60px;padding-top:60px;}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-grid > *{min-width:0;}
.footer-brand .site-title{color:#fff;}
.footer-brand p{color:#A9A7CE;margin-top:12px;max-width:32ch;}
.footer-col h3{color:#fff;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
.footer-col ul li{margin-bottom:10px;}
.footer-col a{color:#C9C7E8;font-size:.9rem;}
.footer-col a:hover{color:var(--orange);}
.footer-social{display:flex;gap:10px;margin-top:16px;}
.footer-social a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;
  align-items:center;justify-content:center;
}
.footer-social a:hover{background:var(--orange);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:.82rem;color:#A9A7CE;flex-wrap:wrap;gap:10px;}
.footer-bottom a{color:#A9A7CE;}
.footer-bottom a:hover{color:#fff;}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width: 560px){.footer-grid{grid-template-columns:1fr;}}

/* =========================================================
   14. BREADCRUMBS + MISC
   ========================================================= */
.breadcrumbs{font-size:.82rem;color:var(--slate);margin-bottom:18px;}
.breadcrumbs a{color:var(--orange-deep);font-weight:600;}
.search-form{display:flex;gap:8px;}
.search-form input[type=search]{flex:1;padding:10px 14px;border-radius:10px;border:1px solid var(--line);}
.search-form button{background:var(--navy);color:#fff;border:none;padding:10px 16px;border-radius:10px;}
.badge{display:inline-block;background:var(--teal);color:#fff;font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:.05em;}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:2000;border-radius:0 0 10px 0;}
.skip-link:focus{left:0;}