/*
Theme Name: Joana Wanders Magazine V6
Author: Joana Wanders
Description: Editorial magazine theme with interactive Places map for Joana Wanders.
Version: 6.0.0
Requires PHP: 7.4
Text Domain: joana-wanders-v6
*/

:root{
  --jw-ink:#171716;
  --jw-paper:#faf8f4;
  --jw-paper-2:#f1ede5;
  --jw-muted:#5e5a54;
  --jw-line:#d8d3ca;
  --jw-white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--jw-ink);background:#fff;font-family:"Inter",Arial,sans-serif;font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{width:min(1360px,91vw);margin:0 auto}

/* HEADER */
.site-header{background:#fff;border-bottom:1px solid #eeeae3}
.header-inner{min-height:88px;display:grid;grid-template-columns:1.25fr auto auto;align-items:center;gap:34px}
.brand-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:29px;font-weight:500;line-height:.95;letter-spacing:.052em;text-transform:uppercase}
.brand-tag{margin-top:5px;font-size:7.5px;line-height:1;letter-spacing:.12em;text-transform:uppercase}
.menu{display:flex;gap:36px;list-style:none;margin:0;padding:0}
.menu a{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.social{display:flex;gap:14px;align-items:center}
.social a{width:24px;height:24px;display:grid;place-items:center}
.social svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.social .filled svg{fill:currentColor;stroke:none}

/* HERO */
.hero{min-height:500px;background:#757575 center/cover no-repeat;position:relative;display:flex;align-items:center;color:#fff}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.40),rgba(0,0,0,.18) 38%,rgba(0,0,0,.04) 72%,rgba(0,0,0,0))}
.hero-inner{position:relative;z-index:1}
.hero-copy{max-width:510px;transform:translateY(-8px)}
.kicker{font-size:9px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.hero h1,.section-title,.about-title,.card-title,.review-title,.place-archive-title{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500
}
.hero h1{margin:18px 0 3px;font-size:clamp(54px,5.2vw,74px);line-height:.90;letter-spacing:-.032em}
.hero .script{margin:4px 0 20px;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(36px,3.3vw,47px);font-style:italic;line-height:.98}
.hero-desc{max-width:330px;margin:0 0 23px;font-size:12px;line-height:1.6}
.button{display:inline-block;background:#080808;color:#fff;padding:14px 22px;font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}

/* COMMON */
.section{padding:58px 0}
.paper{background:var(--jw-paper)}
.editorial{display:grid;grid-template-columns:23% 1fr;gap:54px;align-items:start}
.section-title{margin:14px 0;font-size:clamp(33px,3vw,45px);line-height:.99;letter-spacing:-.022em}
.section-copy{max-width:230px;color:var(--jw-muted);font-size:11.5px;line-height:1.6}
.text-link{display:inline-block;margin-top:25px;padding-bottom:4px;border-bottom:1px solid currentColor;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card-image{aspect-ratio:1.25/1;background:linear-gradient(135deg,#ebe6de,#e3ddd4);overflow:hidden;position:relative}
.card-image:empty:after{content:"JOANA WANDERS";position:absolute;left:18px;bottom:16px;font-family:"Cormorant Garamond",Georgia,serif;font-size:14px;letter-spacing:.06em;opacity:.35}
.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .card-image img{transform:scale(1.018)}
.card-cat{margin:9px 0 6px;font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:#6e6962}
.card-title{margin:0 0 5px;font-size:21px;line-height:1.03}
.card-excerpt{margin:0;max-width:95%;color:#45423d;font-size:10.5px;line-height:1.42}

/* INTERACTIVE MAP */
.travel-map{padding:46px 0 50px;background:#fff;border-top:1px solid #eee9e1;border-bottom:1px solid #eee9e1}
.map-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:22px}
.map-head h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:38px;font-weight:500;line-height:1;margin:0}
.map-head p{margin:0;color:var(--jw-muted);font-size:10.5px;max-width:360px}
.map-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr);gap:28px;align-items:stretch}
#jw-travel-map{height:390px;min-height:390px;background:#eeeae3;border:1px solid #e8e2d8}
.map-directory{border:1px solid var(--jw-line);background:var(--jw-paper);padding:22px 22px 18px;max-height:390px;overflow:auto}
.place-group + .place-group{margin-top:22px;padding-top:20px;border-top:1px solid var(--jw-line)}
.place-group-title{font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px}
.place-list{list-style:none;padding:0;margin:0}
.place-list li{border-bottom:1px solid #e8e2d9}
.place-list li:last-child{border-bottom:0}
.place-list a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;line-height:1.05}
.place-count{font-family:"Inter",Arial,sans-serif;font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:var(--jw-muted);white-space:nowrap;padding-top:3px}
.map-empty{height:390px;display:grid;place-items:center;text-align:center;background:var(--jw-paper);border:1px solid var(--jw-line);padding:30px}
.map-empty p{max-width:420px;color:var(--jw-muted);font-size:11px}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{box-shadow:0 5px 24px rgba(0,0,0,.12)}
.jw-popup-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;margin:0 0 5px}
.jw-popup-link{font-size:8px;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}

/* DO GOOD */
.do-good{display:grid;grid-template-columns:40% 1fr;min-height:385px;border-bottom:1px solid #efebe4}
.do-good-photo{min-height:385px;background:#e4ded4;overflow:hidden}
.do-good-photo img{width:100%;height:100%;object-fit:cover}
.do-good-right{display:grid;grid-template-columns:38% 1fr;gap:34px;align-items:center;padding:40px 4.5vw}
.story-list{border-top:1px solid var(--jw-line)}
.story{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--jw-line)}
.story-thumb{width:74px;height:62px;background:linear-gradient(135deg,#ebe6de,#e3ddd4);overflow:hidden}
.story-thumb img{width:100%;height:100%;object-fit:cover}
.story .card-title{font-size:15.5px;line-height:1.04;margin:1px 0 0}

/* LIVE */
.live-section{padding-top:53px;padding-bottom:56px}

/* REVIEWS */
.reviews{background:var(--jw-paper-2);padding:28px 0}
.reviews-grid{display:grid;grid-template-columns:1.05fr repeat(3,1fr);gap:26px;align-items:center}
.reviews-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.35}
.review-card{display:grid;grid-template-columns:70px 1fr;gap:13px;align-items:center}
.review-thumb{width:70px;height:76px;background:#ddd7cc;overflow:hidden}
.review-thumb img{width:100%;height:100%;object-fit:cover}
.review-title{font-size:14.5px;line-height:1.03;margin:2px 0 3px}
.review-meta{font-size:8px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.review-rating{font-size:11px;letter-spacing:.06em;margin-top:2px}

/* ABOUT */
.about-section{padding:22px 0}
.about{display:grid;grid-template-columns:29% 36% 1fr;gap:40px;align-items:center}
.about-photo{aspect-ratio:1.22/1;background:#e3ddd2;overflow:hidden}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-title{margin:7px 0 12px;font-size:31px;font-style:italic;line-height:.99}
.about p{max-width:300px;font-size:10.5px;line-height:1.48}
.newsletter{border-left:1px solid var(--jw-line);padding-left:38px}
.newsletter p{font-size:10px}
.newsletter-form{display:flex;margin-top:12px}
.newsletter-form input{width:100%;border:1px solid var(--jw-line);padding:10px;font-family:inherit;font-size:9px}
.newsletter-form button{border:0;background:#111;color:#fff;padding:0 15px;font-size:8px;letter-spacing:.07em;text-transform:uppercase}
.social-bottom{display:flex;gap:10px;margin-top:19px}
.social-bottom a{width:25px;height:25px;display:grid;place-items:center}
.social-bottom svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7}

/* FOOTER */
.site-footer{background:#111;color:#fff;padding:16px 0}
.footer-inner{display:flex;justify-content:space-between;gap:18px;font-size:7px;letter-spacing:.06em;text-transform:uppercase}

/* ARCHIVES */
.archive-main,.single-main,.page-main,.place-archive{padding:62px 0 90px}
.archive-title,.single-title,.page-title,.place-archive-title{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(46px,6vw,78px);line-height:.95
}
.place-archive-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:38px}
.place-archive-head p{max-width:450px;color:var(--jw-muted);font-size:11px;margin:0}
.single-content,.page-content{width:min(760px,92vw);margin:34px auto;font-size:16px;line-height:1.8}

@media(max-width:900px){
  .header-inner{grid-template-columns:1fr;gap:13px;padding:18px 0}
  .menu{gap:17px;flex-wrap:wrap}
  .hero{min-height:540px}
  .hero-copy{transform:none}
  .section{padding:48px 0}
  .editorial,.do-good,.do-good-right,.about,.map-layout,.place-archive-head{grid-template-columns:1fr}
  .map-head{display:block}
  .map-head p{margin-top:8px}
  #jw-travel-map{height:330px;min-height:330px}
  .map-directory{max-height:none}
  .do-good-right{padding:38px 4.5vw}
  .cards,.cards.three{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .newsletter{border-left:0;border-top:1px solid var(--jw-line);padding:25px 0 0}
  .footer-inner{flex-direction:column}
}