/*
Theme Name: Boomerang Steakhouse
Theme URI: https://sourcecode.es/
Author: SourceCode
Author URI: https://sourcecode.es/
Description: Custom theme inspired by the Boomerang Steakhouse design mockup.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: boomerang
*/

/* ========== Base ========== */
:root{
  --bg:#16191c;
  --panel:#2a2f34;
  --panel-2:#343b41;
  --text:#f2f3f5;
  --muted:#b8c0cc;
  --accent:#111;
  --brand:#111;     /* matte black */
  --slate:#2f3640;  /* slate grey */
  --primary:#222;
  --cta:#1f2429;
  --cta-text:#f8f8f8;
  --link:#e5e7eb;
  --shadow:0 15px 40px rgba(0,0,0,.35);
}

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:400 16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;
}
body{ overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ width:min(1100px,92%); margin-inline:auto; }
.grid{ display:grid; gap:24px; }
.button{
  display:inline-block; background:var(--cta); color:var(--cta-text);
  padding:.9rem 1.6rem; border-radius:10px; text-transform:uppercase;
  letter-spacing:.06em; font-weight:700; border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow);
}
.button--ghost{ background:transparent; border:1px solid rgba(255,255,255,.25); }
.tag{ display:inline-block; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:#cbd5e1; }

/* ========== Top bar ========== */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:999;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  display:flex; align-items:center; gap:18px;
  padding:.85rem 1rem; flex-wrap:wrap; /* allow second row on mobile */
}
.site-title{
  font-family:"Oswald",system-ui,sans-serif;
  letter-spacing:.03em; font-size:1.25rem; font-weight:700;
}

/* Desktop: logo | (right-aligned menu) | | flags */
.topnav{
  order:2; display:flex; align-items:center; gap:18px;
  margin-left:auto;                 /* push menu+flags to the right side */
  justify-content:flex-end;         /* menu items align towards flags */
  flex-wrap:wrap;
}
/* Header flags only */
.topbar__inner .langs{
  margin-left:auto;              /* push flags to the far right on desktop */
  display:flex;
  gap:8px;
  padding-left:12px;             /* visual separator before flags */
  border-left:1px solid rgba(255,255,255,.25);
}
.topbar__inner .langs a{ font-size:0; }
.topbar__inner .flag{
  width:20px; height:14px;
  display:inline-block;
  border-radius:2px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
}

/* Mobile override */
@media (max-width:640px){
  .topbar__inner .langs{
    border-left:0;
    padding-left:0;
    gap:6px;
  }
  .topbar__inner .flag{ width:18px; height:12px; }
}
.langs a{ font-size:0; }            /* hide any label inside flag links */
.flag{
  width:20px; height:14px; display:inline-block;
  border-radius:2px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
}
.topnav .sep{ display:none; }       /* we draw the separator via .langs */

/* Mobile (≤640px): Row 1 = title + flags, Row 2 = centered menu */
@media (max-width:640px){
  .topbar__inner{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "title flags"
      "menu  menu";
    align-items:center; gap:8px 12px;
  }
  .site-title{ grid-area:title; min-width:0; }
  .langs{ grid-area:flags; border-left:0; padding-left:0; gap:6px; }
  .topnav{ grid-area:menu; justify-content:center; gap:1.2rem; margin-left:0; }
  .flag{ width:18px; height:12px; } /* slightly smaller on mobile */
}

/* ========== Hero ========== */
.hero{ position:relative; min-height:68vh; display:grid; place-items:center; padding-top:64px; }
.hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:grayscale(.1); }
.hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
             radial-gradient(100% 100% at 50% 0%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.7) 100%);
  mix-blend:normal;
}
.hero__content{ position:relative; text-align:center; padding:2rem; }
.hero__title{
  font-family:"Oswald",system-ui,sans-serif;
  font-size:clamp(2.2rem,4.2vw,4rem); font-weight:800; letter-spacing:.04em;
  line-height:1.05; text-transform:uppercase;
}
.hero__cta{
  margin-top:24px; background:#20262b; border:1px solid rgba(255,255,255,.12);
  padding:1rem 2rem; border-radius:14px; display:inline-flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow);
}
.hero__cta b{ font-family:"Oswald",system-ui,sans-serif; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; }

/* ========== Sections ========== */
.section{ padding:60px 0; border-top:1px solid rgba(255,255,255,.05); }
.section--alt{ background:var(--panel); }
.h2{
  font-family:"Oswald",system-ui,sans-serif;
  letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px 0; font-size:1.6rem;
}
.lead{ color:var(--muted); margin:0 0 18px 0; }
.kicker{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:#cbd5e1; }

/* Two column: about & hours */
.split{ display:grid; grid-template-columns:1.4fr .9fr; gap:32px; }
.card{
  background:var(--panel-2); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:20px; box-shadow:var(--shadow);
}
.card h3{
  margin-top:0; font-family:"Oswald",system-ui,sans-serif;
  letter-spacing:.08em; text-transform:uppercase;
}

/* ========== Specialities ========== */
.specials{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:22px; }
.special{ background:#1b1f23; border:1px solid rgba(255,255,255,.05); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.special .label{ padding:10px 14px; font-family:"Oswald"; letter-spacing:.12em; text-transform:uppercase; }

/* ========== Gallery ========== */
.carousel {
  position: relative;
  overflow: hidden;
  background: var(--bg, #16191c);
}


/* Cards */
.carousel__item {
  flex: 0 0 auto;
  width: clamp(220px, 45vw, 420px);  /* responsive width */
  aspect-ratio: 16 / 10;             /* prevents reflow → stops flicker */
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.carousel__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hide scrollbars if they appear */

.carousel__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;                 /* required */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

/* Prev/Next buttons (kept minimal) */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(0,0,0,.45);
  color: #fff;
  border: 0;
  width: 40px; height: 40px;
  border-radius: 9999px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
}
.carousel__btn:hover { background: rgba(0,0,0,.65); }
.carousel__btn--prev { left: 8px; }
.carousel__btn--next { right: 8px; }

@media (hover:none) and (pointer:coarse) {
  .carousel__btn { opacity: .6; }
}

/* ========== Testimonials ========== */
.testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.quote{
  background:var(--panel-2); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:22px; position:relative; box-shadow:var(--shadow);
}
.quote:before{ content:"\201C"; position:absolute; left:16px; top:-10px; font-size:56px; opacity:.18; line-height:1; }
.quote small{ display:block; color:#94a3b8; margin-top:10px; }

/* ========== Contact ========== */
.contact{ display:grid; grid-template-columns:1.2fr .8fr; gap:28px; }
.contact .meta{ display:grid; gap:12px; }
.contact .meta .item{ background:var(--panel-2); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:16px; }
.map iframe{ width:100%; height:320px; border:0; border-radius:12px; }

/* ========== Footer ========== */
.footer{ padding:20px 0; border-top:1px solid rgba(255,255,255,.08); color:#cbd5e1; }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.footer small{ opacity:.7; }
.socials{ display:flex; gap:.75rem; align-items:center; }
.socials .social{ display:inline-flex; line-height:1; }
.socials .social svg{ width:var(--icon,22px); height:var(--icon,22px); display:block; }
.socials .social:hover{ opacity:.9; }

/* ========== Modal base ========== */
.boom-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.boom-modal.is-open{ display:block; }
.boom-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7); }
.boom-modal__dialog{
  position:absolute; inset:0; display:grid; grid-template-columns:56px 1fr 56px; align-items:center;
  max-width:min(1200px,95vw); margin:auto; gap:8px;
}
.boom-modal__img{
  max-width:100%; max-height:85vh; object-fit:contain; justify-self:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5); background:#111;
}
.boom-modal__close{
  position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%;
  border:0; background:rgba(0,0,0,.6); color:#fff; font-size:22px; line-height:1; cursor:pointer;
}
.boom-modal__nav{
  width:48px; height:48px; border:0; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; font-size:28px; cursor:pointer;
}
.boom-modal__nav:hover, .boom-modal__close:hover{ background:rgba(0,0,0,.8); }

/* Make carousel items clickable buttons look clean */
.carousel__open{ border:0; padding:0; background:transparent; cursor:zoom-in; display:block; }
.carousel__open img{ display:block; }

/* ========== Responsive ========== */
@media (max-width:1024px){
  .split{ grid-template-columns:1fr; }
  .specials{ grid-template-columns:repeat(2,1fr); }
  .testimonials{ grid-template-columns:1fr 1fr; }
  .contact{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .hero{ min-height:62vh; }
  .specials{ grid-template-columns:1fr; }
  .testimonials{ grid-template-columns:1fr; }
  .carousel__item{ flex-basis:82%; }
}


/* ===== HEADER FIXES (desktop) ===== */
/* Keep menu pushed right, then place flags AFTER the menu with a separator */
.topnav{
  order: 2;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: flex-end;
}

.topbar__inner .langs{
  order: 3;                 /* render after menu */
  margin-left: 0;           /* <-- was auto; remove so it doesn't hog space */
  display: flex;
  gap: 8px;
  padding-left: 12px;       /* visual separator */
  border-left: 1px solid rgba(255,255,255,.25);
}

/* ===== MOBILE (≤640px): Row 1 = logo + flags, Row 2 = menu ===== */
@media (max-width: 640px){
  .topbar__inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title flags"
      "menu  menu";
    align-items: center;
    gap: 8px 12px;
  }
  .site-title{ grid-area: title; min-width: 0; }
  .topbar__inner .langs{
    grid-area: flags;
    border-left: 0;         /* no separator on mobile */
    padding-left: 0;
    gap: 6px;
  }
  .topnav{
    grid-area: menu;
    justify-content: center;  /* change to flex-start to left-align */
    margin-left: 0;
    gap: 1.2rem;
  }
  .flag{ width: 18px; height: 12px; }
}

/* ===== FOOTER RESET ===== */
.footer .langs{
  margin: 0;
  padding: 0;
  border: 0;                /* remove header-style separator */
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}
.carousel {
  position: relative;
  overflow: hidden;
  background: var(--bg, #16191c);
}

/* Track no longer scrolls; it just masks the ticker */
.carousel__track {
  overflow: hidden;                 /* important: no scrollbar */
  padding: 8px 0;
}

/* Cards */
.carousel__item {
  flex: 0 0 auto;
  width: clamp(220px, 45vw, 420px);
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.carousel__open { display:block; width:100%; height:100%; border:0; padding:0; background:transparent; cursor:zoom-in; }
.carousel__item img { width:100%; height:100%; object-fit:cover; display:block; }

/* The moving strip */
.ticker {
  display: inline-flex;
  gap: 12px;
  white-space: nowrap;              /* keep in one line */
  will-change: transform;
  animation: ticker-move linear infinite;
}

/* Duplicate strip sits right after the first one */
.ticker--clone {}

/* Speed is set via inline style from JS: animation-duration: 60s; */

/* Pause on hover (optional) */
.carousel:hover .ticker { animation-play-state: paused; }

@keyframes ticker-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* move exactly one strip width */
}

/* Buttons (unchanged) */
.carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; background: rgba(0,0,0,.45); color:#fff; border:0;
  width:40px; height:40px; border-radius:9999px; display:grid; place-items:center; cursor:pointer;
}
.carousel__btn--prev { left: 8px; } .carousel__btn--next { right: 8px; }
.carousel__btn:hover { background: rgba(0,0,0,.65); }


/* Base list reset */
.menu--top { margin:0; padding:0; list-style:none; }

/* Desktop layout */
@media (min-width: 769px) {
  .nav-toggle { display:none; }
  .menu--top { display:flex; gap:16px; align-items:center; }
}

/* Mobile layout */
@media (max-width: 768px) {
  .nav-toggle{
    display:inline-flex; flex-direction:column; gap:4px;
    background:none; border:0; padding:8px; cursor:pointer; color:var(--text);
  }
  .nav-toggle__bar{ width:24px; height:2px; background:var(--text); display:block; }

  .menu--top{
    display:none;
    position:absolute; right:12px; top:58px; /* adjust to header height */
    width: min(86vw, 280px);
    background: var(--panel);
    border-radius:12px;
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .menu--top.is-open{ display:block; }
  .menu--top > li { border-bottom:1px solid rgba(255,255,255,.06); }
  .menu--top > li:last-child { border-bottom:0; }
  .menu--top a{
    display:block; padding:12px 16px; color:var(--text); text-decoration:none;
  }
}