/*
Theme Name: DiscoverSchools
Theme URI: https://discoverschools.co.ke
Author: Pro Designers Ke
Author URI: https://discoverschools.co.ke
Description: A fast, lightweight, ad-friendly magazine theme built for education, scholarship and study-abroad content sites. Clean typography, dedicated ad zones (header, in-content, sidebar, footer), SEO-friendly markup, and mobile-first responsive design.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: discoverschools
Tags: blog, education, news, one-column, two-columns, right-sidebar, custom-menu, featured-images, translation-ready, threaded-comments

DiscoverSchools is a custom theme built for content publishers in the
education / scholarships / study-abroad niche who need a fast site that
plays well with Google AdSense and affiliate content.
*/

/* -----------------------------------------------------------
   1. RESET & BASE
----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

:root{
  --color-bg: #ffffff;
  --color-text: #1c1f26;
  --color-muted: #5b6270;
  --color-primary: #1e5fbf;
  --color-primary-dark: #144a97;
  --color-accent: #e8622c;
  --color-border: #e6e9ee;
  --color-surface: #f7f8fa;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
  --max-width: 1200px;
  --content-width: 760px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 17px;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: var(--color-primary); text-decoration:none; }
a:hover{ color: var(--color-primary-dark); text-decoration:underline; }

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  line-height:1.25;
  margin: 1.4em 0 0.6em;
  color:#101319;
}
h1{ font-size:2.1rem; }
h2{ font-size:1.6rem; border-bottom:1px solid var(--color-border); padding-bottom:.3em; }
h3{ font-size:1.3rem; }
p{ margin:0 0 1.2em; }
ul,ol{ margin:0 0 1.2em; padding-left:1.4em; }

.container{
  max-width: var(--max-width);
  margin:0 auto;
  padding:0 20px;
}

/* -----------------------------------------------------------
   2. SITE HEADER
----------------------------------------------------------- */
.site-header{
  border-bottom:1px solid var(--color-border);
  background:#fff;
  position:sticky;
  top:0;
  z-index:100;
}
.site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  max-width: var(--max-width);
  margin:0 auto;
  gap:20px;
  flex-wrap:wrap;
}
.site-branding .site-title{
  font-family: var(--font-heading);
  font-size:1.5rem;
  margin:0;
  font-weight:700;
}
.site-branding .site-title a{ color:var(--color-text); }
.site-branding .site-description{
  font-size:.8rem;
  color:var(--color-muted);
  margin:0;
}

.primary-nav ul{
  list-style:none;
  display:flex;
  gap:22px;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.primary-nav a{
  color:var(--color-text);
  font-weight:600;
  font-size:.95rem;
}
.primary-nav ul ul{
  display:none;
  position:absolute;
  background:#fff;
  border:1px solid var(--color-border);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  padding:10px 0;
  min-width:200px;
  flex-direction:column;
  gap:0;
  border-radius:6px;
}
.primary-nav li{ position:relative; }
.primary-nav li:hover > ul{ display:flex; }
.primary-nav ul ul li a{ display:block; padding:8px 16px; font-weight:400; }

.header-cta{
  background:var(--color-accent);
  color:#fff !important;
  padding:9px 16px;
  border-radius:5px;
  font-size:.85rem;
  font-weight:700;
  white-space:nowrap;
  text-decoration:none !important;
}
.header-cta:hover{ background:#c9501f; }

.menu-toggle{ display:none; }

@media (max-width: 860px){
  .primary-nav{ display:none; width:100%; order:3; }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; gap:0; border-top:1px solid var(--color-border); }
  .primary-nav ul ul{ position:static; box-shadow:none; border:none; padding-left:14px; display:none; }
  .primary-nav li.menu-open > ul{ display:flex; }
  .primary-nav a{ display:block; padding:10px 4px; border-bottom:1px solid var(--color-border); }
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px; height:40px;
    border:1px solid var(--color-border);
    border-radius:6px;
    background:#fff;
    cursor:pointer;
  }
}

/* -----------------------------------------------------------
   3. AD ZONES  (this is the whole point of the theme)
   Every ad zone has generous, isolated whitespace so ad units
   never collide with text/nav (protects AdSense policy compliance
   and Core Web Vitals / CLS score).
----------------------------------------------------------- */
.ad-zone{
  max-width: var(--max-width);
  margin: 24px auto;
  padding: 0 20px;
  text-align:center;
}
.ad-zone .ad-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--color-muted);
  margin-bottom:6px;
}
.ad-zone-inner{
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-surface);
  border:1px dashed var(--color-border);
  border-radius:6px;
  overflow:hidden;
}
.ad-zone--header{ margin-top:16px; }
.ad-zone--in-content{ margin: 36px auto; max-width: var(--content-width); }
.ad-zone--sidebar{ margin: 0 0 24px; padding:0; }
.ad-zone--footer{ margin-top:40px; }

/* -----------------------------------------------------------
   4. LAYOUT: CONTENT + SIDEBAR
----------------------------------------------------------- */
.site-main{
  max-width: var(--max-width);
  margin: 30px auto;
  padding: 0 20px;
  display:grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap:40px;
}
.content-area{ min-width:0; }
.sidebar{ min-width:0; }
.widget{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:8px;
  padding:20px;
  margin-bottom:24px;
}
.widget h3{ margin-top:0; font-size:1.05rem; }

@media (max-width: 960px){
  .site-main{ grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   5. ARTICLE / SINGLE POST
----------------------------------------------------------- */
.entry-header{ max-width: var(--content-width); margin:0 auto 20px; }
.entry-title{ font-size:2rem; }
.entry-meta{
  color:var(--color-muted);
  font-size:.85rem;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.entry-meta a{ color:var(--color-muted); }
.entry-thumbnail{ max-width: var(--content-width); margin:0 auto 24px; border-radius:8px; overflow:hidden; }
.entry-content{ max-width: var(--content-width); margin:0 auto; }
.entry-content img{ border-radius:6px; margin:1.2em 0; }
.entry-content blockquote{
  border-left:4px solid var(--color-primary);
  margin:1.4em 0;
  padding:.4em 1.2em;
  background:var(--color-surface);
  font-style:italic;
  color:var(--color-muted);
}
.entry-content table{ width:100%; border-collapse:collapse; margin:1.4em 0; }
.entry-content th, .entry-content td{ border:1px solid var(--color-border); padding:10px 12px; text-align:left; }
.entry-content th{ background:var(--color-surface); }

.entry-tags{ max-width:var(--content-width); margin:30px auto; }
.entry-tags a{
  display:inline-block;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  padding:5px 12px;
  border-radius:20px;
  font-size:.8rem;
  margin:0 6px 6px 0;
  color:var(--color-text);
}
.entry-tags a:hover{ background:var(--color-primary); color:#fff; text-decoration:none; }

/* -----------------------------------------------------------
   6. ARCHIVE / CARD GRID (category pages, homepage feed)
----------------------------------------------------------- */
.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap:26px;
  margin: 20px 0 40px;
}
.post-card{
  border:1px solid var(--color-border);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  transition: box-shadow .15s ease, transform .15s ease;
}
.post-card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
.post-card a{ text-decoration:none; }
.post-card-thumb{ aspect-ratio:16/10; background:var(--color-surface); overflow:hidden; }
.post-card-thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card-body{ padding:16px; }
.post-card-category{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--color-primary);
  font-weight:700;
}
.post-card-title{
  font-family: var(--font-heading);
  font-size:1.1rem;
  margin:.4em 0;
  color:var(--color-text);
}
.post-card-excerpt{ font-size:.9rem; color:var(--color-muted); margin:0; }
.post-card-meta{ font-size:.75rem; color:var(--color-muted); margin-top:10px; }

/* -----------------------------------------------------------
   7. HERO / FEATURED SECTION
----------------------------------------------------------- */
.hero{
  background: linear-gradient(135deg, var(--color-surface), #fff);
  border-bottom:1px solid var(--color-border);
  padding:50px 20px;
  text-align:center;
}
.hero h1{ font-size:2.4rem; margin:0 0 .3em; }
.hero p{ color:var(--color-muted); max-width:640px; margin:0 auto 1.2em; font-size:1.05rem; }
.hero .btn{
  display:inline-block;
  background:var(--color-primary);
  color:#fff;
  padding:12px 22px;
  border-radius:6px;
  font-weight:700;
  margin:6px;
  text-decoration:none;
}
.hero .btn:hover{ background:var(--color-primary-dark); text-decoration:none; }
.hero .btn.btn-outline{
  background:transparent;
  color:var(--color-primary);
  border:2px solid var(--color-primary);
}

/* Newsletter CTA block (header + widget reuse) */
.newsletter-box{
  background:var(--color-primary);
  color:#fff;
  padding:18px;
  border-radius:8px;
  text-align:center;
}
.newsletter-box h3{ color:#fff; margin-top:0; }
.newsletter-box input[type="email"]{
  width:100%;
  padding:10px 12px;
  border-radius:5px;
  border:none;
  margin-bottom:10px;
}
.newsletter-box button{
  width:100%;
  padding:10px 12px;
  background:var(--color-accent);
  color:#fff;
  border:none;
  border-radius:5px;
  font-weight:700;
  cursor:pointer;
}
.newsletter-box button:hover{ background:#c9501f; }

/* -----------------------------------------------------------
   8. FOOTER
----------------------------------------------------------- */
.site-footer{
  background:#12141a;
  color:#c7cbd4;
  margin-top:50px;
  padding:50px 20px 20px;
}
.footer-grid{
  max-width: var(--max-width);
  margin:0 auto;
  display:grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap:30px;
}
.footer-grid h4{ color:#fff; font-size:.95rem; margin-top:0; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:8px; }
.footer-grid a{ color:#c7cbd4; font-size:.9rem; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{
  max-width: var(--max-width);
  margin:30px auto 0;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.8rem;
  color:#8a8f9c;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
@media (max-width:760px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* -----------------------------------------------------------
   9. MISC / ACCESSIBILITY / PERFORMANCE HELPERS
----------------------------------------------------------- */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
}
.skip-link{
  position:absolute;
  left:-9999px;
  background:#000; color:#fff;
  padding:10px 16px;
  z-index:999;
}
.skip-link:focus{ left:10px; top:10px; }

.pagination{ text-align:center; margin:30px 0; }
.pagination a, .pagination span{
  display:inline-block;
  padding:8px 14px;
  border:1px solid var(--color-border);
  border-radius:5px;
  margin:0 3px;
  color:var(--color-text);
}
.pagination .current{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); }

.breadcrumbs{ font-size:.8rem; color:var(--color-muted); margin-bottom:16px; }
.breadcrumbs a{ color:var(--color-muted); }