/*
Theme Name: South Asian Society (GeneratePress Child)
Theme URI: https://www.southasiansociety.org.uk
Description: A GeneratePress child theme for the South Asian Society (Devon and Cornwall), built around the charity's brand colours. Keeps GeneratePress's own hooks, plugin compatibility and core settings, while overriding the visual design with a custom homepage and templates.
Author: South Asian Society (Devon and Cornwall)
Author URI: https://www.southasiansociety.org.uk
Template: generatepress
Version: 1.1.0
Requires at least: 6.0
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: saas-child

IMPORTANT: "Template: generatepress" above tells WordPress this is a
child theme of GeneratePress. GeneratePress (the free parent theme)
must be installed for this to work — see readme.txt for details.
*/

/* This stylesheet is enqueued as a CHILD of GeneratePress's own
   style.css (see functions.php) — GeneratePress's base styles,
   container widths and typography settings still apply; the rules
   below override them with the Society's custom design. */

/* -------------------------------------------------------
   1. CSS custom properties (brand palette + type scale)
   Default values below; Customizer settings override these
   inline via wp_head (see inc/customizer.php).
------------------------------------------------------- */
:root {
  --saas-blue: #092EB2;
  --saas-blue-deep: #071F7A;
  --saas-orange: #F06310;
  --saas-green: #1F8F68;
  --saas-sky: #3F88C2;
  --saas-cream: #F7F0E2;
  --saas-cream-light: #FBF8F2;
  --saas-ink: #1A1A2E;
  --saas-muted: #5B5F73;
  --saas-border: #E4E9F5;

  --saas-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --saas-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --saas-container: 1180px;
  --saas-radius: 14px;
}

/* -------------------------------------------------------
   2. Reset + base
------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--saas-font-body);
  color: var(--saas-ink);
  background: #ffffff;
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--saas-blue); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--saas-orange); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--saas-font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .5em;
  color: var(--saas-ink);
}
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.container {
  max-width: var(--saas-container);
  margin: 0 auto;
  padding: 0 32px;
}

/* -------------------------------------------------------
   3. Buttons
------------------------------------------------------- */
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.btn-primary {
  background: var(--saas-orange);
  color: #ffffff !important;
}
.btn-primary:hover { opacity: .9; color: #ffffff !important; }
.btn-outline {
  background: transparent;
  border-color: var(--saas-blue);
  color: var(--saas-blue) !important;
}
.btn-outline:hover { background: var(--saas-blue); color: #ffffff !important; }
.btn-outline.green { border-color: var(--saas-green); color: var(--saas-green) !important; }
.btn-outline.green:hover { background: var(--saas-green); color: #ffffff !important; }
.btn-white { background: #ffffff; color: var(--saas-orange) !important; }
.btn-white:hover { opacity: .9; }

/* -------------------------------------------------------
   4. Top utility bar
------------------------------------------------------- */
.saas-topbar {
  background: var(--saas-blue-deep);
  color: #EDE6D6;
  font-size: 13px;
}
.saas-topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.saas-topbar a { color: #EDE6D6; font-weight: 500; }
.saas-topbar a:hover { color: #ffffff; }

/* -------------------------------------------------------
   5. Header / nav
------------------------------------------------------- */
.saas-header {
  background: #ffffff;
  border-bottom: 1px solid #EEE8DA;
}
.saas-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}
.saas-brand { display: flex; align-items: center; gap: 12px; }
.saas-brand img.custom-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.saas-brand-mark {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--saas-blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.saas-brand-text .site-title {
  font-family: var(--saas-font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.1;
  color: var(--saas-ink);
  margin: 0;
}
.saas-brand-text .site-title a { color: inherit; }
.saas-brand-text .site-tagline {
  font-size: 12px;
  color: var(--saas-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 2px 0 0;
}
/* Navigation: top level in a row, second level drops down, third level and deeper open to the right. */
.saas-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.saas-menu, .saas-menu ul { list-style: none; margin: 0; padding: 0; }
.saas-menu { display: flex; align-items: center; gap: 26px; }
.saas-menu li { position: relative; display: flex; align-items: center; }
.saas-menu a {
  display: block;
  color: var(--saas-ink);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 0;
}
.saas-menu a:hover,
.saas-menu a:focus-visible,
.saas-menu li.current-menu-item > a,
.saas-menu li.current-menu-ancestor > a { color: var(--saas-orange); }
.saas-menu-toggle { display: none; }

.saas-submenu-toggle {
  background: none; border: 0; padding: 4px; margin-left: 2px; cursor: pointer;
  color: var(--saas-muted); display: inline-flex; align-items: center; border-radius: 4px;
}
.saas-submenu-toggle:hover,
.saas-submenu-toggle:focus-visible { color: var(--saas-orange); }
.saas-submenu-toggle svg { transition: transform .15s ease; }

.saas-menu .sub-menu {
  position: absolute; top: 100%; left: -14px;
  min-width: 230px; padding: 8px 0;
  background: #ffffff;
  border: 1px solid var(--saas-border);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(9, 46, 178, .14);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 60;
}
.saas-menu .sub-menu li { display: flex; align-items: center; justify-content: space-between; }
.saas-menu .sub-menu a { flex: 1; padding: 10px 18px; font-size: 14px; white-space: nowrap; }
.saas-menu .sub-menu li:hover > a,
.saas-menu .sub-menu li:focus-within > a { background: #F2F5FC; }

/* Third level and deeper: open to the right of their parent */
.saas-menu .sub-menu .sub-menu { top: -9px; left: 100%; }
.saas-menu .sub-menu .saas-submenu-toggle { margin-right: 12px; }
.saas-menu .sub-menu .saas-submenu-toggle svg { transform: rotate(-90deg); }

/* Flipped by nav.js when a menu would run off the right edge of the screen */
.saas-menu > li > .sub-menu.is-flipped { left: auto; right: -14px; }
.saas-menu .sub-menu .sub-menu.is-flipped { left: auto; right: 100%; }

/* Show on keyboard focus or when opened by the toggle button */
.saas-menu li:focus-within > .sub-menu,
.saas-menu li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
/* Show on mouse hover (not on touch screens, where it would stick) */
@media (hover: hover) {
  .saas-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: none; }
}
/* Escape key hides open menus until the pointer or focus moves on */
@media (min-width: 901px) {
  .saas-menu.is-dismissed .sub-menu { opacity: 0 !important; visibility: hidden !important; }
}

/* -------------------------------------------------------
   6. Hero
------------------------------------------------------- */
.saas-hero { background: var(--saas-cream); }
.saas-hero .container {
  padding-top: 72px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center;
}
.saas-hero-eyebrow {
  display: inline-block;
  background: #E7ECFA;
  color: var(--saas-blue);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.saas-hero h1 { font-size: 44px; line-height: 1.12; margin-bottom: 20px; max-width: 560px; }
.saas-hero p.lead { font-size: 17px; color: var(--saas-muted); max-width: 480px; margin-bottom: 32px; }
.saas-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.saas-hero-art { display: flex; justify-content: center; }

/* -------------------------------------------------------
   7. Pillars / feature grid
------------------------------------------------------- */
.saas-pillars .container {
  padding-top: 64px;
  padding-bottom: 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.saas-pillar-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.saas-pillar-icon.blue { background: #E7ECFA; }
.saas-pillar-icon.orange { background: #FBEAE0; }
.saas-pillar-icon.green { background: #E4F3EC; }
.saas-pillars h3 { font-size: 20px; margin-bottom: 10px; }
.saas-pillars p { font-size: 15px; color: var(--saas-muted); margin: 0; }

/* -------------------------------------------------------
   8. Events / news section
------------------------------------------------------- */
.saas-events { background: #F2F5FC; }
.saas-events .container { padding-top: 72px; padding-bottom: 72px; }
.saas-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  flex-wrap: wrap;
  gap: 16px;
}
.saas-section-head .eyebrow {
  color: var(--saas-blue);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.saas-section-head h2 { font-size: 30px; margin: 0; }
.saas-events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.saas-card {
  background: #ffffff;
  border-radius: var(--saas-radius);
  padding: 24px;
  border: 1px solid var(--saas-border);
  transition: transform .15s ease, box-shadow .15s ease;
}
.saas-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(9,46,178,.1); }
.saas-card .tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 16px;
  margin-bottom: 16px;
}
.saas-card .tag.blue { background: #E7ECFA; color: var(--saas-blue); }
.saas-card .tag.orange { background: #FBEAE0; color: var(--saas-orange); }
.saas-card .tag.green { background: #E4F3EC; color: var(--saas-green); }
.saas-card h4 { font-size: 18px; margin-bottom: 8px; }
.saas-card p { font-size: 14px; color: var(--saas-muted); margin-bottom: 16px; }
.saas-card .read-more { font-size: 14px; font-weight: 600; color: var(--saas-orange); }
.saas-empty-state {
  background: #ffffff;
  border: 1px dashed var(--saas-border);
  border-radius: var(--saas-radius);
  padding: 40px;
  text-align: center;
  color: var(--saas-muted);
}

/* -------------------------------------------------------
   9. Callout banner (Youth Board etc.)
------------------------------------------------------- */
.saas-callout { background: var(--saas-orange); }
.saas-callout .container {
  padding-top: 64px;
  padding-bottom: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.saas-callout .eyebrow { color: #FCE3D2; font-weight: 600; font-size: 13px; letter-spacing: .06em; margin-bottom: 10px; text-transform: uppercase; }
.saas-callout h2 { color: #ffffff; font-size: 30px; margin-bottom: 16px; }
.saas-callout p { color: #FFEDE1; font-size: 16px; max-width: 520px; margin: 0; }

/* -------------------------------------------------------
   10. Get involved
------------------------------------------------------- */
.saas-involved .container { padding-top: 72px; padding-bottom: 72px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.saas-involved-card { border-radius: 16px; padding: 36px; }
.saas-involved-card.cream { background: var(--saas-cream); }
.saas-involved-card.mint { background: #EAF3EE; }
.saas-involved-card h3 { font-size: 22px; margin-bottom: 12px; }
.saas-involved-card p { font-size: 15px; color: var(--saas-muted); margin-bottom: 22px; }

/* -------------------------------------------------------
   11. Newsletter
------------------------------------------------------- */
.saas-newsletter { background: var(--saas-blue-deep); }
.saas-newsletter .container {
  padding-top: 56px;
  padding-bottom: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.saas-newsletter h3 { color: #ffffff; font-size: 22px; margin-bottom: 6px; }
.saas-newsletter p { color: #B9C3E8; font-size: 14px; margin: 0; }
.saas-newsletter form { display: flex; gap: 10px; flex-wrap: wrap; }
.saas-newsletter input[type="email"] {
  padding: 12px 16px; border-radius: 8px; border: none; font-size: 14px; width: 240px; max-width: 100%;
}
.saas-newsletter button {
  background: var(--saas-orange); color: #ffffff; border: none;
  padding: 12px 22px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.saas-newsletter button:hover { opacity: .9; }

/* -------------------------------------------------------
   12. Footer
------------------------------------------------------- */
.saas-footer { background: var(--saas-ink); }
.saas-footer .container {
  padding-top: 56px;
  padding-bottom: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.saas-footer h4 { font-size: 13px; font-weight: 600; color: #ffffff; margin-bottom: 14px; letter-spacing: .04em; text-transform: uppercase; }
.saas-footer p { font-size: 13px; line-height: 1.6; color: #9498AD; margin: 0; }
.saas-footer .foot-brand { font-family: var(--saas-font-display); font-weight: 600; font-size: 18px; color: #ffffff; margin-bottom: 10px; }
.saas-footer-links { display: flex; flex-direction: column; gap: 10px; }
.saas-footer-links a { font-size: 14px; color: #B9BDD1; }
.saas-footer-links a:hover { color: #ffffff; }
.saas-social { display: flex; gap: 12px; }
.saas-social a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #3A3D52;
  display: flex; align-items: center; justify-content: center;
}
.saas-social a:hover { border-color: var(--saas-orange); }
.saas-footer-bottom { border-top: 1px solid #2C2E44; }
.saas-footer-bottom .container { padding: 20px 32px; font-size: 12px; color: #7A7E96; }

/* -------------------------------------------------------
   13. Generic page / single post content
------------------------------------------------------- */
.saas-page-header { background: var(--saas-cream); padding: 56px 0; }
.saas-page-header h1 { font-size: 36px; margin: 0; }
.saas-page-header .meta { font-size: 14px; color: var(--saas-muted); margin-top: 10px; }
.saas-content-wrap { max-width: 780px; margin: 0 auto; padding: 56px 32px; }
.saas-content-wrap img { border-radius: var(--saas-radius); }
.saas-content-wrap h2 { font-size: 26px; margin-top: 1.6em; }
.saas-content-wrap h3 { font-size: 20px; margin-top: 1.4em; }
.saas-content-wrap blockquote {
  border-left: 3px solid var(--saas-orange);
  margin: 1.5em 0;
  padding: 0.5em 0 0.5em 1.5em;
  color: var(--saas-muted);
  font-style: italic;
}
.saas-pagination { display: flex; justify-content: space-between; margin-top: 40px; font-size: 14px; font-weight: 600; }

/* -------------------------------------------------------
   14. Responsive
------------------------------------------------------- */
@media (max-width: 900px) {
  .saas-hero .container,
  .saas-callout .container,
  .saas-involved .container { grid-template-columns: 1fr; }
  .saas-hero-art { order: -1; }
  .saas-pillars .container,
  .saas-events-grid { grid-template-columns: 1fr 1fr; }
  .saas-footer .container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .saas-hero h1 { font-size: 32px; }
  .saas-pillars .container,
  .saas-events-grid,
  .saas-footer .container { grid-template-columns: 1fr; }
  .saas-section-head { flex-direction: column; align-items: flex-start; }
}

/* =======================================================
   15. Version 1.1 additions
   Mobile menu, hero options, layout and sidebar, cards,
   articles, pagination, sticky header, donate colours.
======================================================= */

/* ---- Accessibility: skip link ---- */
.skip-link:focus {
  clip: auto; width: auto; height: auto;
  top: 8px; left: 8px; padding: 10px 16px;
  background: #ffffff; color: var(--saas-blue);
  border-radius: 8px; z-index: 100000;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

/* ---- Donate button colours and topbar link ---- */
.btn-primary.donate-blue { background: var(--saas-blue); }
.btn-primary.donate-green { background: var(--saas-green); }
.saas-footer .saas-footer-links a.saas-donate-footer { color: var(--saas-orange); }

/* ---- Sticky header (switched on in Theme Options) ---- */
body.saas-sticky-header .saas-header { position: sticky; top: 0; z-index: 50; }
body.admin-bar.saas-sticky-header .saas-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar.saas-sticky-header .saas-header { top: 46px; }
}

/* ---- Hero: replaceable image, three layouts ---- */
.saas-hero-img {
  width: 100%; max-width: 560px;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(9, 46, 178, .18);
}
.saas-hero.is-text .container { grid-template-columns: 1fr; }
.saas-hero.is-bg {
  position: relative;
  background-color: var(--saas-blue-deep);
  background-size: cover; background-position: center;
}
.saas-hero.is-bg::before {
  content: ""; position: absolute; inset: 0;
  background: var(--saas-blue-deep);
  opacity: var(--saas-hero-overlay, .55);
}
.saas-hero.is-bg .container {
  position: relative; z-index: 1;
  grid-template-columns: 1fr;
  padding-top: 110px; padding-bottom: 120px;
}
.saas-hero.is-bg h1 { color: #ffffff; }
.saas-hero.is-bg p.lead { color: #F1ECE0; }
.saas-hero.is-bg .saas-hero-eyebrow { background: rgba(255, 255, 255, .16); color: #ffffff; }
.saas-hero.is-bg .btn-outline { border-color: #ffffff; color: #ffffff !important; }
.saas-hero.is-bg .btn-outline:hover { background: #ffffff; color: var(--saas-blue) !important; }

/* ---- Content layout with optional sidebar ---- */
.container.saas-layout { padding-top: 56px; padding-bottom: 56px; }
.saas-layout.sidebar-right { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.saas-layout.sidebar-left { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; }
.saas-layout.sidebar-none > .saas-main-col { max-width: var(--saas-content-width, 780px); margin: 0 auto; }
.saas-layout.sidebar-none.is-wide > .saas-main-col { max-width: none; }

/* ---- Sidebar widgets ---- */
.saas-sidebar .widget {
  background: #ffffff; border: 1px solid var(--saas-border);
  border-radius: var(--saas-radius); padding: 22px; margin-bottom: 24px;
}
.saas-sidebar .widget-title,
.saas-sidebar .widgettitle,
.saas-sidebar .widget h1,
.saas-sidebar .widget h2,
.saas-sidebar .widget h3,
.saas-sidebar .widget h4 { font-size: 16px; margin: 0 0 12px; }
.saas-sidebar ul { list-style: none; margin: 0; padding: 0; }
.saas-sidebar li { padding: 7px 0; border-bottom: 1px solid #F0F2F8; font-size: 14px; }
.saas-sidebar li:last-child { border-bottom: 0; }
.saas-sidebar .search-form { display: flex; gap: 8px; }
.saas-sidebar .search-form label { flex: 1; }
.saas-sidebar input[type="search"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--saas-border);
  border-radius: 8px; font-size: 14px;
}
.saas-sidebar .search-submit {
  background: var(--saas-blue); color: #ffffff; border: 0;
  padding: 10px 16px; border-radius: 8px; font-weight: 600; cursor: pointer;
}

/* ---- Post cards: images, meta, grid columns and list layout ---- */
.saas-posts { display: grid; gap: 24px; }
.saas-posts.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.saas-posts.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.saas-posts.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.saas-posts.is-list { grid-template-columns: 1fr; }

.saas-card-title { color: inherit; }
.saas-card-title:hover { color: var(--saas-orange); }
.saas-card .card-meta { font-size: 13px; color: var(--saas-muted); margin: 0 0 10px; }
.saas-card-img-link {
  display: block; margin: -24px -24px 18px; overflow: hidden;
  border-radius: var(--saas-radius) var(--saas-radius) 0 0;
}
.saas-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.saas-card.is-list { display: grid; grid-template-columns: 1fr; padding: 0; overflow: hidden; }
.saas-card.is-list .saas-card-body { padding: 24px; }
.saas-card.is-list.has-img { grid-template-columns: 260px minmax(0, 1fr); }
.saas-card.is-list .saas-card-img-link { margin: 0; border-radius: 0; position: relative; min-height: 200px; }
.saas-card.is-list .saas-card-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }

/* ---- Article (single post and page body) ---- */
.saas-article { font-size: 17px; }
.saas-article img { border-radius: var(--saas-radius); }
.saas-article h2 { font-size: 26px; margin-top: 1.6em; }
.saas-article h3 { font-size: 20px; margin-top: 1.4em; }
.saas-article blockquote {
  border-left: 3px solid var(--saas-orange);
  margin: 1.5em 0; padding: .5em 0 .5em 1.5em;
  color: var(--saas-muted); font-style: italic;
}
.saas-article .saas-featured { margin: 0 0 2em; }
.saas-article .saas-tags { font-size: 14px; color: var(--saas-muted); margin-top: 2em; }
.saas-page-header .meta a { color: inherit; text-decoration: underline; }

/* ---- Pagination (numbered) ---- */
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; }
.nav-links .page-numbers {
  padding: 8px 14px; border: 1px solid var(--saas-border);
  border-radius: 8px; font-size: 14px; font-weight: 600; background: #ffffff;
}
.nav-links .page-numbers.current { background: var(--saas-blue); border-color: var(--saas-blue); color: #ffffff; }
.nav-links a.page-numbers:hover { border-color: var(--saas-orange); }

/* ---- Footer menu and newsletter embed ---- */
.saas-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.saas-footer-menu a { font-size: 14px; color: #B9BDD1; }
.saas-footer-menu a:hover { color: #ffffff; }
.saas-newsletter-embed input[type="email"],
.saas-newsletter-embed input[type="text"] { padding: 12px 16px; border-radius: 8px; border: 0; font-size: 14px; }
.saas-newsletter-embed input[type="submit"],
.saas-newsletter-embed button {
  background: var(--saas-orange); color: #ffffff; border: 0;
  padding: 12px 22px; border-radius: 8px; font-weight: 600; cursor: pointer;
}

/* ---- Responsive: layout ---- */
@media (max-width: 900px) {
  .saas-layout.sidebar-right,
  .saas-layout.sidebar-left { grid-template-columns: 1fr; }
  .saas-posts.cols-3,
  .saas-posts.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saas-hero.is-bg .container { padding-top: 72px; padding-bottom: 80px; }
}
@media (max-width: 680px) {
  .saas-header-donate { order: 3; width: 100%; text-align: center; padding: 11px 16px; }
  .saas-posts.cols-2,
  .saas-posts.cols-3,
  .saas-posts.cols-4 { grid-template-columns: 1fr; }
  .saas-card.is-list.has-img { grid-template-columns: 1fr; }
  .saas-card.is-list .saas-card-img-link { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ---- Mobile menu (900px and below): panel with tap-to-expand sub-items ---- */
@media (max-width: 900px) {
  .saas-header { position: relative; }
  .saas-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 8px;
    border: 1px solid var(--saas-border); background: #ffffff; cursor: pointer;
    color: var(--saas-ink);
  }
  .saas-menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #ffffff; padding: 8px 32px 16px;
    border-bottom: 1px solid #EEE8DA;
    box-shadow: 0 14px 24px rgba(9, 46, 178, .08);
    max-height: calc(100vh - 120px); overflow-y: auto;
    z-index: 60;
  }
  .saas-nav.is-open .saas-menu { display: flex; }
  .saas-menu li { flex-wrap: wrap; }
  .saas-menu a { flex: 1; padding: 13px 0; }
  .saas-submenu-toggle { padding: 10px; }

  .saas-menu .sub-menu,
  .saas-menu .sub-menu .sub-menu {
    display: none; position: static;
    opacity: 1; visibility: visible; transform: none;
    flex-basis: 100%; min-width: 0;
    padding: 0 0 0 16px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .saas-menu li.is-open > .sub-menu { display: block; }
  .saas-menu .sub-menu a { padding: 11px 0; white-space: normal; }
  .saas-menu .sub-menu li:hover > a,
  .saas-menu .sub-menu li:focus-within > a { background: none; }
  .saas-menu .sub-menu .saas-submenu-toggle { margin-right: 0; }
  .saas-menu .sub-menu .saas-submenu-toggle svg { transform: none; }
  .saas-menu li.is-open > .saas-submenu-toggle svg { transform: rotate(180deg); }
}

/* ---- Comments ---- */
.saas-comments { margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--saas-border); }
.saas-comments-title { font-size: 22px; }
.saas-comment-list { list-style: none; padding: 0; margin: 0 0 2em; }
.saas-comment-list .children { list-style: none; padding-left: 24px; }
.saas-comment-list .comment-body { padding: 16px 0; border-bottom: 1px solid #F0F2F8; font-size: 15px; }
.saas-comment-list .avatar { float: left; margin-right: 12px; border-radius: 50%; }
.saas-comments .comment-form input[type="text"],
.saas-comments .comment-form input[type="email"],
.saas-comments .comment-form input[type="url"],
.saas-comments .comment-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--saas-border); border-radius: 8px; font-size: 15px;
}
.saas-comments .form-submit input[type="submit"] {
  background: var(--saas-orange); color: #ffffff; border: 0;
  padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;
}