/* ====================================================
   ICHIMARU UDON — SHARED DESIGN SYSTEM
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

/* Allumi Std is the brand's licensed display/body face (see /Logo&Font) —
   not on Google Fonts, so it's self-hosted. Only one weight file was
   supplied; a wide font-weight range means any requested weight (e.g. a
   600 heading) still resolves to this face instead of silently falling
   back to Noto Sans JP, with the browser synthesizing bold as needed. */
@font-face {
  font-family: 'Allumi Std';
  src: url('../fonts/allumi-std.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* BIZ UDMincho (see /Logo&Font) is no longer the default heading face —
   headings now use Allumi Std, matching the logo's main wordmark — but it
   stays self-hosted and selectable as the "serif" font in the block editor's
   font family picker. Two weight files were supplied, so each maps to its
   own font-weight instead of the single-file 100-900 range trick used for
   Allumi Std. */
@font-face {
  font-family: 'BIZ UDMincho';
  src: url('../fonts/BIZUDMincho-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BIZ UDMincho';
  src: url('../fonts/BIZUDMincho-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Variables ---- */
:root {
  --navy:        #0d2044;
  --navy-mid:    #1a3a6e;
  --navy-light:  #2a5298;
  --gold:        #c9a84c;
  --gold-light:  #e8d5a0;
  --gold-pale:   #f5edd8;
  --cream:       #faf8f3;
  --cream-dark:  #f0ece0;
  --white:       #ffffff;
  --text:        #1a1a1e;
  --text-mid:    #4a4a52;
  --text-light:  #7a7a88;
  --border:      rgba(13,32,68,0.12);
  --shadow-sm:   0 2px 12px rgba(13,32,68,0.08);
  --shadow-md:   0 8px 32px rgba(13,32,68,0.14);
  --shadow-lg:   0 20px 60px rgba(13,32,68,0.18);
  --radius:      4px;
  --transition:  0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  background: var(--cream);
  color: var(--text);
  line-height: 1.75;
  font-size: 16px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5 {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--navy);
}
h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { color: var(--text-mid); }

/* ---- NAVBAR ---- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 1.25rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
}
/* WordPress auto-adds :where(.is-layout-flow) > * { margin-block-start: 24px }
   between a Group block's children. This block's own attributes can't
   suppress that without becoming invalid stored content (blockGap isn't
   part of this block's real save() output), so it's suppressed here
   instead — same technique as .front-page-main in front-page.css. */
.navbar > * + * { margin-block-start: 0; }
.navbar.transparent { background: transparent; }
.navbar.scrolled {
  background: var(--navy);
  padding: 0.85rem 2.5rem;
  box-shadow: 0 4px 24px rgba(13,32,68,0.25);
}

.nav-logo {
  display: flex;
  align-items: center;
  color: white;
  transition: opacity var(--transition);
}
.nav-logo:hover { opacity: 0.82; }
.nav-logo-img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  color: rgba(255,255,255,0.88);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--transition), opacity var(--transition);
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-links a:hover { color: var(--gold-light); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--gold-light); }
.nav-links a.active::after { transform: scaleX(1); }

.nav-hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: white;
  border-radius: 2px;
  transition: var(--transition);
}

/* .navbar's space-between layout expects exactly 2 children, so nav-links
   and the order button are grouped together as its second child (same
   margin-suppression technique as .navbar's own comment above). */
.nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-right > * + * { margin-block-start: 0; }

/* core/navigation exposes no per-item background, padding, or border-radius
   support, so this CTA's pill shape and colors are scoped custom CSS keyed
   to .nav-order-btn, same approach as .nav-links above. Selectors are
   prefixed with .navbar and double the content class to match/exceed the
   specificity of `.navbar .content.content(:hover)` in blocks.css (which
   loads after this file) — otherwise that rule's hover color (gold-light)
   lands on top of this button's gold-light hover background and the label
   disappears. */
.navbar .nav-order-btn .wp-block-navigation-item__content.wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  background: var(--gold);
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition);
}
/* Flex items shrink below their content's natural width by default, which
   let the two-word "Order Now" label wrap onto a second line on narrow
   phones (e.g. iPhone 15 Pro, 393px) even with white-space:nowrap set above. */
.nav-order-btn { flex-shrink: 0; }
.navbar .nav-order-btn .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  background: var(--gold-light);
  color: white;
  transform: translateY(-2px);
}
.nav-order-btn .wp-block-navigation__submenu-container {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.5rem 0;
  min-width: 190px;
}
.navbar .nav-order-btn .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
  background: transparent;
  color: var(--navy);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.6rem 1.25rem;
  border-radius: 0;
}
.navbar .nav-order-btn .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  background: var(--gold);
  color: white;
  transform: none;
}

/* ---- BUTTONS ----
   Base look (background/text/border/padding/radius/typography) comes from
   the Buttons block's own color/border/spacing/typography attributes on
   each button instance — no shared class needed for that. WP has no
   per-instance hover-color control on the Button block, so only the hover
   states stay as scoped custom CSS, keyed off WP's own preset-color classes
   (has-gold-background-color etc.) rather than an invented className. */
.wp-block-button__link:hover { transform: translateY(-2px); transition: all var(--transition); }
.has-gold-background-color.wp-block-button__link:hover {
  background-color: var(--gold-light);
  border-color: var(--gold-light);
  box-shadow: var(--shadow-md);
}
.has-navy-background-color.wp-block-button__link:hover {
  background-color: var(--navy-mid);
  border-color: var(--navy-mid);
  box-shadow: var(--shadow-md);
}
.has-cream-dark-background-color.wp-block-button__link:hover {
  background-color: var(--gold-pale);
  border-color: var(--gold-pale);
  box-shadow: var(--shadow-md);
}
.wp-block-button__link.btn-outline.has-white-color:hover {
  background: rgba(255,255,255,0.12);
  border-color: white;
}
.wp-block-button__link.btn-outline.has-navy-color:hover {
  background: var(--navy);
  color: white;
}
/* Legacy .btn-* classes: still used by locations-layout.php's per-item card
   actions (Get Directions / View Menu), which render inside a CPT loop and
   are out of scope for the Buttons-block conversion until that section
   becomes an ichimaru-core shortcode. Remove once that migration lands. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  font-size: var(--wp--preset--font-size--sm, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn-navy {
  background: var(--navy);
  color: white;
  border: 2px solid var(--navy);
}
.btn-navy:hover {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-outline-navy:hover {
  background: var(--navy);
  color: white;
  transform: translateY(-2px);
}

/* ---- SECTION LAYOUTS ----
   .section / .section-inner / .section-title / .section-subtitle have been
   fully retired in favour of Group blocks with layout:constrained +
   block-level padding (theme.json's contentSize gives the 1180px max-width
   for free) and Heading/Paragraph blocks using the fontSizes/color presets.
   .section-label survives — its ::before/::after decorative flourish lines
   have no core-block equivalent — applied as a className on a real
   paragraph block instead of a bare <span>. */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.section-label::before, .section-label::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

/* ---- SECTION SPACING ---- */
/* Home page sections are direct block-gap siblings in post_content; zero
   that gap so each section's own padding (consistently 6rem top/bottom)
   is the only spacing between them. */
.entry-content section + section { margin-top: 0 !important; }

/* ---- SEIGAIHA BACKGROUND ---- */
.seigaiha-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='60' height='52'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)' fill='none' stroke='%230d2044'%3E%3Ccircle cx='30' cy='52' r='28' stroke-width='1.5' opacity='0.13'/%3E%3Ccircle cx='30' cy='52' r='19' stroke-width='1' opacity='0.08'/%3E%3Ccircle cx='30' cy='52' r='10' stroke-width='0.75' opacity='0.05'/%3E%3Ccircle cx='0' cy='26' r='28' stroke-width='1.5' opacity='0.13'/%3E%3Ccircle cx='0' cy='26' r='19' stroke-width='1' opacity='0.08'/%3E%3Ccircle cx='0' cy='26' r='10' stroke-width='0.75' opacity='0.05'/%3E%3Ccircle cx='60' cy='26' r='28' stroke-width='1.5' opacity='0.13'/%3E%3Ccircle cx='60' cy='26' r='19' stroke-width='1' opacity='0.08'/%3E%3Ccircle cx='60' cy='26' r='10' stroke-width='0.75' opacity='0.05'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ---- HERO ---- */
/* See .navbar's comment above: blockGap can't live in these blocks' stored
   attributes without becoming invalid content, so the WP-injected 24px
   gap between children is suppressed here instead. */
.hero > * + *,
.hero-content > * + * { margin-block-start: 0; }
/* Cover blocks: the img/gradient-span/inner-container are the block's own
   generic children, so `:where(.is-layout-flow) > *` adds a 24px
   margin-block-start to the gradient span (position:absolute, so the
   margin still offsets it downward). That leaves the top ~24px of every
   Cover uncovered by its own overlay, showing the raw image through — the
   "lighter gap" at the top of the hero (and any other Cover on the site). */
.wp-block-cover > * { margin-block-start: 0; }
/* Cover block sizing/positioning (min-height, padding, align-items) also
   can't live as inline style on the block's own wrapper without becoming
   invalid content (only a small set of block-support properties are valid
   there) — these live as real classes instead. */
.hero-cover { position: absolute; inset: 0; }
.group-bg-cover { position: absolute; inset: 0; }
/* Every page hero — regardless of height, background treatment or
   left/center text alignment — starts its content at the same distance
   from the top of the page. WP Cover blocks are always display:flex with
   flex-direction:row, so align-items (not justify-content) is the
   vertical axis; overriding it to flex-start on all six, with the same
   padding-top, is what makes that consistent "start line" possible. */
.ichimaru-gradient-hero,
.ichimaru-navy-strip-hero,
.group-dining-hero-cover,
.careers-hero {
  align-items: flex-start !important;
  padding-top: 7rem;
}
.ichimaru-gradient-hero {
  min-height: max(50vh, 340px);
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 3rem;
}
.ichimaru-gradient-hero--compact { min-height: max(30vh, 220px); }
.ichimaru-navy-strip-hero { padding-left: 2rem; padding-right: 2rem; padding-bottom: 4rem; }
.ichimaru-navy-strip-hero--short { padding-top: 7rem; }
.group-dining-hero-cover { min-height: 70vh; }
/* Core's own CSS for a Cover block with a custom content position
   (.has-custom-content-position) sets the inner-container's width to fit
   its content instead of the block default of 100%, at the same selector
   specificity as this rule — so on a wide viewport the text shrink-wraps
   flush against the hero's own 2rem padding instead of centering in the
   1180px column, misaligning it against the page body below. !important
   is the only way to reliably win that fight. */
.ichimaru-gradient-hero .wp-block-cover__inner-container {
  max-width: 1180px;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
.ichimaru-navy-strip-hero .wp-block-cover__inner-container {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.group-dining-hero-cover .wp-block-cover__inner-container {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
/* Buttons block flex/justify/wrap also can't live as inline style on the
   block's own wrapper (see comments above) — the block already defaults to
   display:flex via core CSS, this just adds the centering/wrap behaviour. */
.ichimaru-buttons-center-wrap {
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero-cover.wp-block-cover {
  z-index: 1;
}
.hero-cover .wp-block-cover__image-background {
  transform-origin: center;
  will-change: transform;
}
.hero-content {
  position: relative;
  z-index: 10;
  color: white;
  padding: 0 1.5rem;
  max-width: 780px;
}
.hero-jp {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 1.1rem;
  color: var(--gold-light);
  letter-spacing: 0.25em;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}
.hero h1 {
  color: white;
  font-size: clamp(3rem, 7vw, 5.5rem);
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.78);
  margin-bottom: 2.5rem;
  letter-spacing: 0.06em;
  font-weight: 300;
}
.hero-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: scrollBounce 2s ease-in-out infinite;
}
.hero-scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5));
}
@keyframes scrollBounce {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.9; transform: translateX(-50%) translateY(5px); }
}

/* ---- STORY SECTION ---- */
.story-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.story-image-wrap {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-lg);
}
.story-image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.story-image-wrap:hover img { transform: scale(1.04); }
.story-text { padding: 1rem 0; }
.story-text p { margin-bottom: 1.5rem; line-height: 1.9; }

/* ---- BEST SELLERS ---- */
.menu-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 3rem auto 0;
  max-width: 1000px;
}
.menu-preview-card {
  display: block;
  background: var(--cream-dark);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.menu-preview-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.menu-preview-card-img {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--cream-dark);
}
.menu-preview-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.menu-preview-card:hover .menu-preview-card-img img { transform: scale(1.06); }
.menu-preview-card-body {
  padding: 1.5rem 1rem 1.75rem;
  text-align: center;
}
.menu-preview-card-name {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.menu-preview-card-line {
  font-size: 0.8rem;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- LOCATIONS (landing preview) ---- */
.locations-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 460px;
}
.locations-sidebar {
  background: var(--navy);
  color: white;
  overflow-y: auto;
}
.location-entry {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background var(--transition);
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.location-entry:hover, .location-entry.active {
  background: rgba(255,255,255,0.08);
}
.location-entry-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 5px;
}
.location-entry-name {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
  color: white;
}
.location-entry-area {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em;
}
#map { width: 100%; min-height: 460px; }
#map-page { width: 100%; height: 500px; }

/* ---- GROUP DINING ---- */
.group-section {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 460px;
  background: var(--navy);
}
.group-content {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 5rem 2rem;
  color: white;
}

/* ---- CAREERS SECTION ---- */
.careers-section {
  background: var(--cream-dark);
  position: relative;
  overflow: hidden;
}
.careers-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.career-photo {
  position: relative;
  aspect-ratio: 5/4;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.career-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---- FOOTER ---- */
footer {
  background: var(--navy);
  color: white;
  padding: 4rem 2rem 2rem;
}
/* See .navbar's comment further up: suppresses the WP-injected 24px gap
   between these Group blocks' children (can't live in stored attributes
   without becoming invalid content). */
.footer-inner > * + *,
.footer-top > * + *,
.footer-brand > * + *,
.footer-col > * + *,
.footer-bottom > * + *,
.footer-legal > * + * { margin-block-start: 0; }
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 2rem;
}
.footer-brand .nav-logo { margin-bottom: 1.25rem; }
.footer-brand p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
  max-width: 240px;
}
.footer-col h4 {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul li a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: white; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-copy {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
}
.footer-socials.wp-block-social-links {
  gap: 1rem;
}
.footer-socials .wp-social-link {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  transition: all var(--transition);
}
.footer-socials .wp-block-social-link-anchor,
.footer-socials .wp-block-social-link-anchor:visited {
  color: rgba(255,255,255,0.55);
}
.footer-socials .wp-social-link:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.1);
}
.footer-socials .wp-block-social-link-anchor:hover,
.footer-socials .wp-block-social-link-anchor:hover:visited {
  color: var(--gold-light);
}
.footer-socials .wp-social-link svg { width: 22px; height: 22px; }

/* ---- FILTER CHIPS ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}
/* ---- MENU CATEGORY TABS ---- */
.cat-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 1.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  border-radius: 2px;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.cat-btn:hover { color: var(--navy); }
.cat-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.cat-btn.active { color: var(--navy); border-bottom-color: var(--gold); }

.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all var(--transition);
  border: 1.5px solid var(--border);
  background: white;
  color: var(--text-mid);
  font-family: inherit;
}
.filter-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.filter-chip:hover { border-color: var(--navy); color: var(--navy); }
.filter-chip.active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.filter-chip.chip-vegan.active { background: #2d7a3a; border-color: #2d7a3a; }
.filter-chip.chip-veg.active   { background: #5a8f3c; border-color: #5a8f3c; }
.filter-chip.chip-halal.active { background: #1a6b8a; border-color: #1a6b8a; }
.filter-chip.chip-spicy.active { background: #c0392b; border-color: #c0392b; }
.filter-chip.chip-gluten-free.active { background: var(--gold); border-color: var(--gold); }

/* The diet icons' ring/glyph colours are hardcoded per diet (e.g. the vegan
   leaf is the same green as .chip-vegan.active's background above) so they
   read apart from each other normally — but that means they'd vanish
   against their own chip's active-state background. Force them white,
   matching the chip's own text colour, once active. */
.filter-chip.active svg .diet-ring,
.filter-chip.active svg .diet-line {
  stroke: #fff !important;
}
.filter-chip.active svg .diet-glyph {
  fill: #fff !important;
}
.filter-chip.active img {
  filter: brightness(0) invert(1);
}

/* ---- MENU CARDS ---- */
.menu-section-title {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  padding: 1.5rem 0 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.menu-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), opacity 0.3s;
  cursor: pointer;
}
.menu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.menu-card.hidden { display: none; }
.menu-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream-dark);
}
.menu-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.menu-card:hover .menu-card-img img { transform: scale(1.06); }
.menu-card-body { padding: 1.1rem 1.25rem 1.25rem; }
.menu-card-name {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.menu-card-desc {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.menu-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-card-price {
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
}
.menu-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  text-transform: uppercase;
}
.tag-vegan  { background: #e6f5e9; color: #2d7a3a; }
.tag-veg    { background: #eef6e4; color: #4d7d33; }
.tag-halal  { background: #e0f3f8; color: #1a6b8a; }
.tag-spicy  { background: #fde8e6; color: #c0392b; }
.tag-gluten-free { background: var(--gold-pale); color: #8a6a1f; }

/* List-style menu rows (.menu-list-row) show the dietary icon alone, no
   label text — the icon's own margin-right (meant to sit before a label)
   would otherwise leave a lopsided gap on this icon-only pill. */
.tag-icon-only {
  padding: 0.3rem;
  display: inline-flex;
}
.tag-icon-only svg,
.tag-icon-only img {
  margin-right: 0 !important;
}

/* ---- Menu card: placeholder tile for dishes awaiting photography ---- */
.menu-card-img.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-dark);
  color: var(--gold);
}
.menu-card-img.is-placeholder svg { width: 44%; height: auto; opacity: 0.55; }
.menu-card:hover .menu-card-img.is-placeholder svg { transform: none; }
.menu-card-price.price-tba {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* ---- Menu: text-only list sections (sides, toppings, grab-and-go) ---- */
.menu-list-title {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin: 2rem 0 0.75rem;
}
.menu-list-title:first-of-type { margin-top: 0.5rem; }
.menu-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.menu-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1.25rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--border);
}
.menu-list-row.hidden { display: none; }
.menu-list-main { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.menu-list-name { font-weight: 600; color: var(--navy); font-size: 0.9rem; }
.menu-list-desc {
  grid-column: 1 / 2;
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-top: 0.2rem;
}
.menu-list-price { font-weight: 700; color: var(--navy); font-size: 0.9rem; white-space: nowrap; }

/* ---- OUR STORY: THE NAME (一丸) ---- */
.kanji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}
.kanji-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 2.5rem 2rem;
  text-align: center;
}
.kanji-card:nth-child(2) { transition-delay: 0.15s; }
.kanji-mark {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: clamp(4.5rem, 11vw, 6.5rem);
  line-height: 1;
  color: var(--navy);
  margin-bottom: 1rem;
}
.kanji-reading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.kanji-meaning {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.kanji-card p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--text-light);
  margin: 0;
}
.brushmark {
  max-width: 560px;
  margin: 3.5rem auto 0;
  text-align: center;
}
.brushmark img {
  width: 104px;
  height: auto;
}
.brushmark .wp-block-image {
  margin: 0 0 1.75rem;
}
.brushmark p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text-mid);
  margin: 0;
}
.brushmark strong { color: var(--navy); }

/* ---- LOCATIONS PAGE ---- */
.location-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.location-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.location-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.location-card-head {
  background: var(--navy);
  color: white;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.location-card-head svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; }
.location-card-head h3 {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 1rem;
  color: white;
}
.location-card-body { padding: 1.25rem 1.5rem; }
.location-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-mid);
}
.location-detail svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--gold); }
.location-card-actions { padding: 0 1.5rem 1.5rem; display: flex; gap: 0.75rem; }

/* ---- CAREERS PAGE ---- */
.job-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.job-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--gold);
  transition: transform var(--transition), box-shadow var(--transition);
}
.job-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.job-card-title {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.job-card-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.job-badge {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.65rem;
  border-radius: 100px;
  text-transform: uppercase;
}
.badge-location { background: var(--gold-pale); color: var(--navy); }
.badge-type { background: #e0f3f8; color: #1a6b8a; }
.badge-dept { background: #f0ece0; color: var(--text-mid); }
.job-card-desc { font-size: 0.82rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 1.25rem; }
.job-card-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---- CAREERS: hero, benefits strip, culture, perks, apply form ---- */
.careers-hero {
  min-height: 60vh;
  padding: 7rem 2rem 4rem;
}
/* Same core width-vs-content-position fight as .ichimaru-gradient-hero
   above — force the inner-container back to full width before capping it,
   and center it on the site's standard 1180px column (not the hero's own
   2rem padding edge) so the heading lines up with the page body below,
   same as the Our Story / Contact fix. */
.careers-hero .wp-block-cover__inner-container {
  max-width: 1180px;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
/* Same block-gap issue as elsewhere on the site: WP's default 24px
   margin-block-start between top-level flow children leaves a visible
   navy-to-navy seam here, reading as a stray white-ish gap. */
.careers-hero + .benefits-strip {
  margin-top: 0 !important;
}
.benefits-strip {
  background: var(--navy);
  padding: 3rem 2rem;
}
.benefits-strip-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
}
.strip-item { text-align: center; color: white; }
.strip-item-num {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.strip-item-label { font-size: 0.78rem; color: rgba(255,255,255,0.6); letter-spacing: 0.05em; }

/* Explicitly centered on the site's standard 1180px column instead of
   relying on WP's automatic constrained-layout centering, which this
   block wasn't reliably picking up — same fix as the hero hero/Our Story
   alignment issues. Keeps the perks list (and the "Life at Ichimaru"
   copy above it) lined up with the rest of the page body. */
.culture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 1180px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.culture-images { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.culture-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.culture-img img { width: 100%; height: 180px; object-fit: cover; }
.culture-img.tall img { height: 380px; }
.culture-img-stack { display: flex; flex-direction: column; gap: 1rem; }

.perks-list { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0 2rem; }
/* WP's default block-gap rule (:where(.is-layout-flow) > *) also adds a
   24px top margin to each perk-item as a child of perks-list, stacking on
   top of the 1rem flex gap above and roughly doubling the row spacing. */
.perks-list > * { margin-block-start: 0; }
.perk-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; color: var(--text-mid); line-height: 1.6; }
/* Each perk-item is itself a flex row (icon + paragraph), but the same
   block-gap rule also hits the paragraph as the row's second child,
   pushing the text down out of line with the icon beside it. */
.perk-item > * { margin-block-start: 0; }
.perk-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.perk-icon svg { width: 16px; height: 16px; color: var(--gold); }

/* apply-form: background/padding stay here (see enquiry-box comment in
   group-dining.css) — this box has no responsive override yet, but keeping
   it consistent with the other Everest Forms containers on the site. */
.apply-form {
  background: white;
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
  .culture-grid { grid-template-columns: 1fr; }
  .culture-images { grid-template-columns: 1fr; }
  .culture-img.tall img { height: 220px; }
}

/* ---- ANIMATIONS ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}
/* The scroll-reveal IntersectionObserver in main.js (which adds .visible)
   only runs on the frontend, never inside the block editor's iframe — so
   every .animate-in element would otherwise sit permanently at opacity:0
   and look "blank"/invisible while editing. Neutralize it in the editor. */
.editor-styles-wrapper .animate-in {
  opacity: 1;
  transform: none;
}


/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .story-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .careers-content { grid-template-columns: 1fr; }
  .career-photo { aspect-ratio: 16/7; }
  .locations-layout { grid-template-columns: 1fr; }
  .locations-sidebar { display: flex; overflow-x: auto; }
  .location-entry { flex-shrink: 0; min-width: 200px; }
  /* .nav-right is a plain flex row (DOM order: links, then order button) so
     desktop reads "menu, then CTA". Below 1024px nav-links collapses to its
     hamburger toggle (blocks.css forces that 600-1024px, core's own default
     handles it under 600px) — reverse the visual order here so the CTA
     reads before the hamburger, without touching the underlying markup. */
  .nav-order-btn { order: -1; }
}
@media (max-width: 768px) {
  .section { padding: 4rem 1.25rem; }
  .navbar { padding: 1rem 1.25rem; }
  .navbar.scrolled { padding: 0.75rem 1.25rem; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  /* Shrink the CTA pill on mobile so it doesn't dominate the navbar next to
     the hamburger toggle, matching the original design's smaller mobile CTA. */
  .navbar .nav-order-btn .wp-block-navigation-item__content.wp-block-navigation-item__content {
    padding: 0.5rem 0.9rem;
    font-size: 0.7rem;
  }
  .menu-preview-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .hero-btns { flex-direction: column; align-items: center; }
  .menu-grid { grid-template-columns: 1fr; }
  .location-cards { grid-template-columns: 1fr; }
  .job-cards { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  h1 { font-size: 2.2rem; }
  .menu-preview-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---- FOOTER LEGAL LINKS ---- */
.footer-bottom {
  flex-wrap: wrap;
}
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.footer-legal-links a {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.32);
  transition: color var(--transition);
  text-decoration: none;
}
.footer-legal-links a:hover { color: var(--gold); }

/* ---- COOKIE CONSENT BANNER ---- */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--navy);
  border-top: 2px solid var(--gold);
  z-index: 10000;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner p {
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  margin: 0;
  flex: 1;
  min-width: 200px;
  line-height: 1.6;
}
.cookie-banner a { color: var(--gold); text-decoration: underline; }
.cookie-btns { display: flex; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; }
.cookie-accept {
  background: var(--gold);
  color: var(--navy);
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition);
  font-family: inherit;
}
.cookie-accept:hover { background: var(--gold-light); }
.cookie-reject {
  background: transparent;
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}
.cookie-reject:hover { border-color: rgba(255,255,255,0.65); color: white; }

/* ---- LEGAL / FAQ PAGES ---- */
.legal-page { background: var(--cream); }
.legal-section { max-width: 820px; margin: 0 auto; padding: 5rem 2rem 6rem; }
.legal-section h1 { font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; color: var(--navy); font-size: 2.2rem; margin-bottom: 0.5rem; }
.legal-meta { font-size: 0.78rem; color: var(--text-light); margin-bottom: 3rem; letter-spacing: 0.05em; text-transform: uppercase; }
.legal-section h2 {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color: var(--navy);
  font-size: 1.25rem;
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(13,32,68,0.1);
}
.legal-section h3 { color: var(--navy); font-size: 1rem; margin: 1.5rem 0 0.5rem; font-weight: 700; }
.legal-section p { color: var(--text-mid); line-height: 1.85; margin-bottom: 1rem; font-size: 0.95rem; }
.legal-section ul, .legal-section ol { color: var(--text-mid); line-height: 1.85; margin: 0.5rem 0 1rem 1.5rem; font-size: 0.95rem; }
.legal-section li { margin-bottom: 0.35rem; }
.legal-section a { color: var(--navy); text-decoration: underline; }
.legal-section a:hover { color: var(--gold); }

/* FAQs — core/details block (native <details>/<summary>, no JS needed).
   summary styling has no block-level color/typography panel of its own
   (it's a plain RichText attribute inside core/details, not a nested
   block), so it stays as CSS. */
.wp-block-details {
  border-bottom: 1px solid rgba(13,32,68,0.1);
  padding: 1.5rem 0;
}
.wp-block-details summary {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  user-select: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details p { margin-top: 0.75rem; }

/* ---- [allergen_information] LOCATION-PICKER MODAL ---- */
.allergen-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(13, 32, 68, 0.55);
}
.allergen-modal-overlay[hidden] { display: none; }
body.allergen-modal-open { overflow: hidden; }
.allergen-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
}
.allergen-modal h3 {
  font-family: 'Allumi Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 1.3rem;
  color: var(--navy);
  margin: 0.5rem 0 0.75rem;
}
.allergen-modal-intro {
  font-size: 0.85rem;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.allergen-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-light);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.allergen-modal-close:hover { background: var(--gold-pale); color: var(--navy); }
.allergen-modal-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text);
  background: white;
  cursor: pointer;
}
.allergen-modal-select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(13, 32, 68, 0.08);
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}