/*
 * site.css: the only stylesheet for this site (Chicken Union, one-page site).
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing (custom properties)
 *   2. Fonts         @font-face for self-hosted fonts
 *   3. Base          reset and element defaults
 *   4. Layout        shared section/container rules
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         rare page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (Elementor defaults used by the original; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    desktop >= 1025px
 *
 * Values come from the original's Elementor kit (post-7) and page CSS (post-163, popup post-92).
 * Editing: change tokens to restyle the site; add modifier classes instead of changing a component for one use.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (Elementor global colours) */
  --color-primary: #f9ad48;      /* orange: headings, outline buttons, icons */
  --color-secondary: #ffc982;    /* light orange: hover on the Menu trigger */
  --color-text: #fefeff;        /* body copy, lines, social circles */
  --color-bg: #242323;           /* page background and menu panel */
  --color-strip: rgb(0 0 0 / 0.55);   /* feature strip under the hero */
  --color-overlay: rgb(0 0 0 / 0.8);  /* menu panel backdrop */

  /* Typography */
  --font-body: "Poppins", sans-serif;
  --font-serif: "Hedvig Letters Serif", sans-serif;
  --font-korean: "Noto Sans JP", sans-serif; /* as the original; Hangul falls back to the system font (decision 5) */
  --tracking: -0.03em;
  --text-base: 1.15rem;   /* kit "text": 18.4px, weight 200, line-height 1.7 */
  --text-sm: 1rem;        /* kit "0bde333": 16px, weight 200, line-height 1.7 */
  --leading: 1.7;

  /* Spacing and shape */
  --widget-gap: 20px;     /* Elementor's gap between widgets */
  --container: 1280px;
  --section-pad: 120px;
  --section-pad-x: 32px;
  --header-height: 74px;
  --radius-button: 6px;

  /* Motion */
  --duration: 200ms;
  --duration-panel: 800ms;
  --ease: ease;
}

/* ============ 2. Fonts ============ */
/* Google Fonts, self-hosted (latin subset, woff2). Noto Sans JP is not self-hosted: its Google subsets have no Hangul glyphs. */
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-200.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Hedvig Letters Serif"; src: url("/assets/fonts/hedvig-letters-serif-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ============ 3. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-weight: 200; font-size: var(--text-sm); line-height: var(--leading); letter-spacing: var(--tracking); color: var(--color-text); background: var(--color-bg); overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-body); font-weight: 400; letter-spacing: var(--tracking); color: var(--color-primary); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease); }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.icon { display: inline-block; height: 1em; width: auto; fill: currentColor; flex: none; }

/* ============ 4. Layout ============ */
/* Elementor stacks widgets with a 20px gap; .stack reproduces that. */
.stack { display: flex; flex-direction: column; } /* flex: margins don't collapse, as in Elementor */
.stack > * { margin-bottom: var(--widget-gap); }
.stack > :last-child { margin-bottom: 0; }
.section { position: relative; padding: var(--section-pad) var(--section-pad-x); }
.section__inner { max-width: var(--container); margin-inline: auto; }
/* Torn paper edges (border.png / border-b.png) above and below a section, overlapping its neighbours */
.section--torn { z-index: 10; }
.section--torn::before,
.section--torn::after { content: ""; position: absolute; left: 0; right: 0; height: 60px; background-size: 1440px auto; background-repeat: repeat-x; background-position: center; z-index: 100; pointer-events: none; }
.section--torn::before { top: 0; background-image: url("/wp-content/uploads/2022/12/border.png"); transform: translateY(-75%); }
.section--torn::after { bottom: 0; background-image: url("/wp-content/uploads/2022/12/border-b.png"); transform: translateY(75%); }

/* ============ 5. Components ============ */

/* === Component: skip-link === */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 0.5rem 1rem; background: var(--color-bg); color: var(--color-text); }
.skip-link:focus { left: 1rem; }

/* === Component: site-header (not sticky; sits over the hero) === */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
.site-header__inner { display: flex; align-items: center; justify-content: flex-end; gap: var(--widget-gap); padding: 16px; min-height: var(--header-height); }
.site-header .site-header__order { font-size: 1rem; line-height: 1; padding: 12px 24px; gap: 12px; border-radius: 3px; }
.site-header__order .icon--caret { height: 1em; }
.menu-trigger { display: inline-flex; align-items: flex-start; gap: 16px; color: var(--color-primary); font-size: 1.25rem; font-weight: 200; line-height: 1; min-height: 44px; align-items: center; }
.menu-trigger__icon { width: 24px; height: 16px; color: var(--color-text); }
.menu-trigger:hover { color: var(--color-secondary); }

/* === Component: menu-panel (native <dialog>, slides in from the right like the original Elementor popup) === */
.menu-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: 400px; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; padding: 0; border: 0; background: var(--color-bg); color: var(--color-text); overflow: auto; transform: translateX(0); transition: transform var(--duration-panel) var(--ease), overlay var(--duration-panel) allow-discrete, display var(--duration-panel) allow-discrete; }
.menu-panel:not([open]) { transform: translateX(100%); }
@starting-style { .menu-panel[open] { transform: translateX(100%); } }
.menu-panel::backdrop { background: var(--color-overlay); }
.menu-panel__inner { position: relative; display: flex; align-items: center; min-height: 100%; padding: 0 calc(10% + 10px); }
.menu-panel__close { position: absolute; top: 26px; right: 26px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--color-text); }
.menu-panel__close svg { width: 26px; height: 26px; }
.menu-panel__list { display: grid; gap: 40px; }
.menu-panel__list a { font-size: 2rem; font-weight: 200; line-height: 1.7; color: var(--color-text); }
.menu-panel__list a:hover { color: var(--color-text); opacity: 0.85; }
@media (max-width: 767px) {
  .menu-panel { width: 100vw; }
}

/* === Component: button (Elementor Extras button group) === */
.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border: 1px solid var(--color-primary); border-radius: var(--radius-button); background: transparent; color: var(--color-primary); font-family: var(--font-body); font-size: 1.25rem; font-weight: 200; line-height: 1; letter-spacing: var(--tracking); text-align: center; transition: color var(--duration) ease-in-out, border-color var(--duration) ease-in-out; }
.button--outline { border-color: var(--color-primary); color: var(--color-primary); }
.button--plain { border: 0; padding: 0; color: var(--color-text); min-height: 44px; }
.button-group { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
@media (max-width: 1024px) {
  .button-group--tight-tablet { gap: 16px; }
}
@media (max-width: 767px) {
  .button-group { gap: 16px; }
  .button-group--center-mobile { justify-content: center; }
  .button-group--stack-mobile { flex-direction: column; align-items: flex-start; }
  .button-group--stack-mobile .button--plain { min-height: 0; }
}

/* === Component: kicker (small Korean heading above a section title) === */
.kicker { font-family: var(--font-korean); font-size: 2rem; font-weight: 400; line-height: 1; color: var(--color-primary); }
.kicker--small { font-family: var(--font-body); font-size: 1.25rem; }
@media (max-width: 767px) {
  .kicker--shrink-mobile { font-size: 1.5rem; }
}

/* === Component: section-title === */
.section-title { font-size: 3rem; font-weight: 400; line-height: 1.3; text-transform: uppercase; color: var(--color-primary); }
.section-title--medium { font-weight: 500; }
.section-title--card { font-size: 2rem; font-weight: 500; }
.section-title--large { font-size: 4rem; }
@media (max-width: 767px) {
  .section-title, .section-title--card, .section-title--large { font-size: 3.2rem; }
}

/* === Component: rule (Elementor divider: 1px line with 32px space each side) === */
.rule { display: block; width: 100%; height: 0; border: 0; border-top: 1px solid var(--color-text); }
.stack > .rule { margin: 32px 0 calc(32px + var(--widget-gap)); }
.stack > .rule--before-buttons { margin-bottom: calc(32px + 8px + var(--widget-gap)); }
.stack > .rule--compact { margin: 24px 0 calc(24px + var(--widget-gap)); }
.stack > .rule--compact.rule--before-buttons { margin-bottom: calc(24px + 16px + var(--widget-gap)); }
.stack > .rule--short { width: 200px; margin: 20px 0 calc(20px + var(--widget-gap)); }
.stack > .rule--short.rule--before-buttons { margin-bottom: calc(20px + 16px + var(--widget-gap)); }

/* === Component: prose (body copy; an empty line between paragraphs as on the original) === */
.prose { font-size: var(--text-base); font-weight: 200; line-height: var(--leading); color: var(--color-text); }
.prose p + p { margin-top: 1.7em; }
.prose--small { font-size: var(--text-sm); }

/* === Component: hero (#home) === */
.hero { position: relative; display: flex; flex-direction: column; min-height: 100vh; padding-top: var(--header-height); background: url("/wp-content/uploads/2026/05/chicken-union-hero-background.png") center / cover no-repeat; }
.hero__main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; }
.hero__content { display: flex; align-items: center; width: 100%; max-width: var(--container); }
.hero__text { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; padding: 10px; min-width: 0; }
.hero__media { flex: 1 1 0; display: flex; justify-content: flex-end; min-width: 0; }
.hero__title { font-size: 6rem; font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--color-text); }
.hero__dishes { font-size: 2rem; font-weight: 500; line-height: 1; text-transform: uppercase; color: var(--color-primary); }
.hero__tagline { font-family: var(--font-serif); font-size: 2rem; font-weight: 500; line-height: 1; color: var(--color-text); }
.hero__scroll { display: flex; justify-content: center; padding: 50px; }
.hero__scroll a { display: inline-flex; font-size: 50px; line-height: 1; color: var(--color-primary); }
.hero__scroll a:hover { color: var(--color-secondary); }
@media (min-width: 1025px) {
  .hero { background-attachment: fixed; }
}
@media (max-width: 1024px) {
  .hero__content { min-height: 80vh; }
  .hero__media { display: none; }
  .hero__title { font-size: 4rem; }
}
@media (max-width: 767px) {
  .hero__dishes { font-size: 1.5rem; }
  .hero__tagline { margin-bottom: 0; } /* badges below are hidden: no gap after the tagline */
}

/* === Component: hero-badges (Crispy Outside / Saucy Inside / Authentic Korean; hidden on mobile like the original) === */
.hero-badges { display: flex; align-items: stretch; justify-content: center; gap: var(--widget-gap); padding: 10px; }
.hero-badges__item { flex: 1 1 0; padding: 10px; text-align: center; }
.hero-badges__icon { display: flex; justify-content: center; height: 54px; font-size: 50px; color: var(--color-primary); }
.hero-badges__icon svg { height: 50px; width: auto; fill: currentColor; }
.hero-badges__text { font-size: 1.5rem; font-weight: 500; line-height: 1.7; text-transform: uppercase; color: var(--color-primary); }
.hero-badges__divider { flex: 0 0 2px; background: var(--color-primary); }
@media (max-width: 767px) {
  .hero-badges { display: none; }
}

/* === Component: feature-strip (4 promises under the hero) === */
.feature-strip { background: var(--color-strip); }
.feature-strip__inner { display: flex; align-items: stretch; justify-content: center; gap: var(--widget-gap); max-width: calc(var(--container) + 20px); margin-inline: auto; padding: 10px; }
.feature { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: var(--widget-gap); padding: 10px; min-width: 0; }
.feature__icon { flex: none; width: 38px; height: 50px; } /* the original's icon box is narrower than the 50px icon */
.feature__icon svg { width: 50px; height: 50px; }
.feature__text { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.feature__title { font-size: 1.5rem; font-weight: 500; line-height: 1; text-transform: uppercase; color: var(--color-text); }
.feature__title--accent { font-size: 1.8rem; color: var(--color-primary); }
.feature__desc { font-size: var(--text-base); font-weight: 200; line-height: var(--leading); color: var(--color-text); }
.feature-strip__divider { flex: 0 0 2px; background: var(--color-primary); }
@media (max-width: 1024px) {
  .feature-strip__inner { flex-direction: column; }
  .feature { justify-content: flex-start; }
  .feature__icon { width: 45px; }
  .feature__text { flex: 1 1 auto; }
  .feature-strip__divider { flex: 0 0 3px; }
}
@media (max-width: 767px) {
  .feature { flex-direction: column; gap: var(--widget-gap); text-align: center; }
  .feature__icon { width: 50px; }
  .feature:first-child { padding: 0; gap: 0; }
  .feature__text { align-items: center; }
  .feature-strip__divider { flex: 0 0 2px; }
}

/* === Component: about (#about: collage image + Our Story) === */
.about__inner { display: flex; align-items: center; }
.about__media { flex: 0 0 50%; min-width: 0; }
.about__media img { width: calc(100% + 32px); max-width: none; margin-left: -32px; }
.about__text { flex: 0 0 50%; min-width: 0; padding-left: 5em; }
@media (max-width: 1024px) {
  .about__inner { flex-direction: column; align-items: stretch; }
  .about__media, .about__text { flex: none; width: 100%; }
  .about__text { order: -1; padding-left: 0; margin-bottom: 5em; }
  .about__media { text-align: center; }
  .about__media img { display: inline-block; width: 736px; max-width: 100%; margin-left: 0; } /* natural size, like the original */
}
@media (max-width: 767px) {
  .about { padding: 80px 16px; }
}

/* === Component: menu-feature (#menu: three columns on a textured background) === */
.menu-feature { background: url("/wp-content/uploads/2022/12/menu-bg.jpg") center / cover no-repeat; }
.menu-feature__inner { display: flex; align-items: center; }
.menu-feature__col { flex: 0 0 33.333%; min-width: 0; }
.menu-feature__col--intro { padding-right: 40px; }
.menu-feature__col--image img { width: 100%; }
.menu-feature__col--card { padding-left: 40px; }
.ingredients { display: flex; align-items: center; }
.ingredients img { width: 76px; height: auto; }
.ingredients p { margin-left: 24px; font-size: var(--text-sm); font-weight: 200; line-height: var(--leading); }
@media (min-width: 1025px) {
  .menu-feature { background-attachment: fixed; }
}
@media (max-width: 1024px) {
  .menu-feature__col--intro, .menu-feature__col--image { flex-basis: 50%; }
  .menu-feature__col--intro { padding-right: 32px; }
  .menu-feature__col--card { padding-left: 0; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .menu-feature__col--card { display: none; }
}
@media (max-width: 767px) {
  .menu-feature__inner { flex-direction: column; align-items: stretch; }
  .menu-feature__col { flex: none; width: 100%; }
  .menu-feature__col--image { margin: 3em 0; }
}

/* === Component: app-promo (#app: Order Direct. Save More.) === */
.app-promo__head { text-align: center; }
.app-promo__head .section-title { max-width: 780px; margin-inline: auto; margin-bottom: 120px; }
.app-promo__row { display: flex; align-items: center; }
.app-promo__col--text { flex: 0 0 36.925%; padding: 0 96px 40px 0; min-width: 0; }
.app-promo__col--phone { flex: 0 0 27.74%; text-align: center; min-width: 0; }
.app-promo__col--phone img { display: inline-block; vertical-align: middle; }
.app-promo__col--stores { flex: 0 0 34.975%; padding: 0 0 40px 96px; min-width: 0; }
.app-promo__badges-wide { display: none; margin-top: calc(48px + var(--widget-gap)); }
.app-promo__badges-wide img { width: 340px; max-width: 100%; }
@media (max-width: 1024px) {
  .app-promo__col--text { flex-basis: 60%; padding-right: 3em; }
  .app-promo__col--phone { flex-basis: 40%; text-align: end; }
  .app-promo__col--stores { display: none; }
  .app-promo__badges-wide { display: block; }
}
@media (max-width: 767px) {
  .app-promo { padding: 80px 32px; }
  .app-promo__head .section-title { margin-bottom: 80px; }
  .app-promo__row { flex-direction: column; align-items: stretch; }
  .app-promo__col--text, .app-promo__col--phone { flex: none; width: 100%; }
  .app-promo__col--text { padding: 0 0 40px; margin-bottom: 2em; }
  .app-promo__col--phone { text-align: center; }
}

/* === Component: site-footer (#contact: Stay Connected, social links, contact details, bottom bar) === */
.site-footer { position: relative; padding: 120px var(--section-pad-x) 80px; background: url("/wp-content/uploads/2024/09/background.jpg") center / cover no-repeat; }
.site-footer::before { content: ""; position: absolute; inset: 0; background: #000; opacity: 0.85; }
.site-footer__inner { position: relative; max-width: var(--container); margin-inline: auto; }
.site-footer__title { margin-bottom: var(--widget-gap); font-size: clamp(2.5rem, 13vw, 4rem); font-weight: 500; line-height: 1; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; }
.site-footer__subtitle { margin-bottom: 72px; font-size: 1.5rem; font-weight: 500; line-height: 1.3; text-transform: uppercase; text-align: center; }
.social-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 32px; margin-bottom: 112px; }
.social-links__link { display: inline-flex; align-items: center; justify-content: center; width: 67px; height: 67px; border: 1px solid var(--color-text); border-radius: 50%; color: var(--color-text); }
.social-links__link svg { width: 24px; height: 24px; fill: currentColor; }
.social-links__link:hover { opacity: 0.9; }
.site-footer__details { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 24px 0; border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--color-text); margin-bottom: 60px; }
.site-footer__details p, .site-footer__bar p { font-size: var(--text-sm); font-weight: 200; line-height: var(--leading); color: var(--color-text); }
.site-footer__phone { text-align: center; }
.site-footer__email { text-align: end; overflow-wrap: anywhere; }
.site-footer__bar { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.site-footer__credit { text-align: end; }
@media (max-width: 767px) {
  .site-footer__subtitle { font-size: 3.2rem; }
  .social-links { gap: 65px; }
  .site-footer__details { grid-template-columns: 1fr; }
  .site-footer__phone { text-align: start; margin: 1em 0; }
  .site-footer__email { text-align: start; }
  .site-footer__bar { grid-template-columns: 1fr; }
  .site-footer__copyright { margin-bottom: 1em; }
  .site-footer__credit { text-align: start; }
}

/* === Component: contact-email (replaces WordPress forms; unused here: the original had no form) === */
.contact-email { display: grid; gap: 1rem; justify-items: start; }
.contact-email__address { font-weight: 400; word-break: break-word; }
.contact-email__phone a { color: inherit; }

/* === Component: reveal (GSAP animates these; unused here) === */
.reveal-ready [data-reveal] { visibility: hidden; }

/* === Component: popup (generic dialog; the menu uses .menu-panel) === */
.popup { border: 0; padding: 2rem; max-width: min(90vw, 600px); background: var(--color-bg); color: var(--color-text); }
.popup::backdrop { background: var(--color-overlay); }

/* ============ 6. Pages ============ */

/* === Page: /404.html === */
.not-found { min-height: 70vh; display: flex; align-items: center; padding-top: calc(var(--header-height) + 60px); }
.not-found .section__inner { width: 100%; }
.not-found__links { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.not-found__links a { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; }
.not-found__links a:hover { color: var(--color-primary); }

/* ============ 7. Utilities ============ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-center { text-align: center; }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { visibility: visible !important; }
}