/* ============================================================
   TurcoLoco — Shared component styles
   Load order: turco-styles.css → Tailwind CDN → responsive.css
   ============================================================ */

/* ── Base reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; background: #fff; color: #1A1A1A; font-family: 'Barlow', sans-serif; }
a { text-decoration: none; color: inherit; }
input::placeholder, textarea::placeholder { color: #999; }

/* ── Comic book UI primitives ── */
.comic-border    { border: 4px solid #2f3131; }
.comic-shadow    { box-shadow: 8px 8px 0px 0px rgba(47,49,49,1), 0px 8px 0px 0px rgba(47,49,49,1), 8px 0px 0px 0px rgba(47,49,49,1); }
.comic-shadow-sm { box-shadow: 4px 4px 0px 0px rgba(47,49,49,1); }
.comic-shadow-hover:hover {
  box-shadow: 12px 12px 0px 0px #ae001c;
  transform: translate(-4px, -4px);
  transition: all 0.2s cubic-bezier(.17,.67,.83,.67);
}
.comic-panel-tilt-l { transform: rotate(-1deg); }
.comic-panel-tilt-r { transform: rotate(1.5deg); }

/* ── Halftone background overlay ── */
.halftone-bg {
  background-image: radial-gradient(#2f3131 10%, transparent 10%);
  background-size: 20px 20px;
  opacity: 0.05;
}

/* ── Text stroke effects ── */
.text-stroke     { -webkit-text-stroke: 1px #2f3131; }
.text-stroke-red { -webkit-text-stroke: 1.5px #7a0010; }

/* ── Scroll reveal ── */
.reveal         { opacity: 0; transition: opacity 0.4s ease; }
.reveal.visible { opacity: 1; }

/* ── Dropdown submenu ── */
.group {
  position: relative;
}
.group:hover > .group-hover\:block {
  display: block !important;
  pointer-events: auto !important;
}
.group-hover\:block {
  display: none;
  z-index: 9999 !important;
  position: absolute;
  top: 100%;
  left: 0;
  pointer-events: none;
}

.group:hover .group-hover\:block {
  display: block !important;
  pointer-events: auto !important;
}

/* Ensure dropdown links are clickable */
.group-hover\:block a {
  pointer-events: auto !important;
}

/* ── Language switcher buttons ── */
.lang-btn {
  font-family: 'Bangers', sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  color: #535555;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.lang-btn:hover  { color: #ae001c; }
.lang-btn.active { color: #ae001c; border-bottom-color: #ae001c; }

/* ── Flag language buttons ── */
.flag-btn {
  font-size: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, transform 0.15s;
  padding: 0;
  line-height: 1;
}
.flag-btn:hover  { transform: scale(1.15); }
.flag-btn.active { border-color: #ae001c; }

/* ── Layout wrappers ── */
.page-inner   { max-width: 1480px; margin: 0 auto; }
.page-section { padding: 52px 40px; }

/* ── Badge ── */
.badge-yellow {
  display: inline-block;
  background: #FFD000;
  border: 2px solid #1A1A1A;
  padding: 5px 14px;
}

/* ── Gap utility ── */
.gap-base { gap: 18px !important; }

/* ── Menu page — category nav (dark background) ── */
.cat-nav-dark-link {
  padding: 14px 22px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  border-bottom: 4px solid #d1d5db;
  display: block;
  transition: color 0.15s, border-color 0.15s;
}
.cat-nav-dark-link.active,
.cat-nav-dark-link:hover { color: #FFD000; border-bottom-color: #FFD000; }

/* ── Menu page — category nav (light background) ── */
.cat-nav-link {
  padding: 14px 24px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  display: block;
  transition: color 0.15s, border-color 0.15s;
}
.cat-nav-link:hover,
.cat-nav-link.active { color: #C8171A; border-bottom-color: #C8171A; }

/* ── Menu page — product card ── */
.menu-card {
  border: 2px solid #1A1A1A;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Form input focus (contacto page) ── */
input:focus, textarea:focus, select:focus {
  outline: 3px solid #C8171A;
  outline-offset: -2px;
}
input::placeholder, textarea::placeholder {
  color: #999;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
}