/*
Theme Name: Hidden Gems
Theme URI: https://hiddengems.es
Description: Modern editorial travel theme for Hidden Gems Spain. Native (non-headless) theme rendering the gem custom post type, hierarchical province taxonomy, and gem-type categories.
Author: Hidden Gems
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: hiddengems
*/

/* =========================================================================
   Design tokens — modern editorial / Mediterranean coastal
   ========================================================================= */
:root {
  --hg-bg:        #fbf9f5;  /* warm paper */
  --hg-surface:   #ffffff;
  --hg-sand:      #efe7d8;  /* soft sand */
  --hg-ink:       #1d1b18;  /* near-black text */
  --hg-muted:     #6b665d;  /* secondary text */
  --hg-line:      #e7e0d3;  /* hairline borders */
  --hg-sea:       #0e6e8c;  /* primary — deep Mediterranean */
  --hg-sea-dark:  #0a566e;
  --hg-terra:     #c8643c;  /* warm accent / CTA */
  --hg-terra-dark:#a94e2c;
  --hg-gold:      #c79a3a;

  --hg-radius:    14px;
  --hg-radius-sm: 9px;
  --hg-shadow:    0 6px 24px rgba(29,27,24,.08);
  --hg-shadow-lg: 0 18px 48px rgba(29,27,24,.16);
  --hg-maxw:      1180px;
  --hg-gap:       clamp(1rem, 2.5vw, 1.75rem);

  --hg-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --hg-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================================
   Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--hg-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--hg-ink);
  background: var(--hg-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--hg-sea); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--hg-terra); }

h1, h2, h3, h4 { font-family: var(--hg-serif); font-weight: 600; line-height: 1.12; color: var(--hg-ink); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
p { margin: 0 0 1.1em; }

.container { max-width: var(--hg-maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.eyebrow { font-family: var(--hg-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; color: var(--hg-terra); margin: 0 0 .5rem; }
.lead { font-size: 1.15rem; color: var(--hg-muted); }
.center { text-align: center; }
.visually-hidden { position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--hg-sans); font-weight:600; font-size:.98rem; padding:.7rem 1.4rem; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn-primary { background: var(--hg-terra); color:#fff; }
.btn-primary:hover { background: var(--hg-terra-dark); color:#fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--hg-ink); border-color: var(--hg-line); }
.btn-ghost:hover { border-color: var(--hg-sea); color: var(--hg-sea); }

/* =========================================================================
   Header / nav
   ========================================================================= */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(251,249,245,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hg-line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.site-logo img { height: 40px; width: auto; }
.site-logo .wordmark { font-family: var(--hg-serif); font-size: 1.4rem; font-weight: 600; color: var(--hg-ink); }
.nav-menu { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-menu a { font-family: var(--hg-sans); font-weight: 500; color: var(--hg-ink); font-size: .98rem; position: relative; }
.nav-menu a:hover, .nav-menu a.active { color: var(--hg-sea); }
.nav-menu a.active::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--hg-terra); border-radius:2px; }
.nav-cta { background: var(--hg-sea); color:#fff!important; padding:.5rem 1.1rem; border-radius:999px; }
.nav-cta:hover { background: var(--hg-sea-dark); }
.nav-toggle { display:none; background:none; border:0; font-size:1.6rem; cursor:pointer; color:var(--hg-ink); line-height:1; }

@media (max-width: 860px) {
  .nav-toggle { display:block; }
  .nav-menu { position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:var(--hg-surface); border-bottom:1px solid var(--hg-line); padding:.5rem 1rem 1rem; box-shadow:var(--hg-shadow); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s ease; }
  .nav-menu.open { transform:none; opacity:1; pointer-events:auto; }
  .nav-menu li { width:100%; }
  .nav-menu a { display:block; padding:.7rem 0; width:100%; border-bottom:1px solid var(--hg-line); }
  .nav-menu .nav-cta { margin-top:.6rem; display:inline-block; }
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero { position: relative; min-height: min(78vh, 640px); display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,40,52,.35), rgba(10,40,52,.62)); }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-content { position:relative; z-index:2; max-width:760px; padding:2rem 1.25rem; }
.hero-content h1 { color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.25); }
.hero-content p { color:rgba(255,255,255,.92); font-size:1.2rem; }

/* Search */
.search-form { position:relative; max-width:560px; margin:1.6rem auto 0; }
.search-form input { width:100%; padding:1rem 1.3rem; font-size:1.05rem; border:0; border-radius:999px; box-shadow:var(--hg-shadow-lg); font-family:var(--hg-sans); color:var(--hg-ink); }
.search-form input:focus { outline:3px solid rgba(14,110,140,.4); }
.autocomplete-box { position:absolute; left:0; right:0; top:calc(100% + .5rem); background:#fff; border-radius:var(--hg-radius-sm); box-shadow:var(--hg-shadow-lg); overflow:hidden; text-align:left; z-index:30; }
.autocomplete-box .ac-item { display:block; padding:.7rem 1.1rem; border-bottom:1px solid var(--hg-line); color:var(--hg-ink); cursor:pointer; }
.autocomplete-box .ac-item:last-child { border-bottom:0; }
.autocomplete-box .ac-item:hover, .autocomplete-box .ac-item.active { background:var(--hg-sand); }
.autocomplete-box .ac-item small { display:block; color:var(--hg-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }

/* Page hero (interior) */
.page-hero { position:relative; min-height:clamp(280px, 42vh, 420px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.page-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,40,52,.15), rgba(10,40,52,.7)); }
.page-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero .container { position:relative; z-index:2; padding-bottom:2rem; }
.page-hero h1 { color:#fff; }
.page-hero .gem-location { color:rgba(255,255,255,.9); font-size:1.05rem; margin:0; }

/* =========================================================================
   Breadcrumb
   ========================================================================= */
.breadcrumb { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.9rem; margin-bottom:.6rem; }
.breadcrumb a { color:rgba(255,255,255,.85); }
.breadcrumb a:hover { color:#fff; }
.breadcrumb .sep { opacity:.6; }
.breadcrumb .current { color:#fff; font-weight:600; }
/* breadcrumb on light backgrounds */
.breadcrumb--light a { color:var(--hg-muted); }
.breadcrumb--light .current { color:var(--hg-ink); }

/* =========================================================================
   Card grid
   ========================================================================= */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--hg-gap); }
.grid--tight { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }

.card { display:flex; flex-direction:column; background:var(--hg-surface); border-radius:var(--hg-radius); overflow:hidden; box-shadow:var(--hg-shadow); color:var(--hg-ink); transition:transform .2s ease, box-shadow .2s ease; height:100%; }
.card:hover { transform:translateY(-4px); box-shadow:var(--hg-shadow-lg); color:var(--hg-ink); }
.card-media { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--hg-sand); }
.card-media img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.card:hover .card-media img { transform:scale(1.05); }
.card-tag { position:absolute; top:.7rem; left:.7rem; background:rgba(255,255,255,.92); color:var(--hg-ink); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:.28rem .6rem; border-radius:999px; }
.card-body { padding:1rem 1.15rem 1.25rem; display:flex; flex-direction:column; gap:.25rem; flex:1; }
.card-title { font-family:var(--hg-serif); font-size:1.18rem; font-weight:600; margin:0; line-height:1.2; }
.card-loc { font-size:.9rem; color:var(--hg-muted); display:flex; align-items:center; gap:.3rem; }
.card-loc small { color:var(--hg-sea); }

/* Section headings */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.section-head p { margin:0; color:var(--hg-muted); }

/* Pills (categories / regions) */
.pill-row { display:flex; flex-wrap:wrap; gap:.6rem; }
.pill { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; background:var(--hg-surface); border:1px solid var(--hg-line); border-radius:999px; font-weight:500; font-size:.95rem; color:var(--hg-ink); }
.pill:hover, .pill.active { background:var(--hg-sea); color:#fff; border-color:var(--hg-sea); }
.pill .count { color:var(--hg-muted); font-size:.82rem; }
.pill:hover .count, .pill.active .count { color:rgba(255,255,255,.8); }

/* =========================================================================
   Spotlight (gem of the day)
   ========================================================================= */
.spotlight { display:grid; grid-template-columns:1.15fr 1fr; background:var(--hg-surface); border-radius:var(--hg-radius); overflow:hidden; box-shadow:var(--hg-shadow); }
.spotlight-media { aspect-ratio:4/3; }
.spotlight-media img { width:100%; height:100%; object-fit:cover; }
.spotlight-body { padding:clamp(1.5rem,4vw,3rem); display:flex; flex-direction:column; justify-content:center; }
.spotlight-body .card-loc { margin-bottom:.5rem; }
@media (max-width:760px){ .spotlight { grid-template-columns:1fr; } }

/* =========================================================================
   Single gem layout
   ========================================================================= */
.gem-layout { display:grid; grid-template-columns:1fr 340px; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
@media (max-width:920px){ .gem-layout { grid-template-columns:1fr; } }
.gem-article { font-size:1.06rem; }
.gem-article :where(h2,h3){ margin-top:1.6em; }
.gem-article img { border-radius:var(--hg-radius-sm); margin:1.2rem 0; }

.gem-sidebar { position:sticky; top:90px; background:var(--hg-surface); border:1px solid var(--hg-line); border-radius:var(--hg-radius); padding:1.4rem 1.5rem; box-shadow:var(--hg-shadow); }
.gem-sidebar h3 { font-size:1.15rem; margin-bottom:1rem; padding-bottom:.7rem; border-bottom:1px solid var(--hg-line); }
.meta-info { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.meta-info > li { font-size:.95rem; line-height:1.5; }
.meta-info strong { display:inline-block; color:var(--hg-ink); }
.meta-info .price-list, .meta-info .opening-hours { list-style:none; margin:.3rem 0 0; padding:0; color:var(--hg-muted); font-size:.92rem; }
.badges { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.3rem; }
.badge { font-size:.78rem; font-weight:600; padding:.3rem .7rem; border-radius:999px; background:var(--hg-sand); color:var(--hg-ink); }
.badge--yes { background:#e3f0e6; color:#2c6e49; }
.badge--no  { background:#f3e3e0; color:#9a4a3a; }

/* Gallery */
.gem-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; margin:0 0 1.6rem; }
.gem-gallery img { aspect-ratio:1/1; object-fit:cover; border-radius:var(--hg-radius-sm); cursor:pointer; transition:opacity .15s ease; }
.gem-gallery img:hover { opacity:.85; }
.acf-map { width:100%; height:420px; border-radius:var(--hg-radius); overflow:hidden; margin:1.5rem 0; }
.acf-map img { max-width:inherit !important; }

/* Lightbox */
.lightbox { display:none; position:fixed; inset:0; z-index:1000; background:rgba(10,15,18,.92); align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw; max-height:86vh; border-radius:6px; }
.lightbox .lb-close { position:absolute; top:1.2rem; right:1.6rem; font-size:2.4rem; color:#fff; cursor:pointer; line-height:1; background:none; border:0; }
.lightbox .lb-nav { position:absolute; top:50%; transform:translateY(-50%); font-size:2.6rem; color:#fff; cursor:pointer; background:none; border:0; padding:1rem; }
.lightbox .lb-prev { left:.5rem; } .lightbox .lb-next { right:.5rem; }

/* =========================================================================
   Town menu
   ========================================================================= */
.town-menu { margin:1.8rem 0; }
.town-menu h3 { font-size:1.1rem; margin-bottom:.8rem; }

/* =========================================================================
   Discover / filters
   ========================================================================= */
.filter-bar { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.discover-count { color:var(--hg-muted); margin-bottom:1.2rem; font-size:.95rem; }
.pagination { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:2.5rem; }
.pagination a, .pagination span { display:inline-flex; min-width:42px; height:42px; align-items:center; justify-content:center; padding:0 .6rem; border-radius:8px; border:1px solid var(--hg-line); background:var(--hg-surface); font-weight:600; color:var(--hg-ink); }
.pagination .current { background:var(--hg-sea); color:#fff; border-color:var(--hg-sea); }
.pagination a:hover { border-color:var(--hg-sea); color:var(--hg-sea); }

/* =========================================================================
   Forms
   ========================================================================= */
.form-card { max-width:680px; margin-inline:auto; background:var(--hg-surface); border:1px solid var(--hg-line); border-radius:var(--hg-radius); padding:clamp(1.5rem,4vw,2.5rem); box-shadow:var(--hg-shadow); }
.form-card label { display:block; font-weight:600; font-size:.92rem; margin:1rem 0 .35rem; }
.form-card input, .form-card select, .form-card textarea { width:100%; padding:.8rem 1rem; font-size:1rem; font-family:var(--hg-sans); border:1.5px solid var(--hg-line); border-radius:var(--hg-radius-sm); background:var(--hg-bg); color:var(--hg-ink); }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline:none; border-color:var(--hg-sea); }
.form-card .invalid { border-color:var(--hg-terra); }
.form-card button[type=submit] { margin-top:1.4rem; }
.form-response { margin-top:1rem; font-weight:600; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background:var(--hg-ink); color:#cfc9bd; margin-top:4rem; }
.site-footer a { color:#cfc9bd; }
.site-footer a:hover { color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding-block:3rem; }
.footer-grid h4 { color:#fff; font-family:var(--hg-sans); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; }
.footer-grid ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.footer-brand .wordmark { font-family:var(--hg-serif); font-size:1.5rem; color:#fff; }
.footer-newsletter input { width:100%; padding:.7rem 1rem; border-radius:999px; border:0; margin-top:.6rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding-block:1.2rem; font-size:.85rem; color:#9a9488; text-align:center; }
@media (max-width:760px){ .footer-grid { grid-template-columns:1fr; gap:1.6rem; } }

/* =========================================================================
   Carousel (recent gems)
   ========================================================================= */
.carousel { position:relative; }
.carousel-track { display:flex; gap:var(--hg-gap); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:1rem; -ms-overflow-style:none; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-track > * { scroll-snap-align:start; flex:0 0 clamp(240px, 30%, 320px); }
.carousel-btn { position:absolute; top:38%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:0; background:var(--hg-surface); box-shadow:var(--hg-shadow); cursor:pointer; font-size:1.3rem; color:var(--hg-ink); z-index:5; }
.carousel-btn.prev { left:-10px; } .carousel-btn.next { right:-10px; }
@media (max-width:760px){ .carousel-btn { display:none; } }

/* 404 / empty states */
.empty-state { text-align:center; padding:4rem 1rem; color:var(--hg-muted); }
.empty-state h1 { font-size:clamp(3rem,10vw,6rem); color:var(--hg-sand); }

/* =========================================================================
   Ad slots
   ========================================================================= */
.hg-ad { margin: 2rem 0; text-align: center; min-height: 100px; overflow: hidden; }
.hg-ad ins { display: block; }
.hg-ad--sidebar { margin: 1.25rem 0 0; min-height: 250px; }
.hg-ad--placeholder {
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--hg-line); border-radius: var(--hg-radius-sm);
  background: repeating-linear-gradient(45deg, var(--hg-bg), var(--hg-bg) 10px, #f3eee3 10px, #f3eee3 20px);
  color: var(--hg-muted); font-size: .85rem; padding: 1.5rem; line-height: 1.4;
}
.hg-ad--placeholder strong { color: var(--hg-ink); }

/* utilities */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.prose{max-width:720px;margin-inline:auto}