/*
Theme Name: Café Latino
Theme URI: https://cafelatino.example
Author: Café Latino
Description: Bold neo-brutalist Latin-American single-page theme for Café Latino, Ashburton. Imported from a Lovable design.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cafelatino
Tags: one-page, custom-colors, custom-menu, featured-images, threaded-comments
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;0,9..144,900;1,9..144,600;1,9..144,900&family=DM+Sans:wght@400;500;700&display=swap');

:root{
  --rojo: 350 85% 52%;
  --naranja: 18 95% 58%;
  --amarillo: 45 100% 55%;
  --verde: 165 75% 38%;
  --turquesa: 185 80% 45%;
  --azul: 210 90% 50%;
  --rosa: 330 90% 65%;
  --morado: 285 70% 50%;
  --crema: 45 100% 92%;
  --tinta: 340 60% 15%;
  --bg: hsl(var(--crema));
  --fg: hsl(var(--tinta));
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{font-family:'Fraunces',serif;letter-spacing:-0.02em;margin:0}

.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:50;
  background:var(--bg);
  border-bottom:3px solid var(--fg);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:0.85rem 0}
.brand{display:flex;align-items:center;gap:0.5rem;font-family:'Fraunces',serif;font-weight:900;font-size:1.5rem}
.brand-mark{
  display:grid;place-items:center;height:36px;width:36px;border-radius:9999px;
  background:hsl(var(--rojo));color:hsl(var(--crema));border:3px solid var(--fg)
}
.nav-links{display:none;gap:1.75rem;font-size:0.875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em}
.nav-links a:hover{color:hsl(var(--rojo))}
.nav-cta{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:hsl(var(--rojo));color:hsl(var(--crema));
  border:3px solid var(--fg);padding:0.5rem 1.25rem;
  font-weight:700;font-size:0.875rem;text-transform:uppercase;
  box-shadow:8px 8px 0 0 var(--fg);transition:transform .15s,box-shadow .15s
}
.nav-cta:hover{transform:translate(2px,2px);box-shadow:none}
@media(min-width:768px){.nav-links{display:flex}}

/* ---------- Patterns ---------- */
.pattern-stripes{
  background-image: repeating-linear-gradient(45deg,
    hsl(var(--rojo)) 0 14px,
    hsl(var(--amarillo)) 14px 28px,
    hsl(var(--verde)) 28px 42px,
    hsl(var(--turquesa)) 42px 56px,
    hsl(var(--rosa)) 56px 70px);
}
.pattern-confetti{
  background-color: hsl(var(--crema));
  background-image:
    radial-gradient(circle at 15% 20%, hsl(var(--rojo)) 6px, transparent 7px),
    radial-gradient(circle at 75% 35%, hsl(var(--turquesa)) 5px, transparent 6px),
    radial-gradient(circle at 40% 70%, hsl(var(--amarillo)) 7px, transparent 8px),
    radial-gradient(circle at 85% 80%, hsl(var(--rosa)) 5px, transparent 6px),
    radial-gradient(circle at 25% 90%, hsl(var(--verde)) 6px, transparent 7px),
    radial-gradient(circle at 60% 15%, hsl(var(--morado)) 4px, transparent 5px);
  background-size: 220px 220px;
}
.pattern-checker{
  background-image:
    linear-gradient(45deg, hsl(var(--rojo)) 25%, transparent 25%, transparent 75%, hsl(var(--rojo)) 75%),
    linear-gradient(45deg, hsl(var(--rojo)) 25%, transparent 25%, transparent 75%, hsl(var(--rojo)) 75%);
  background-size:30px 30px;background-position:0 0,15px 15px;background-color:hsl(var(--amarillo));
}
.pattern-rays{
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    hsl(var(--amarillo)) 0deg 15deg,
    hsl(var(--naranja)) 15deg 30deg);
}
.pattern-zig{
  background-color:hsl(var(--turquesa));
  background-image:
    linear-gradient(135deg, hsl(var(--rosa)) 25%, transparent 25%),
    linear-gradient(225deg, hsl(var(--rosa)) 25%, transparent 25%),
    linear-gradient(45deg, hsl(var(--rosa)) 25%, transparent 25%),
    linear-gradient(315deg, hsl(var(--rosa)) 25%, transparent 25%);
  background-position:16px 0,16px 0,0 0,0 0;background-size:32px 32px;
}

/* ---------- Hero ---------- */
.hero{position:relative;border-bottom:3px solid var(--fg)}
.band{height:12px;border-bottom:3px solid var(--fg)}
.band.bottom{border-bottom:0;border-top:3px solid var(--fg)}
.hero-inner{position:relative}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;padding:4rem 0}
@media(min-width:768px){.hero-grid{grid-template-columns:repeat(12,1fr);padding:6rem 0}}
.hero-copy{position:relative;z-index:1}
@media(min-width:768px){.hero-copy{grid-column:span 7}}
.pill{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:hsl(var(--amarillo));border:3px solid var(--fg);
  padding:0.25rem 0.75rem;font-size:0.7rem;font-weight:900;text-transform:uppercase;letter-spacing:0.12em;
  margin-bottom:1.5rem;transform:rotate(-2deg)
}
.pill.r1{transform:rotate(1deg)}
.pill.l1{transform:rotate(-1deg)}
.hero-title{font-family:'Fraunces',serif;font-weight:900;line-height:0.85;letter-spacing:-0.02em;font-size:clamp(3.5rem,9vw,8.5rem);text-wrap:balance}
.hero-title .red{display:block;color:hsl(var(--rojo))}
.hero-title .green{display:block;font-style:italic;color:hsl(var(--verde))}
.hero-title .stroke{display:block;font-style:normal;font-size:clamp(1.75rem,3.5vw,3rem);margin-top:0.75rem;-webkit-text-stroke:2px var(--fg);color:transparent}
.hero-lede{margin-top:2rem;max-width:28rem;font-size:1.125rem;font-weight:500}
.btn-row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem}
.btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  border:3px solid var(--fg);padding:0.75rem 1.5rem;
  font-weight:700;text-transform:uppercase;
  box-shadow:8px 8px 0 0 var(--fg);transition:transform .15s,box-shadow .15s
}
.btn:hover{transform:translate(3px,3px);box-shadow:none}
.btn.red{background:hsl(var(--rojo));color:hsl(var(--crema))}
.btn.turq{background:hsl(var(--turquesa));color:var(--fg)}
.btn.purple{background:hsl(var(--morado));color:hsl(var(--crema))}

.hero-art{position:relative}
@media(min-width:768px){.hero-art{grid-column:span 5}}
.sun{
  position:absolute;top:-2.5rem;right:-2.5rem;height:18rem;width:18rem;border-radius:9999px;border:3px solid var(--fg);
  background-image: repeating-conic-gradient(hsl(var(--amarillo)) 0 12deg, hsl(var(--naranja)) 12deg 24deg);
  animation: spin-slow 18s linear infinite
}
.checker-block{position:absolute;bottom:-1.5rem;left:-1.5rem;height:8rem;width:8rem;border:3px solid var(--fg);transform:rotate(6deg);display:none}
.zig-block{position:absolute;top:50%;left:-2.5rem;height:5rem;width:5rem;border:3px solid var(--fg);transform:rotate(-12deg);display:none}
@media(min-width:640px){.checker-block{display:block}}
@media(min-width:768px){.zig-block{display:block}}
.frame{position:relative;aspect-ratio:4/5;border:3px solid var(--fg);box-shadow:12px 12px 0 0 var(--fg);overflow:hidden;background:hsl(var(--rojo))}
.frame img{width:100%;height:100%;object-fit:cover}
.sticker{
  position:absolute;bottom:-2rem;right:-1rem;z-index:2;
  background:hsl(var(--rosa));border:3px solid var(--fg);
  padding:0.75rem 1rem;transform:rotate(-6deg);box-shadow:8px 8px 0 0 var(--fg);
  animation:wiggle 3s ease-in-out infinite
}
.sticker .lab{display:flex;align-items:center;gap:0.25rem;font-size:0.7rem;font-weight:900;text-transform:uppercase}
.sticker .ttl{font-family:'Fraunces',serif;font-weight:900;line-height:1.1}
.sticker .sub{font-size:0.75rem;font-weight:600}

/* ---------- Marquees ---------- */
.marquees{border-bottom:3px solid var(--fg);overflow:hidden}
.mq{display:flex;white-space:nowrap;gap:2.5rem;font-family:'Fraunces',serif;font-style:italic;font-weight:900}
.mq.row1{padding:1rem 0;background:hsl(var(--rojo));color:hsl(var(--amarillo));border-bottom:3px solid var(--fg);font-size:clamp(1.75rem,3vw,3rem);animation:marquee 30s linear infinite}
.mq.row2{padding:0.75rem 0;background:hsl(var(--turquesa));color:var(--fg);font-size:clamp(1.5rem,2.5vw,2rem);animation:marquee-rev 35s linear infinite}
.mq .group{display:flex;align-items:center;gap:2.5rem;flex-shrink:0}
.mq .item{display:flex;align-items:center;gap:2.5rem}
.star{color:hsl(var(--amarillo))}
.spark{color:hsl(var(--rojo))}

/* ---------- Story ---------- */
.story{position:relative;padding:5rem 0;border-bottom:3px solid var(--fg);background:hsl(var(--amarillo));overflow:hidden}
@media(min-width:768px){.story{padding:7rem 0}}
.story .blob-pink{position:absolute;top:-5rem;left:-5rem;height:18rem;width:18rem;border-radius:9999px;background:hsl(var(--rosa));border:3px solid var(--fg);opacity:0.9}
.story .blob-rays{position:absolute;bottom:-8rem;right:-2.5rem;height:24rem;width:24rem;border-radius:9999px;border:3px solid var(--fg);opacity:0.8}
.story-grid{position:relative;display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:768px){.story-grid{grid-template-columns:repeat(12,1fr)}}
.story-img-wrap{position:relative}
@media(min-width:768px){.story-img-wrap{grid-column:span 6}}
.story-img-wrap .layer{position:absolute;inset:0;border:3px solid var(--fg)}
.story-img-wrap .l1{transform:translate(-1.5rem,-1.5rem);background:hsl(var(--turquesa))}
.story-img-wrap .l2{transform:translate(-0.75rem,-0.75rem);background:hsl(var(--rojo))}
.story-img{position:relative;width:100%;aspect-ratio:1/1;object-fit:cover;border:3px solid var(--fg)}
.badge-circle{
  position:absolute;bottom:-2rem;right:-1rem;
  background:hsl(var(--verde));color:hsl(var(--crema));border:3px solid var(--fg);
  border-radius:9999px;height:9rem;width:9rem;display:grid;place-items:center;
  font-family:'Fraunces',serif;font-style:italic;font-weight:900;text-align:center;font-size:0.875rem;padding:1rem;
  box-shadow:8px 8px 0 0 var(--fg);transform:rotate(8deg);animation:wiggle 3s ease-in-out infinite
}
.cheers{
  position:absolute;top:-1.5rem;right:-1.5rem;
  background:hsl(var(--morado));color:hsl(var(--crema));border:3px solid var(--fg);
  padding:0.5rem 1rem;font-family:'Fraunces',serif;font-weight:900;
  transform:rotate(-6deg);box-shadow:8px 8px 0 0 var(--fg);display:none
}
@media(min-width:640px){.cheers{display:block}}
.story-copy{position:relative}
@media(min-width:768px){.story-copy{grid-column:span 6;padding-left:1.5rem}}
.tag-green{background:hsl(var(--verde));color:hsl(var(--crema))}
.tag-red{background:hsl(var(--rojo));color:hsl(var(--crema))}
.tag-amar{background:hsl(var(--amarillo));color:var(--fg)}
.section-tag{
  display:inline-block;border:3px solid var(--fg);
  padding:0.25rem 0.75rem;font-size:0.7rem;font-weight:900;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:1.25rem;
  transform:rotate(-1deg)
}
.story-h{font-family:'Fraunces',serif;font-weight:900;line-height:0.95;text-wrap:balance;font-size:clamp(2.25rem,5vw,3.75rem)}
.story-h .it{display:block;font-style:italic;color:hsl(var(--rojo))}
.story-h .it .pl{font-style:normal;color:hsl(var(--morado))}
.story-p{margin-top:1.5rem;font-size:1.125rem;font-weight:500;max-width:32rem}
.stats{margin-top:2.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.stat{border:3px solid var(--fg);padding:1rem;box-shadow:8px 8px 0 0 var(--fg)}
.stat.s1{background:hsl(var(--rosa));color:var(--fg);transform:rotate(-2deg)}
.stat.s2{background:hsl(var(--azul));color:hsl(var(--crema));transform:rotate(2deg)}
.stat.s3{background:hsl(var(--verde));color:hsl(var(--crema));transform:rotate(-2deg)}
.stat .k{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(1.875rem,3vw,2.5rem);line-height:1}
.stat .v{font-size:0.7rem;font-weight:700;text-transform:uppercase;margin-top:0.5rem}

/* ---------- Hours ---------- */
.hours{position:relative;padding:5rem 0;border-bottom:3px solid var(--fg);background:hsl(var(--morado));color:hsl(var(--crema));overflow:hidden}
@media(min-width:768px){.hours{padding:7rem 0}}
.hours .bg{position:absolute;inset:0;opacity:0.3}
.hours .bg img{width:100%;height:100%;object-fit:cover}
.hours .overlay{position:absolute;inset:0;opacity:0.25;mix-blend-mode:screen}
.hours-grid{position:relative;display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:768px){.hours-grid{grid-template-columns:repeat(12,1fr)}}
.hours-copy{}
@media(min-width:768px){.hours-copy{grid-column:span 5}}
.tag-amar-on-purple{background:hsl(var(--amarillo));color:var(--fg);border-color:hsl(var(--crema));transform:rotate(2deg)}
.hours-h{font-family:'Fraunces',serif;font-weight:900;line-height:0.9;font-size:clamp(2.5rem,6vw,4.5rem)}
.hours-h .it{font-style:italic;color:hsl(var(--amarillo))}
.hours-p{margin-top:1.5rem;font-size:1.125rem;opacity:0.9;max-width:28rem}
.hours-list{position:relative;display:flex;flex-direction:column;gap:1rem}
@media(min-width:768px){.hours-list{grid-column:span 7}}
.hr-card{border:3px solid var(--fg);padding:1.25rem;box-shadow:12px 12px 0 0 var(--fg);color:var(--fg)}
.hr-card.c0{background:hsl(var(--amarillo));transform:rotate(-1deg)}
.hr-card.c1{background:hsl(var(--turquesa));transform:rotate(1deg)}
.hr-card.c2{background:hsl(var(--rosa));transform:rotate(2deg)}
@media(min-width:768px){
  .hr-card.c1{transform:translateX(2rem) rotate(1deg)}
  .hr-card.c2{transform:translateX(1rem) rotate(2deg)}
}
.hr-row{display:flex;flex-direction:column;gap:0.5rem}
@media(min-width:640px){.hr-row{flex-direction:row;align-items:baseline;justify-content:space-between}}
.hr-day{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(1.5rem,3vw,1.875rem);line-height:1}
.hr-en{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;margin-top:0.25rem;opacity:0.7}
.hr-time{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(1.875rem,4vw,2.5rem);font-variant-numeric:tabular-nums}

/* ---------- Visit ---------- */
.visit{position:relative;padding:5rem 0;border-bottom:3px solid var(--fg);background:hsl(var(--crema))}
@media(min-width:768px){.visit{padding:7rem 0}}
.visit-lead{max-width:42rem;margin-bottom:3rem}
.visit-h{font-family:'Fraunces',serif;font-weight:900;line-height:0.9;font-size:clamp(2.5rem,6vw,4.5rem);text-wrap:balance}
.visit-h .it{display:block;font-style:italic;color:hsl(var(--verde))}
.visit-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.visit-grid{grid-template-columns:repeat(3,1fr)}}
.card-link{display:block;border:3px solid var(--fg);padding:1.75rem;box-shadow:8px 8px 0 0 var(--fg);transition:transform .15s,box-shadow .15s}
.card-link:hover{transform:translate(4px,4px);box-shadow:none}
.card-link.turq{background:hsl(var(--turquesa))}
.card-link.amar{background:hsl(var(--amarillo))}
.card-link.rosa{background:hsl(var(--rosa))}
.icon-box{display:grid;place-items:center;height:3rem;width:3rem;background:hsl(var(--crema));border:3px solid var(--fg);margin-bottom:1.25rem}
.card-h{font-family:'Fraunces',serif;font-weight:900;font-size:1.875rem;line-height:1.1}
.card-sub{margin-top:0.75rem;font-weight:700}
.card-cta{margin-top:1.25rem;font-size:0.75rem;font-weight:900;text-transform:uppercase}

/* ---------- Pattern band & footer ---------- */
.band-tall{height:32px;border-bottom:3px solid var(--fg)}
.site-footer{background:hsl(var(--tinta));color:hsl(var(--crema));padding:2.5rem 0}
.foot-row{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;font-size:0.875rem}
@media(min-width:768px){.foot-row{flex-direction:row}}
.foot-brand{display:flex;align-items:center;gap:0.5rem;font-family:'Fraunces',serif;font-weight:900;font-size:1.125rem}
.foot-brand .mark{display:grid;place-items:center;height:32px;width:32px;border-radius:9999px;background:hsl(var(--rojo));border:3px solid hsl(var(--crema))}
.foot-copy{font-weight:700;opacity:0.8}

/* ---------- Animations ---------- */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

/* WP defaults */
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden}