/* =========================================================
   Pitiusa Electronica — main stylesheet
   Ibiza sunset palette pulled from the site logo.
   ========================================================= */

:root {
  --navy-900: #0b1626;
  --navy-800: #12233d;
  --navy-700: #1a3358;
  --orange-600: #e2622c;
  --orange-500: #ea7a35;
  --gold-400: #f4a93b;
  --gold-300: #f6c065;
  --cream-100: #fbf5e8;
  --cream-200: #f3e8d2;
  --white: #ffffff;
  --ink: #1c1c1c;
  --muted: #6b6458;
  --success: #3f7a4e;
  --error: #b23b3b;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 8px rgba(11, 22, 38, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 22, 38, 0.14);

  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --container-width: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream-100);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--orange-600); text-decoration: none; }
a:hover { color: var(--navy-800); text-decoration: underline; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--navy-800);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 64px 0; }
.section--tight { padding: 40px 0; }
.section--alt { background: var(--white); }
.section--navy { background: var(--navy-800); color: var(--cream-100); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-600);
  font-weight: 600;
  margin-bottom: 0.6em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--orange-500), var(--gold-400));
  color: var(--navy-900);
  box-shadow: 0 8px 24px rgba(226, 98, 44, 0.35);
}
.btn-primary:hover { filter: brightness(1.06); text-decoration: none; color: var(--navy-900); }
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); text-decoration: none; }
.btn-dark {
  background: var(--navy-800);
  color: var(--white);
}
.btn-dark:hover { background: var(--navy-700); color: var(--white); text-decoration: none; }
.btn-small { padding: 8px 16px; font-size: 0.85rem; }
.btn-ad {
  background: var(--gold-400);
  color: var(--navy-900);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 22, 38, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(244, 169, 59, 0.25);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.site-branding { display: flex; align-items: center; }
.site-branding-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.site-branding-link:hover { text-decoration: none; }
.site-branding img.custom-logo {
  height: 56px;
  width: 56px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
}
.site-branding-text { display: flex; flex-direction: column; line-height: 1.25; }
.site-branding .site-title {
  font-family: var(--font-heading);
  color: var(--white);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.site-branding .site-tagline {
  display: block;
  font-size: 0.66rem;
  color: var(--gold-300);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
@media (max-width: 480px) {
  .site-branding .site-tagline { display: none; }
}

.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  color: var(--cream-100);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
}
.primary-nav a:hover { color: var(--gold-400); text-decoration: none; }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--gold-400);
  color: var(--gold-400);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; }
  .primary-nav {
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--navy-900);
    border-bottom: 1px solid rgba(244,169,59,0.25);
    display: none;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; padding: 8px 24px 20px; }
  .primary-nav li { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .primary-nav a { display: block; padding: 12px 0; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: var(--white);
  overflow: hidden;
  --hero-photo: none;
  /* Layer order (first = top): sunset glow accents, a darkening veil so text
     stays readable over a photo, the optional Header Image itself, then a
     navy gradient fallback/base fill. front-page.php sets --hero-photo via
     an inline style when Appearance → Customize → Header Image is set —
     everything still composes correctly with or without it. */
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(244, 169, 59, 0.28), transparent 55%),
    radial-gradient(ellipse at 80% 0%, rgba(226, 98, 44, 0.32), transparent 50%),
    linear-gradient(180deg, rgba(11, 22, 38, 0.45), rgba(11, 22, 38, 0.82)),
    var(--hero-photo),
    linear-gradient(180deg, var(--navy-900), var(--navy-800) 60%, #172c4c);
  background-color: var(--navy-800);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 120px 0 100px;
  text-align: center;
}
.hero-inner { max-width: 780px; margin: 0 auto; }
.hero h1, .hero h2, .hero h3 { color: var(--white); }
.hero p.lead { font-size: 1.15rem; color: var(--cream-200); }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-media { aspect-ratio: 4/3; background: var(--cream-200); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.card-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-600);
  background: rgba(226, 98, 44, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  align-self: flex-start;
}
.card h3 { margin-bottom: 6px; }
.card h3 a { color: var(--navy-800); }
.card h3 a:hover { color: var(--orange-600); }
.card-meta { color: var(--muted); font-size: 0.88rem; margin-bottom: 10px; }
.card-excerpt { color: var(--ink); font-size: 0.94rem; flex: 1; }
.card-footer { margin-top: 14px; }

/* ---------- Section headers ---------- */
.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.section-head--left { margin: 0 0 40px; text-align: left; }

/* ---------- Category chips / filters ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.chip {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--cream-200);
  color: var(--navy-800);
}
.chip.is-active, .chip:hover {
  background: var(--navy-800);
  color: var(--white);
  border-color: var(--navy-800);
  text-decoration: none;
}

/* ---------- Map embed ---------- */
.map-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 40px;
  border: 1px solid var(--cream-200);
}
.map-embed iframe { width: 100%; height: 480px; border: 0; display: block; }
.map-embed-note { font-size: 0.85rem; color: var(--muted); margin-top: 8px; }
.map-placeholder {
  background: var(--white);
  border: 1px dashed var(--cream-200);
  border-radius: var(--radius-md);
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  margin-bottom: 40px;
}

/* ---------- Single guide / event ---------- */
.entry-header { margin-bottom: 28px; }
.entry-meta-row { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); font-size: 0.92rem; margin-bottom: 18px; }
.entry-meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.entry-content { max-width: 760px; }
.entry-content img { border-radius: var(--radius-md); margin: 16px 0; }
.entry-featured-image { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 28px; }

.info-box {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.info-box dt { font-weight: 700; color: var(--navy-800); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 14px; }
.info-box dt:first-child { margin-top: 0; }
.info-box dd { margin: 4px 0 0; }

.ad-disclosure {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy-800);
  background: var(--gold-300);
  padding: 3px 9px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- FAQ accordion ---------- */
.faq-category { margin-bottom: 44px; }
.faq-category h2 { border-bottom: 2px solid var(--gold-400); padding-bottom: 10px; }
.faq-item {
  background: var(--white);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy-800);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--orange-600);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item .faq-answer { padding: 0 20px 18px; color: var(--ink); }

/* ---------- Top 5 ---------- */
.top5-list { counter-reset: top5; list-style: none; margin: 0; padding: 0; }
.top5-track {
  counter-increment: top5;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.top5-track::before {
  content: counter(top5);
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold-400);
  text-align: center;
}
.top5-track h4 { margin: 0 0 2px; }
.top5-track .artist { color: var(--muted); margin: 0 0 8px; }

/* ---------- Playlist embeds ---------- */
.playlist-embed iframe { border-radius: var(--radius-md); width: 100%; }

/* ---------- Contact form ---------- */
.contact-form { max-width: 640px; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-family: var(--font-heading); font-weight: 600; margin-bottom: 6px; color: var(--navy-800); }
.form-row input, .form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--white);
}
.form-row input:focus, .form-row textarea:focus { outline: 2px solid var(--gold-400); border-color: var(--gold-400); }
.form-hp { position: absolute; left: -9999px; top: -9999px; }
.form-notice { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-weight: 600; }
.form-notice.success { background: rgba(63,122,78,0.12); color: var(--success); }
.form-notice.error { background: rgba(178,59,59,0.12); color: var(--error); }
.form-consent { font-size: 0.85rem; color: var(--muted); }

/* ---------- Social follow strip ---------- */
.social-follow { display: flex; gap: 14px; flex-wrap: wrap; }
.social-follow a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--white);
  color: var(--navy-800);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
}
.social-follow a:hover { background: var(--gold-400); text-decoration: none; }
.social-follow svg { width: 18px; height: 18px; fill: currentColor; }

/* Narrow phones (iPhone SE/mini through standard widths) don't have room
   for all three pills at full size — they'd wrap onto a second line — so
   shrink padding/gap/font/icon just enough to keep Instagram, Tiktok and
   Youtube on one row instead, down to a 320px-wide viewport. */
@media (max-width: 480px) {
  .social-follow { gap: 6px; flex-wrap: nowrap; }
  .social-follow a {
    padding: 6px 8px;
    gap: 4px;
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .social-follow svg { width: 13px; height: 13px; flex-shrink: 0; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-900);
  color: var(--cream-200);
  /* Shorter now that the footer is just the brand column + bottom bar —
     the Explore/Get in touch columns were removed as duplicates of the
     header nav (and the logo row below was removed too), so there's much
     less content stacked above the divider than there used to be. */
  padding: 32px 0 24px;
}
.footer-grid {
  /* Down to a single column (brand only) since Explore/Get in touch were
     removed — no longer needs a grid, and it's capped so the row doesn't
     stretch edge-to-edge on wide screens. */
  max-width: 420px;
  margin-bottom: 20px;
}
.footer-grid h4 { color: var(--white); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: var(--cream-200); }
.footer-grid a:hover { color: var(--gold-400); }
/* .social-follow pills keep their own navy-on-white text everywhere they're
   used, including here in the footer, where .footer-grid a would otherwise
   win the cascade (same specificity, declared later) and wash them out. */
.footer-grid .social-follow a { color: var(--navy-800); }
.footer-grid .social-follow a:hover { color: var(--navy-800); }
.footer-brand p { color: var(--cream-200); font-size: 0.92rem; max-width: 340px; margin-bottom: 16px; }
.footer-brand h4 { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--muted);
}
.footer-bottom a { color: var(--cream-200); }
.footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .footer-grid { max-width: none; }
  .hero { padding: 80px 0 60px; }
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.small-print { font-size: 0.82rem; color: var(--muted); }
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--gold-400); color: var(--navy-900);
  padding: 10px 16px; z-index: 999; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* Legal pages */
.legal-content h2 { margin-top: 2em; }
.legal-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.legal-content td, .legal-content th { border: 1px solid var(--cream-200); padding: 8px 12px; text-align: left; }