/*
Theme Name: WWHP Simple
Theme URI: https://wizardingworldharrypotter.com
Author: The Patel Family (built by Muse)
Author URI: https://wizardingworldharrypotter.com/about/
Description: A simple, bookish blog theme for an unofficial family fan site about the Wizarding World theme parks. Mobile-first, one column, no sliders, no fuss.
Version: 1.0.7
License: GPL-2.0-or-later
Text Domain: wwhp-simple
Tags: blog, one-column, custom-menu, featured-images
*/

:root{
  --paper:#faf7f0; --ink:#26241f; --ink-soft:#55524a; --gold:#9a7b1c;
  --gold-bright:#c6962b; --line:#e3ddcd; --card:#ffffff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--gold); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif; line-height:1.25; color:var(--ink); margin:1.2em 0 .5em}
h1{font-size:2rem} h2{font-size:1.55rem} h3{font-size:1.25rem}
p{margin:0 0 1em}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}
.wide{max-width:1020px}

/* Header */
.site-header{background:#1d2b22; color:#f3efe2; border-bottom:4px solid var(--gold-bright)}
.site-header .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; padding-top:18px; padding-bottom:18px}
.site-title{font-family:Georgia,serif; font-size:1.45rem; margin:0; flex:1 1 auto}
.site-title a{color:#f3efe2}
.site-title a:hover{text-decoration:none; color:var(--gold-bright)}
.site-tagline{margin:2px 0 0; font-size:.9rem; color:#cfd6c9; flex-basis:100%}
.menu-toggle{display:none}
.main-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 18px}
.main-nav a{color:#f3efe2; font-size:.98rem; padding:6px 2px; display:inline-block}
.main-nav a:hover{color:var(--gold-bright); text-decoration:none}
.main-nav .sub-menu{list-style:none; margin:0; padding:6px 0; display:none; position:absolute; background:#24382c; border:1px solid #38503f; border-radius:6px; min-width:180px; z-index:50}
.main-nav li{position:relative}
.main-nav li:hover .sub-menu,.main-nav li:focus-within .sub-menu{display:block}
.main-nav .sub-menu a{display:block; padding:6px 14px}

/* Content */
.site-main{padding:34px 0 10px}
.post-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:22px 24px; margin:0 0 22px}
.post-card h2{margin-top:0; font-size:1.4rem}
.post-meta{color:var(--ink-soft); font-size:.88rem; margin:0 0 10px}
.post-thumb{border-radius:8px; margin:0 0 16px; width:100%}
.entry-content img{border-radius:8px; margin:18px auto; width:100%}
.entry-content .wp-caption{width:100% !important}
.hero-photo{margin:0 0 10px}
.hero-photo img{border-radius:10px; width:100%}
.park-card .card-photo{border-radius:6px; margin:0 0 12px; width:100%}
.wp-caption{max-width:100%; text-align:center}
.wp-caption-text, figcaption{font-size:.88rem; color:var(--ink-soft); margin-top:6px}
blockquote{border-left:3px solid var(--gold-bright); margin:1em 0; padding:.2em 0 .2em 16px; color:var(--ink-soft)}
.page-title{margin-top:0}
.pagination{display:flex; gap:14px; justify-content:space-between; margin:10px 0 30px}

/* Front page */
.welcome{padding:8px 0 4px}
.welcome h1{margin-top:0; font-size:2.1rem}
.park-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0 8px}
.park-card{background:var(--card); border:1px solid var(--line); border-top:4px solid var(--gold-bright); border-radius:10px; padding:18px 20px}
.park-card h3{margin:0 0 6px}
.park-card p{margin:0 0 8px; color:var(--ink-soft); font-size:.95rem}
.latest h2{border-bottom:2px solid var(--line); padding-bottom:8px}

/* Footer */
.site-footer{background:#1d2b22; color:#dfe4d8; margin-top:44px; padding:28px 0 34px; font-size:.9rem}
.site-footer a{color:var(--gold-bright)}
.disclaimer{color:#aebba9; font-size:.82rem; line-height:1.55; border-top:1px solid #38503f; padding-top:16px; margin-top:16px}

/* Small screens */
@media (max-width:640px){
  body{font-size:16px}
  h1{font-size:1.7rem} h2{font-size:1.35rem}
  .welcome h1{font-size:1.8rem}
  .park-grid{grid-template-columns:1fr}
  .site-header .wrap{gap:6px 12px}
  .menu-toggle{display:inline-block; background:var(--gold-bright); color:#1d2b22; border:0; border-radius:6px; font-size:1rem; padding:8px 14px; cursor:pointer}
  .main-nav{display:none; flex-basis:100%}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column; gap:0}
  .main-nav a{display:block; padding:10px 2px; border-top:1px solid #38503f; width:100%}
  .main-nav .sub-menu{display:block; position:static; background:transparent; border:0; padding:0 0 0 16px}
  .post-card{padding:18px 16px}
}