/*
Theme Name:   Oleksandr Guitar
Theme URI:    https://gitarzystanaevent.pl
Author:       Oleksandr Hrechaniuk
Author URI:   https://gitarzystanaevent.pl
Description:  Custom theme for Oleksandr Hrechaniuk — Gitara. One-page-style premium event guitarist site with per-city landing pages (Miasto custom post type), built to match the original static HTML design exactly.
Version:      1.1.0
Requires PHP: 7.4
Text Domain:  oleksandr-guitar
*/

:root {
  --ecru: #FDFBF7;
  --ecru2: #F6EFE2;
  --espresso: #2C1E18;
  --espresso2: #3D2A20;
  --espresso3: #1A100C;
  --black1: #0B0A09;
  --black2: #17140F;
  --black3: #221E18;
  --umber: #6B5347;
  --gold: #A9791F;
  --goldbright: #C79A2E;
  --goldpale: #DCC98D;
  --font-main: "Avant Garde", "Century Gothic", "Poppins", sans-serif;
}

* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; }

/* Lets cross-page anchor links (e.g. a city page linking to /#kontakt)
   land below the sticky header even without the in-page JS offset handler. */
#o-artyscie, #oferta, #wideo, #duet, #opinie, #kontakt { scroll-margin-top: 96px; }

body {
  background: var(--ecru);
  color: var(--espresso);
  font-family: var(--font-main);
}

::selection { background: var(--gold); color: var(--ecru); }

/* Keep the fixed nav clear of the WP admin toolbar for logged-in editors */
body.admin-bar #site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar #site-header { top: 46px; }
}

/* Grain texture overlay */
.grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.label-eyebrow {
  font-family: var(--font-main);
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}

.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(135deg, var(--goldbright), var(--gold));
  color: var(--espresso3);
  font-weight: 700;
  letter-spacing: .02em;
  padding: 1rem 2rem;
  border-radius: 14px;
  box-shadow: 0 10px 30px -8px rgba(169,121,31,.55), 0 2px 8px -2px rgba(44,30,24,.4);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), filter .35s;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(169,121,31,.7), 0 4px 12px -2px rgba(44,30,24,.5); filter: brightness(1.05); }
.btn-gold:active { transform: translateY(0px) scale(.98); }
.btn-gold:focus-visible { outline: 2px solid var(--ecru); outline-offset: 3px; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  border: 1px solid rgba(253,251,247,.4);
  color: var(--ecru);
  font-weight: 600;
  padding: 1rem 2rem;
  border-radius: 14px;
  transition: border-color .35s, background .35s, transform .35s;
  background: rgba(253,251,247,.03);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--gold); background: rgba(169,121,31,.1); transform: translateY(-2px); }
.btn-ghost:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.btn-outline-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  border: 1px solid var(--espresso);
  color: var(--espresso);
  font-weight: 700;
  padding: .95rem 2rem;
  border-radius: 14px;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
}
.btn-outline-dark:hover { background: var(--espresso); color: var(--ecru); transform: translateY(-2px); }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1); }
.reveal-left.in { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(36px); transition: opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1); }
.reveal-right.in { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(.92); transition: opacity 1s cubic-bezier(.16,.8,.24,1), transform 1s cubic-bezier(.16,.8,.24,1); }
.reveal-scale.in { opacity: 1; transform: scale(1); }

/* Hero stage-light background (used behind the video poster / as a no-JS fallback) */
.hero-bg {
  background:
    radial-gradient(ellipse 60% 55% at 78% 15%, rgba(199,154,46,.28), transparent 60%),
    radial-gradient(ellipse 45% 40% at 15% 85%, rgba(169,121,31,.14), transparent 65%),
    linear-gradient(160deg, var(--espresso3) 0%, var(--espresso) 45%, var(--espresso2) 100%);
}

/* Black metallic finish — uniform brushed-sheen treatment for solid dark surfaces */
.metal-bg {
  position: relative;
  background:
    linear-gradient(115deg, transparent 18%, rgba(255,255,255,.065) 41%, rgba(220,201,141,.12) 50%, rgba(255,255,255,.06) 59%, transparent 82%),
    radial-gradient(ellipse 95% 55% at 18% -5%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(ellipse 70% 45% at 100% 100%, rgba(255,255,255,.035), transparent 60%),
    linear-gradient(160deg, var(--black1) 0%, var(--black2) 48%, var(--black3) 100%);
}

/* Semi-transparent tint over the hero video — keeps the gold/espresso mood and text legible without hiding the footage */
.hero-video-tint {
  background:
    linear-gradient(to bottom, rgba(8,5,3,.78) 0, rgba(8,5,3,.15) 200px, rgba(8,5,3,0) 320px),
    radial-gradient(ellipse 60% 55% at 78% 15%, rgba(199,154,46,.22), transparent 60%),
    linear-gradient(160deg, rgba(26,16,12,.75) 0%, rgba(44,30,24,.5) 45%, rgba(61,42,32,.4) 100%);
}

.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.float-slow { animation: floatSlow 7s ease-in-out infinite; }

/* Marquee */
/* Duration scales with the track: 4x the content of the old 2-group track, so 4x the
   32s to keep the same ~40px/s scroll speed. */
.marquee-track { display: flex; width: max-content; animation: marquee 128s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Card lift */
.lift { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1); }
.lift:hover { transform: translateY(-6px); }

.shadow-luxe { box-shadow: 0 24px 60px -20px rgba(44,30,24,.35), 0 4px 16px -4px rgba(169,121,31,.15); }

/* Video tile play button */
.play-btn {
  width: 68px; height: 68px; border-radius: 999px;
  background: rgba(253,251,247,.4);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(253,251,247,.5);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.5);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .4s, border-color .4s;
}
.video-tile:hover .play-btn { transform: scale(1.1); background: var(--goldbright); border-color: var(--goldbright); }

/* Nav link underline */
.nav-link { position: relative; }
.nav-link.on-video { text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--gold); transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--goldbright); }

/* Mobile nav */
.mobile-nav { transition: clip-path .6s cubic-bezier(.16,.8,.24,1); clip-path: circle(0px at calc(100% - 40px) 40px); }
.mobile-nav.open { clip-path: circle(150% at calc(100% - 40px) 40px); }

/* Testimonial slider */
.t-track { scroll-snap-type: x mandatory; scrollbar-width: none; justify-content: safe center; }
.t-track::-webkit-scrollbar { display: none; }
.t-slide { scroll-snap-align: center; }

.icon-badge {
  width: 52px; height: 52px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--goldpale);
  background: radial-gradient(circle at 30% 20%, rgba(199,154,46,.14), transparent 70%);
  color: var(--gold);
}

.num-badge {
  font-family: var(--font-main);
  font-weight: 300;
  color: rgba(169,121,31,.35);
}

/* ===== iOS-style filled rounded form fields ===== */
.field { position: relative; }
.field label {
  display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--gold); margin-bottom: .6rem;
}
.field input, .field select, .field textarea {
  width: 100%; background: rgba(44,30,24,.035); border: 1.5px solid transparent;
  color: var(--espresso); font-family: var(--font-main); font-size: .98rem; padding: .9rem 1.1rem;
  border-radius: 13px; appearance: none; -webkit-appearance: none; transition: border-color .3s, background .3s;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: rgba(44,30,24,.35); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(169,121,31,.06); }
.field select { cursor: pointer; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23C5A059' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; }
.field select option { color: #111; }

/* City directory cards (kept for reference — Gdzie Gram? page currently uses the flowing text-link layout) */
.city-card {
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 24px 60px -20px rgba(44,30,24,.35), 0 4px 16px -4px rgba(169,121,31,.15);
}
.city-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.city-card:hover img { transform: scale(1.06); }
.city-card .city-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,10,9,.88) 0%, rgba(11,10,9,.25) 55%, transparent 80%);
}
.city-card .city-card-arrow {
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.city-card:hover .city-card-arrow { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .float-slow { animation: none !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Long-form page content (page.php, index.php excerpts).

   These templates originally used Tailwind's `prose` classes, but the
   @tailwindcss/typography plugin was never installed — so `prose` matched
   nothing and, with preflight resetting everything, <h2> rendered identically
   to <p> and lists lost their bullets. That went unnoticed until the privacy
   policy became the first plain page with real content.

   Rather than add the plugin (whose defaults would need heavy overriding to
   match this brand anyway), the elements an editor can actually produce are
   styled here directly, in the theme's own type scale.
   --------------------------------------------------------------------------- */
.entry-content { color: var(--umber); font-size: 1.0625rem; line-height: 1.8; }

.entry-content > * + * { margin-top: 1.15rem; }

.entry-content h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--espresso);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(44,30,24,.1);
}
.entry-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.entry-content h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--espresso);
  margin-top: 2rem;
}

.entry-content h4 {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--espresso);
  margin-top: 1.6rem;
}

.entry-content strong { color: var(--espresso); font-weight: 600; }
.entry-content em { font-style: italic; }

.entry-content a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s;
}
.entry-content a:hover { color: var(--goldbright); }
.entry-content a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.entry-content ul,
.entry-content ol { padding-left: 1.4rem; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-top: .5rem; }
.entry-content li::marker { color: var(--gold); }

.entry-content blockquote {
  border-left: 3px solid var(--gold);
  padding: .25rem 0 .25rem 1.25rem;
  font-style: italic;
  color: var(--espresso);
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
  display: block;
  overflow-x: auto;   /* narrow screens: scroll rather than overflow the page */
}
.entry-content thead th {
  text-align: left;
  font-weight: 700;
  color: var(--espresso);
  background: var(--ecru2);
  border-bottom: 2px solid rgba(169,121,31,.35);
}
.entry-content th,
.entry-content td {
  padding: .7rem .9rem;
  border: 1px solid rgba(44,30,24,.12);
  vertical-align: top;
}

.entry-content hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin-top: 2.5rem;
}

.entry-content img { border-radius: 14px; }