/* Mason & Green – blog theme
   Brings blog pages in line with the main site: same header, footer,
   colours, fonts and buttons. Loaded last on every blog page, so it
   overrides blog/style.css and the per-article <style> blocks. */

:root{
  --ink:#111111; --ink-2:#1b1b1b; --ink-3:#262626;
  --paper:#f7f5f0; --white:#fff; --line-main:#e4e0d6;
  --gold:#c8a45c; --gold-2:#7f6124; --green:#1f4d3a;
  --r:14px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* remap the old blog palette to the main site palette */
  --bg:#f7f5f0; --bg-soft:#ffffff; --card:#ffffff;
  --text:#111111; --muted:#6b6b6b; --line:#e4e0d6;
  --accent:#c8a45c; --accent-strong:#d8b56c;
  --shadow:none; --radius:14px;
}

html body{font:16px/1.6 var(--sans);color:var(--ink);background:var(--paper)}
html body h1,html body h2,html body h3,html body h4{font-family:var(--serif);font-weight:600;letter-spacing:0;color:inherit}
html body a{color:inherit}

/* ---------- Header (identical to main site) ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(17,17,17,.96);color:#fff;backdrop-filter:saturate(1.2) blur(6px)}
.hdr .wrap,.mg-footer .wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.hdr .logo,.mg-footer .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.hdr .logo .mark{display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--gold);border-radius:50%;font:600 .9rem var(--serif);color:var(--gold)}
.hdr .logo span:not(.mark),.mg-footer .logo span{font:600 1.15rem var(--serif);letter-spacing:.02em}
.hdr .nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center}
.hdr .nav a{text-decoration:none;font-size:.95rem;opacity:.9;color:#fff}
.hdr .nav a:hover{opacity:1;color:var(--gold)}
.hdr .nav a[aria-current]{color:var(--gold);opacity:1}
.hdr .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:0;padding:10px 16px;border-radius:999px;font-weight:600;font-size:.9rem;text-decoration:none;border:1.5px solid transparent;opacity:1}
.hdr .btn-wa{background:#25d366;color:#0b2e17}
.hdr .nav .btn-wa:hover{color:#0b2e17;background:#2fe072}
.hdr .menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;padding:8px}
@media (max-width:960px){
  .hdr .menu-btn{display:block}
  .hdr .nav{position:absolute;left:0;right:0;top:68px;background:var(--ink);display:none;padding:12px 20px 24px}
  .hdr .nav.open{display:block}
  .hdr .nav ul{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ---------- Footer (identical to main site) ---------- */
.mg-footer{background:var(--ink);color:#cfcfcf;padding:64px 0 96px;font-size:.95rem;margin:0}
.mg-footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px}
.mg-footer .fh{font:600 1rem/1.15 var(--sans);color:#fff;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.mg-footer p{margin:0 0 1em;color:#cfcfcf}
.mg-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.mg-footer a{text-decoration:none;color:#cfcfcf;overflow-wrap:anywhere}
.mg-footer a:hover{color:var(--gold)}
.mg-footer .flogo img{height:56px;width:auto;max-width:160px;object-fit:contain;flex:0 0 auto}
.mg-footer .social{margin-top:12px;font-size:.9rem}
.mg-footer .legal{border-top:1px solid var(--ink-3);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.85rem}
.mg-footer .legal a,.mg-footer .legal .linkbtn{display:inline-block;padding:6px 4px;min-height:24px}
.mg-footer .linkbtn{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;text-decoration:underline}
@media (max-width:900px){.mg-footer .fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.mg-footer .fgrid{grid-template-columns:1fr}}

/* ---------- Hero: stays dark over the photo, like the main site ---------- */
html body .hero{color:#fff}
html body .hero h1{font-family:var(--serif);font-weight:600;letter-spacing:0;line-height:1.12;color:#fff}
html body .hero .eyebrow{color:var(--gold)}
html body .hero .hero-text,html body .hero p{color:rgba(255,255,255,.9)}
html body .hero .article-meta,html body .hero .article-meta *{color:rgba(255,255,255,.8)}
html body .hero .article-meta a{color:var(--gold)}
html body .hero .btn-outline,html body .hero .btn-secondary{color:#fff!important;border-color:rgba(255,255,255,.55);background:transparent}

/* ---------- Buttons ---------- */
html body .btn{border-radius:999px;font-weight:600}
html body .btn-primary{background:var(--gold);color:var(--ink)}
html body .btn-primary:hover{background:#d8b56c}
html body .btn-outline,html body .btn-secondary{border:1.5px solid var(--ink);color:var(--ink)!important;background:transparent}
html body .btn-outline:hover,html body .btn-secondary:hover{background:var(--ink);color:#fff!important}
html body .eyebrow{color:var(--gold-2)}

/* ---------- Article body: light card like the main site ---------- */
html body .article-content{background:#fff;border:1px solid var(--line-main);border-radius:var(--r);box-shadow:none;color:#2b2b2b}
html body .article-content *:not(a):not(.btn):not(.btn *){color:inherit}
html body .article-content p,html body .article-content li,html body .article-content td,html body .article-content dd{color:#333}
html body .article-content h2,html body .article-content h3,html body .article-content h4,html body .article-content strong,html body .article-content summary,html body .article-content th{color:var(--ink)}
html body .article-content a:not(.btn){color:var(--green);text-decoration:underline;text-underline-offset:2px}
html body .article-content a:not(.btn):hover{color:var(--gold-2)}
html body .article-highlight{background:#fbf5e6;border-left:4px solid var(--gold);color:#3d3320}
html body .article-highlight *{color:#3d3320}
html body .article-highlight a{color:var(--green)!important}

/* cards, accordions, link pills inside articles */
html body .article-content :is(.area-card,.guide-card,.region-card,.fact-card,.fact-list div,.fact-grid div,.walk-box,.itinerary-grid div,.park-card,.summary-box,.region-note,.note-box,.timeline-item,.card,details){background:var(--paper);border-color:var(--line-main);box-shadow:none}
html body .article-content :is(.area-card,.guide-card,.region-card,.quick-links a,.related-links a,.district-links a,.mini-nav a,.link-pills a,.park-index a){color:var(--ink)!important;text-decoration:none!important}
html body .article-content :is(.quick-links a,.related-links a,.district-links a,.mini-nav a,.link-pills a,.park-index a,.tag,.badge){background:#fff;border:1px solid var(--line-main);color:var(--ink)}
html body .article-content :is(.area-card,.guide-card,.region-card):hover{border-color:var(--gold);background:#fff;transform:none}
html body .article-content :is(.area-card span,.guide-card span,.area-card strong,.guide-card strong,.region-card strong){color:var(--gold-2)}
html body .article-content summary::after{color:var(--gold-2)}
html body .article-content :is(.accordion-content,.restaurant-details,.place-details,.pub-details){border-top-color:var(--line-main)}
html body .article-content table{border-color:var(--line-main)}
html body .article-content :is(th,td){border-color:var(--line-main)}

/* sections around the article */
html body .section.alt,html body .mg-related-travel{background:#fff}
html body .mg-related-travel .btn:not(.btn-primary){color:var(--ink)!important}
html body .cta-inner{background:var(--green);border:0;border-radius:22px;color:#fff}
html body .cta-inner *{color:#fff}
html body .cta-inner .btn-primary{color:var(--ink)}
html body .cta-inner .btn-outline,html body .cta-inner .btn-secondary{border-color:rgba(255,255,255,.55);color:#fff!important}
html body .mg-blog-proof{color:var(--muted)}
html body .mg-author-byline,html body .mg-author-byline *{color:inherit}

/* neutralise old generic header/nav/footer rules on older one-off pages */
html body header.hdr{padding:0;margin:0;display:block;border:0;box-shadow:none;height:auto;min-height:0;width:auto;justify-content:normal;flex-direction:row}
html body header.hdr nav{background:transparent;padding:0;margin:0;box-shadow:none;border:0;width:auto;height:auto;position:static;transform:none}
@media (max-width:960px){html body header.hdr nav.nav{position:absolute;background:var(--ink);padding:12px 20px 24px}}
html body header.hdr nav ul li{margin:0;padding:0;border:0}
html body footer.mg-footer{text-align:left;padding:64px 0 96px}
html body .mg-footer .fgrid > div{min-width:0}
/* placeholder pages with no layout wrapper */
html body > main.mg-plain{max-width:860px;margin:40px auto;padding:0 20px}
html body .cta-inner .mg-blog-proof{color:rgba(255,255,255,.8)}

/* accessible contrast: dark text on WhatsApp green (white fails WCAG) */
html body .btn-whatsapp,html body .btn-whatsapp:hover{color:#0b2e17!important}
html body .btn-whatsapp svg{fill:currentColor}
html body .hdr .nav .btn-wa,html body .hdr .nav .btn-wa:hover{color:#0b2e17!important}
/* wide tables scroll sideways on small screens instead of stretching the page */
html body .article-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}