/*
Theme Name: Vintage Shop
Author: Boone
Version: 2.2
*/

/* =========================
   SELF-HOSTED FONTS
   Put files in: /assets/fonts/
========================= */
@font-face{
  font-family:"Athletico Sans";
  src:
    url("/wp-content/themes/vintageshop/assets/fonts/AthleticoSans-Regular.woff2") format("woff2"),
    url("/wp-content/themes/vintageshop/assets/fonts/AthleticoSans-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Athletico Script";
  src:
    url("/wp-content/themes/vintageshop/assets/fonts/AthleticoScript-Regular.woff2") format("woff2"),
    url("/wp-content/themes/vintageshop/assets/fonts/AthleticoScript-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* =========================
   TOKENS (VINTAGE FEEL)
========================= */
:root{
  --bg:#070814;
  --bg2:#0b0d1b;

  --panel: rgba(14,16,30,.86);
  --panel2: rgba(10,12,22,.88);

  --line: rgba(255,255,255,.10);

  --gold:#F2D64B;
  --orange:#E07A3A;
  --red:#B13B34;

  --text:#F6F7FF;
  --muted:rgba(246,247,255,.74);

  --radius:18px;

  --font-brand: "Athletico Script", "Athletico Sans", system-ui, sans-serif;
  --font-display: "Athletico Sans", system-ui, sans-serif;
  --font-body: "Athletico Sans", system-ui, sans-serif;
}

/* =========================
   BASE
========================= */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: var(--font-body);
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(242,214,75,.07), transparent 60%),
    radial-gradient(700px 450px at 80% 15%, rgba(224,122,58,.06), transparent 65%),
    linear-gradient(180deg, var(--bg), var(--bg2) 70%, var(--bg));
  color:var(--text);
  line-height:1.5;
  text-align:center;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}
.wrap{max-width:1100px; margin:0 auto; padding:0 18px}
::selection{background: rgba(242,214,75,.22)}

/* accessibility */
.skip-link{
  position:absolute; left:-999px; top:10px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--line);
  color: var(--text);
  padding:10px 12px;
  border-radius: 12px;
  z-index:1000;
}
.skip-link:focus{left:10px}

/* =========================
   OPTIONAL SIDE STRIPES
   (enabled by body class from Customizer)
========================= */
body.has-side-stripes::before,
body.has-side-stripes::after{
  content:"";
  position:fixed;
  top:0; bottom:0;
  width:16px;
  z-index:0;
  pointer-events:none;
  opacity:.95;
}
body.has-side-stripes::before{
  left:0;
  background: linear-gradient(180deg, var(--gold), var(--orange), var(--red));
}
body.has-side-stripes::after{
  right:0;
  background: linear-gradient(180deg, var(--gold), var(--orange), var(--red));
}

/* keep content above side stripes */
.site-header, .site-main, .site-footer{position:relative; z-index:1;}

/* =========================
   STRIPES (TOP/BOTTOM)
========================= */
.stripes{display:grid; grid-template-rows: 12px 12px 12px}
.stripe{width:100%}
.s1{background: var(--gold)}
.s2{background: var(--orange)}
.s3{background: var(--red)}

/* =========================
   HEADER
========================= */
.site-header{
  position:sticky; top:0; z-index:20;
  background: rgba(7,8,20,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 0 14px;
}

/* Brand container (from header.php) */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

/* NEW: logo + title row */
.brand-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.brand-title{display:inline-block}

/* WordPress Custom Logo output */
.brand-logo-wrap .custom-logo-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.brand-logo-wrap .custom-logo{
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 0 16px rgba(242,214,75,.12));
}

/* Header title — Sans (not script) */
.brand-script{
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.0;
  color: var(--gold);
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 0 18px rgba(242,214,75,.18);
  letter-spacing: .12em;
  -webkit-text-stroke: 1.5px rgba(177,59,52,.85);
}

.brand-sub{
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(246,247,255,.72);
}

/* Nav supports WP menu output <li><a> */
.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap
}
.nav li{list-style:none; margin:0; padding:0}
.nav a, .nav li a{
  color: var(--muted);
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid transparent;
  font-size:14px;
  letter-spacing:.08em;
  text-transform: uppercase;
}
.nav a:hover, .nav li a:hover{
  border-color: rgba(242,214,75,.20);
  background: rgba(255,255,255,.04);
  color: var(--text);
}
/* Tagline (Site Description) */
.brand-sub{
  color: var(--gold);
}

/* =========================
   MAIN / SECTIONS / TYPE
========================= */
.site-main{padding: 18px 0 24px}
.section{padding: 42px 0}

.page-title, h1, h2, h3{
  font-family: var(--font-display);
  margin:0 0 12px;
}

h1, .page-title{
  color: var(--gold);
  font-size: clamp(34px, 4.2vw, 56px);
  letter-spacing: .10em;
  text-transform: uppercase;
  line-height:1.05;
}

h2{
  color: var(--gold);
  font-size: 30px;
  letter-spacing:.12em;
  text-transform: uppercase;
}

h3{
  color: var(--text);
  font-size: 16px;
  letter-spacing:.10em;
  text-transform: uppercase;
}

p{margin:0 0 14px; color: var(--muted)}
strong{color: var(--text)}

/* Card container (no icons/pictures required) */
.card{
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
  text-align:left;
  max-width: 980px;
  margin: 0 auto;
}

/* Make block editor content look good */
.wp-block-columns{gap:14px}
.wp-block-buttons{gap:10px}
.wp-block-button__link{
  border-radius:14px !important;
  border:1px solid rgba(242,214,75,.24) !important;
  background: rgba(242,214,75,.07) !important;
  color: var(--text) !important;
  font-weight:800 !important;
  padding:12px 14px !important;
  text-transform: uppercase;
  letter-spacing:.06em;
}
.wp-block-button__link:hover{background: rgba(242,214,75,.12) !important}

/* Links inside page content */
.content a{color: var(--gold); font-weight:800}
.content a:hover{text-decoration:underline}
.content ul, .content ol{margin:0 0 14px 1.1em; padding:0; color: var(--muted)}
.content li{margin:0 0 8px}

/* =========================
   FOOTER
========================= */
.site-footer{
  border-top:1px solid var(--line);
  background: rgba(7,8,20,.82);
}
.footer-inner{
  padding: 14px 0 18px;
  display:flex;
  justify-content:center;
}
.fineprint{
  color: rgba(246,247,255,.70);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform: uppercase;
}
/* Footer copyright line */
.fineprint{
  color: var(--gold);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 720px){
  .brand-logo-wrap .custom-logo{width:40px; height:40px}
  .brand-row{gap:12px}
  .card{padding:16px}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
}

/* NAV colors */
.nav a, .nav li a{
  color: var(--red);
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  font-size:14px;
  letter-spacing:.08em;
  text-transform: uppercase;
}

.nav a:hover, .nav li a:hover{
  color: var(--gold);
  border-color: rgba(242,214,75,.22);
  background: rgba(255,255,255,.04);
}

/* Current page menu item (WP adds these classes) */
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-ancestor > a,
.nav .current_page_ancestor > a{
  color: var(--gold);
  border-color: rgba(242,214,75,.22);
  background: rgba(255,255,255,.04);
}