/*
Theme Name: Oceanic Marine
Theme URI: https://example.com/oceanic-marine
Author: Custom Build
Author URI: https://example.com
Description: A professional custom WordPress theme built for marine information websites. Fully editable menus, submenus, ads, logo, fonts, colours and homepage content directly from the WordPress dashboard. Responsive across phone, tablet and desktop.
Version: 1.0.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: oceanic-marine
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, responsive-layout, blog, e-commerce-ready
*/

/* =====================================================
   1. DESIGN TOKENS
   ===================================================== */
:root{
  /* -- Brand palette (overridable live from Customizer, see inc/customizer.php) -- */
  --c-navy-deep:   #0A2A43;
  --c-navy-mid:    #123A5C;
  --c-navy-soft:   #1D4E73;
  --c-teal:        #1B8A83;
  --c-teal-dark:   #146B65;
  --c-orange:      #E8622C;
  --c-orange-dark: #C94E1E;
  --c-sand:        #E4D9BE;
  --c-sand-light:  #F1EBDB;
  --c-foam:        #F7F8F5;
  --c-ink:         #172531;
  --c-mist:        #6B7B85;
  --c-line:        #D8E0E3;
  --c-white:       #FFFFFF;

  /* -- Typography (font selections editable in Customizer > Fonts) -- */
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --fs-h1: clamp(2.1rem, 4.5vw, 3.6rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.85rem;

  --radius-s: 4px;
  --radius-m: 8px;
  --shadow-card: 0 2px 14px rgba(10,42,67,0.08);
  --shadow-lift: 0 10px 30px rgba(10,42,67,0.16);
  --maxw: 1240px;
  --gutter: clamp(1.1rem, 3vw, 2.5rem);
}

/* =====================================================
   2. RESET & BASE
   ===================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--c-ink);
  background:var(--c-foam);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-teal-dark); text-decoration:none; }
a:hover{ color:var(--c-orange); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.15; margin:0 0 0.6em; color:var(--c-navy-deep); }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
p{ margin:0 0 1.1em; }
:focus-visible{ outline:3px solid var(--c-orange); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.u-eyebrow{
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:0.12em;
  font-size:0.75rem; color:var(--c-teal-dark); display:inline-block; margin-bottom:0.6em;
}
.btn{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family:var(--f-body); font-weight:600; font-size:0.95rem;
  padding:0.85em 1.6em; border-radius:var(--radius-s); border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--c-orange); color:var(--c-white); }
.btn-primary:hover{ background:var(--c-orange-dark); color:var(--c-white); }
.btn-outline{ background:transparent; border-color:var(--c-white); color:var(--c-white); }
.btn-outline:hover{ background:var(--c-white); color:var(--c-navy-deep); }
.btn-ghost{ background:transparent; border-color:var(--c-navy-deep); color:var(--c-navy-deep); }

/* Waypoint / ship's-route divider - signature motif */
.route-divider{ position:relative; height:64px; margin:0 auto; max-width:var(--maxw); }
.route-divider svg{ width:100%; height:100%; display:block; }

/* =====================================================
   3. TOP UTILITY BAR
   ===================================================== */
.topbar{
  background:var(--c-navy-deep); color:var(--c-sand-light);
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.03em;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:6px; }
.topbar a{ color:var(--c-sand-light); }
.topbar a:hover{ color:var(--c-orange); }
.topbar-left, .topbar-right{ display:flex; gap:1.4em; flex-wrap:wrap; }
.topbar .sep{ opacity:0.35; }

/* =====================================================
   4. SITE HEADER + NAVIGATION
   ===================================================== */
.site-header{
  background:var(--c-white);
  border-bottom:1px solid var(--c-line);
  position:sticky; top:0; z-index:500;
  background-image:
    linear-gradient(var(--c-white), var(--c-white)),
    repeating-linear-gradient(90deg, rgba(10,42,67,0.035) 0 1px, transparent 1px 64px);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:1.5rem; }
.site-branding{ display:flex; align-items:center; gap:0.75em; min-width:0; }
.site-branding img.custom-logo{ max-height:56px; width:auto; }
.site-branding .site-title{ font-family:var(--f-display); font-size:1.4rem; font-weight:700; color:var(--c-navy-deep); margin:0; white-space:nowrap; }
.site-branding .site-description{ font-family:var(--f-mono); font-size:0.7rem; color:var(--c-mist); margin:0; letter-spacing:0.05em; }

/* Primary nav */
.primary-nav{ display:flex; align-items:center; }
.primary-nav > ul{ display:flex; align-items:center; gap:0.2rem; }
.primary-nav > ul > li{ position:relative; }
.primary-nav > ul > li > a{
  display:block; padding:0.9em 0.9em; font-weight:600; font-size:0.95rem; color:var(--c-navy-deep);
  border-bottom:3px solid transparent;
}
.primary-nav > ul > li:hover > a,
.primary-nav > ul > li.current-menu-item > a{ color:var(--c-teal-dark); border-bottom-color:var(--c-orange); }

/* Dropdown submenus - unlimited depth, opens on hover (desktop) / tap (touch & mobile) */
.primary-nav ul ul{
  position:absolute; top:100%; left:0; min-width:230px;
  background:var(--c-navy-deep); border-radius:0 0 var(--radius-m) var(--radius-m);
  box-shadow:var(--shadow-lift); padding:0.5em 0;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:600;
}
.primary-nav ul ul ul{ top:0; left:100%; border-radius:var(--radius-m); }
.primary-nav li:hover > ul,
.primary-nav li.sub-open > ul{ opacity:1; visibility:visible; transform:translateY(0); }
.primary-nav ul ul li a{ color:var(--c-sand-light); padding:0.65em 1.2em; font-size:0.9rem; font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:0.5em; }
.primary-nav ul ul li a:hover{ background:rgba(255,255,255,0.06); color:var(--c-orange); }
.primary-nav .menu-item-has-children > a::after{
  content:""; display:inline-block; width:6px; height:6px; margin-left:6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); vertical-align:2px; opacity:0.6;
}
.primary-nav ul ul .menu-item-has-children > a::after{ transform:rotate(-45deg); }

.header-actions{ display:flex; align-items:center; gap:0.9rem; }
.header-search-toggle, .menu-toggle{
  background:none; border:2px solid var(--c-line); border-radius:var(--radius-s);
  width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.menu-toggle{ display:none; }

/* =====================================================
   5. HERO
   ===================================================== */
.hero{
  position:relative; overflow:hidden; color:var(--c-white);
  background:linear-gradient(160deg, var(--c-navy-deep) 0%, var(--c-navy-mid) 55%, var(--c-teal-dark) 130%);
  padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem);
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:0.15; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 78px, rgba(255,255,255,0.5) 78px 79px),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(255,255,255,0.5) 78px 79px);
}
.hero-grid{ position:relative; display:grid; grid-template-columns:1.1fr 0.9fr; gap:3rem; align-items:center; }
.hero h1{ color:var(--c-white); }
.hero .lede{ font-size:1.1rem; color:var(--c-sand-light); max-width:52ch; }
.hero-actions{ display:flex; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:2.2rem; margin-top:2.4rem; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family:var(--f-display); font-size:1.9rem; color:var(--c-white); }
.hero-stats div span{ font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; color:var(--c-sand-light); text-transform:uppercase; }
.hero-panel{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);
  border-radius:var(--radius-m); padding:1.6rem; backdrop-filter:blur(6px);
}
.hero-panel h3{ color:var(--c-white); font-size:1.05rem; }
.hero-panel ul{ display:grid; gap:0.8rem; }
.hero-panel li{ display:flex; gap:0.7em; font-size:0.92rem; color:var(--c-sand-light); align-items:flex-start; }
.hero-panel .dot{ width:8px; height:8px; border-radius:50%; background:var(--c-orange); margin-top:0.5em; flex:none; }

/* =====================================================
   6. LAYOUT: content + ad rail
   ===================================================== */
.page-wrap{ display:grid; grid-template-columns:2.3fr 0.9fr; gap:clamp(1.5rem,3vw,3rem); padding-block:clamp(2rem,5vw,3.5rem); }
.page-wrap.no-rail{ grid-template-columns:1fr; }
.content-col{ min-width:0; }
.ad-rail{ display:flex; flex-direction:column; gap:1.5rem; }
.ad-slot{
  background:var(--c-white); border:1px dashed var(--c-line); border-radius:var(--radius-m);
  padding:0.9rem; text-align:center;
}
.ad-slot .ad-label{ font-family:var(--f-mono); font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--c-mist); display:block; margin-bottom:0.6rem; }
.ad-slot .widget{ margin:0; }
.ad-slot img{ border-radius:var(--radius-s); margin:0 auto; }

.ad-strip{ background:var(--c-sand-light); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); padding:1.4rem 0; }
.ad-strip .ad-columns{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }

/* =====================================================
   7. SECTIONS: featured categories / blog grid / trust
   ===================================================== */
.section{ padding-block:clamp(2.5rem,5vw,4.5rem); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.section-head p{ color:var(--c-mist); max-width:60ch; margin:0; }
.section-alt{ background:var(--c-sand-light); }

.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; }
.cat-card{
  background:var(--c-white); border-radius:var(--radius-m); padding:1.5rem; box-shadow:var(--shadow-card);
  border-top:4px solid var(--c-teal); transition:transform .18s ease, box-shadow .18s ease;
}
.cat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.cat-card .icon{ width:44px; height:44px; border-radius:var(--radius-s); background:var(--c-navy-deep); color:var(--c-white); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; font-family:var(--f-mono); font-weight:700; }
.cat-card h3{ font-size:1.05rem; margin-bottom:0.35em; }
.cat-card p{ font-size:0.9rem; color:var(--c-mist); margin-bottom:0.6em; }
.cat-card .count{ font-family:var(--f-mono); font-size:0.72rem; color:var(--c-teal-dark); text-transform:uppercase; letter-spacing:0.06em; }

.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.post-card{ background:var(--c-white); border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column; }
.post-card .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--c-sand); }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card .body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:0.5rem; flex:1; }
.post-card .meta{ font-family:var(--f-mono); font-size:0.7rem; color:var(--c-mist); text-transform:uppercase; letter-spacing:0.05em; display:flex; gap:0.8em; flex-wrap:wrap; }
.post-card h3{ font-size:1.05rem; margin:0; }
.post-card h3 a{ color:var(--c-navy-deep); }
.post-card .excerpt{ font-size:0.9rem; color:var(--c-mist); margin:0; flex:1; }
.post-card .readmore{ font-weight:600; font-size:0.85rem; }

.trust-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.trust-strip div strong{ display:block; font-family:var(--f-display); font-size:1.6rem; color:var(--c-navy-deep); }
.trust-strip div span{ font-size:0.82rem; color:var(--c-mist); }

/* =====================================================
   8. NEWSLETTER
   ===================================================== */
.newsletter{
  background:linear-gradient(120deg, var(--c-navy-deep), var(--c-teal-dark));
  color:var(--c-white); border-radius:var(--radius-m); padding:clamp(1.8rem,4vw,3rem);
  display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:center;
}
.newsletter h2{ color:var(--c-white); margin-bottom:0.3em; }
.newsletter p{ color:var(--c-sand-light); margin-bottom:0; }
.newsletter-form{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.newsletter-form input[type="email"]{
  flex:1; min-width:200px; padding:0.9em 1.1em; border-radius:var(--radius-s); border:none; font-size:0.95rem;
}
.newsletter-form button{ border:none; }
.newsletter-note{ font-family:var(--f-mono); font-size:0.7rem; color:var(--c-sand-light); opacity:0.75; margin-top:0.6em; }
.newsletter-success{ background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.3); padding:0.9em 1.1em; border-radius:var(--radius-s); }

/* =====================================================
   9. SINGLE POST / PAGE
   ===================================================== */
.entry-header{ margin-bottom:1.6rem; }
.entry-header .u-eyebrow a{ color:var(--c-teal-dark); }
.entry-meta{ font-family:var(--f-mono); font-size:0.78rem; color:var(--c-mist); display:flex; gap:1em; flex-wrap:wrap; margin-bottom:0.8em; }
.entry-thumb{ border-radius:var(--radius-m); overflow:hidden; margin-bottom:1.8rem; box-shadow:var(--shadow-card); }
.entry-content{ font-size:1.03rem; }
.entry-content h2{ margin-top:1.6em; }
.entry-content h3{ margin-top:1.3em; }
.entry-content blockquote{ border-left:4px solid var(--c-orange); margin:1.6em 0; padding:0.2em 1.4em; font-style:italic; color:var(--c-navy-mid); background:var(--c-sand-light); border-radius:0 var(--radius-s) var(--radius-s) 0; }
.entry-content img{ border-radius:var(--radius-m); margin:1.2em 0; }
.entry-content table{ width:100%; border-collapse:collapse; margin:1.4em 0; }
.entry-content table th, .entry-content table td{ border:1px solid var(--c-line); padding:0.6em 0.8em; }
.entry-tags{ margin-top:2rem; display:flex; gap:0.5em; flex-wrap:wrap; }
.entry-tags a{ background:var(--c-sand-light); padding:0.4em 0.9em; border-radius:20px; font-size:0.8rem; color:var(--c-navy-deep); }
.entry-tags a:hover{ background:var(--c-teal); color:var(--c-white); }

.author-box{ display:flex; gap:1rem; background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius-m); padding:1.2rem; margin-top:2.2rem; box-shadow:var(--shadow-card); }
.author-box img{ width:64px; height:64px; border-radius:50%; flex:none; }

.post-nav{ display:flex; justify-content:space-between; gap:1rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--c-line); }
.post-nav a{ max-width:46%; font-size:0.9rem; }
.post-nav .label{ display:block; font-family:var(--f-mono); font-size:0.68rem; color:var(--c-mist); text-transform:uppercase; }

/* Category / subcategory dropdown filter, shown on blog archive */
.cat-filter{ display:flex; align-items:center; gap:0.7rem; background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius-s); padding:0.5rem 0.8rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.cat-filter label{ font-family:var(--f-mono); font-size:0.72rem; text-transform:uppercase; color:var(--c-mist); }
.cat-filter select{ border:1px solid var(--c-line); border-radius:var(--radius-s); padding:0.5em 0.7em; font-family:var(--f-body); background:var(--c-foam); }

/* =====================================================
   10. WIDGETS / SIDEBAR
   ===================================================== */
.widget{ background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius-m); padding:1.3rem; margin-bottom:1.5rem; box-shadow:var(--shadow-card); }
.widget-title{ font-family:var(--f-display); font-size:1rem; margin-bottom:0.8em; padding-bottom:0.5em; border-bottom:2px solid var(--c-sand); }
.widget ul li{ padding:0.4em 0; border-bottom:1px dashed var(--c-line); font-size:0.9rem; }
.widget ul li:last-child{ border-bottom:none; }

/* =====================================================
   11. CONTACT PAGE
   ===================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
.contact-info .info-item{ display:flex; gap:0.9rem; margin-bottom:1.3rem; }
.contact-info .info-item .ico{ width:42px; height:42px; border-radius:50%; background:var(--c-sand-light); color:var(--c-teal-dark); display:flex; align-items:center; justify-content:center; flex:none; font-family:var(--f-mono); font-weight:700; }
.contact-form{ background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius-m); padding:1.8rem; box-shadow:var(--shadow-card); }
.contact-form .field{ margin-bottom:1.1rem; }
.contact-form label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:0.4em; color:var(--c-navy-deep); }
.contact-form input, .contact-form textarea{
  width:100%; padding:0.8em 0.9em; border:1px solid var(--c-line); border-radius:var(--radius-s); font-family:var(--f-body); font-size:0.95rem;
}
.contact-form textarea{ min-height:130px; resize:vertical; }
.hp-field{ position:absolute; left:-9999px; }

/* =====================================================
   12. FOOTER
   ===================================================== */
.site-footer{ background:var(--c-navy-deep); color:var(--c-sand-light); margin-top:3rem; }
.footer-top{ padding-block:clamp(2.5rem,5vw,4rem); display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
.footer-brand .site-title{ color:var(--c-white); font-family:var(--f-display); font-size:1.3rem; }
.footer-brand p{ color:var(--c-sand-light); opacity:0.85; font-size:0.9rem; max-width:32ch; }
.footer-social{ display:flex; gap:0.6rem; margin-top:1rem; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; color:var(--c-white); }
.footer-social a:hover{ background:var(--c-orange); border-color:var(--c-orange); }
.footer-col h4{ color:var(--c-white); font-family:var(--f-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:1em; }
.footer-col ul li{ margin-bottom:0.65em; }
.footer-col a{ color:var(--c-sand-light); font-size:0.9rem; }
.footer-col a:hover{ color:var(--c-orange); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding:1.2rem 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.8rem; font-size:0.8rem; }
.footer-bottom .legal-links{ display:flex; gap:1.2rem; }
.footer-ad{ padding-block:1rem; border-top:1px solid rgba(255,255,255,0.12); text-align:center; }

/* =====================================================
   13. 404 / MISC
   ===================================================== */
.error-404{ text-align:center; padding-block:5rem; }
.error-404 .code{ font-family:var(--f-mono); font-size:5rem; color:var(--c-teal); font-weight:700; }
.pagination{ display:flex; gap:0.5rem; margin-top:2rem; flex-wrap:wrap; }
.pagination a, .pagination span{ padding:0.6em 1em; border:1px solid var(--c-line); border-radius:var(--radius-s); font-size:0.9rem; }
.pagination .current{ background:var(--c-navy-deep); color:var(--c-white); border-color:var(--c-navy-deep); }

/* =====================================================
   14. RESPONSIVE — TABLET
   ===================================================== */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .page-wrap{ grid-template-columns:1fr; }
  .ad-rail{ flex-direction:row; overflow-x:auto; }
  .ad-rail .ad-slot{ min-width:260px; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .post-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-strip{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .ad-strip .ad-columns{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
}

/* =====================================================
   15. RESPONSIVE — PHONE
   ===================================================== */
@media (max-width: 720px){
  .topbar .container{ flex-direction:column; align-items:flex-start; }
  .menu-toggle{ display:flex; }
  .primary-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,86vw); height:100vh;
    background:var(--c-navy-deep); transform:translateX(100%); transition:transform .25s ease;
    padding:5rem 1.4rem 2rem; overflow-y:auto; z-index:700;
  }
  .primary-nav.is-open{ transform:translateX(0); }
  .primary-nav > ul{ flex-direction:column; align-items:stretch; gap:0; }
  .primary-nav > ul > li > a{ color:var(--c-white); border-bottom:1px solid rgba(255,255,255,0.1); padding:0.9em 0.2em; }
  .primary-nav ul ul{ position:static; opacity:1; visibility:visible; transform:none; background:rgba(255,255,255,0.05); box-shadow:none; display:none; }
  .primary-nav li.sub-open > ul{ display:block; }
  .primary-nav ul ul ul{ left:0; padding-left:1rem; }
  .nav-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:650; }
  .nav-backdrop.is-open{ display:block; }

  .hero-stats{ gap:1.4rem; }
  .cat-grid, .post-grid, .trust-strip, .footer-top, .ad-strip .ad-columns{ grid-template-columns:1fr; }
  .newsletter{ grid-template-columns:1fr; text-align:left; }
  .site-branding .site-description{ display:none; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .section-head{ flex-direction:column; align-items:flex-start; }
}