/*
 * OHMIYA visual refresh — loaded last on every page, overrides the imported
 * Bridge/Elementor styles. Tokens come from the logo (gold + vermilion).
 */
:root {
  --ohm-bg: #0e0c0a;
  --ohm-surface: #171411;
  --ohm-line: rgba(233, 185, 138, .22);
  --ohm-gold: #e9b98a;
  --ohm-gold-strong: #f3cda6;
  --ohm-red: #b5332e;
  --ohm-text: #e6e1d8;
  --ohm-muted: #a8a196;
  --ohm-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --ohm-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --ohm-section: 120px;
}
@media (max-width: 768px) {
  :root { --ohm-section: 72px; }
}

/* Theme paints selections white, which hides the white body text */
::selection { background: var(--ohm-gold); color: var(--ohm-bg); }
::-moz-selection { background: var(--ohm-gold); color: var(--ohm-bg); }

/* ---------- 2. Warm black base + alternating surfaces ---------- */
html, body, .wrapper, .wrapper_inner, .content, .content .container,
.full_width, footer .footer_top_holder, footer .footer_bottom_holder {
  background-color: var(--ohm-bg) !important;
}
.elementor-element-f3bf347,                 /* home: open hours */
.elementor-element-c55b4b4,                 /* contact: map band */
footer .footer_top_holder {
  background-color: var(--ohm-surface) !important;
}
footer .footer_top_holder { border-top: 1px solid var(--ohm-line); }
.footer_bottom_border { background-color: var(--ohm-line) !important; }

/* ---------- 5. Typography: one display serif + readable body ---------- */
h1, h2, h3, h4, h5, h6,
.title h1, .title .title_holder h1,
sr7-txt#SR7_1_1-1-1 {
  font-family: var(--ohm-display) !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
}
body, p, .content p, footer p, li, input, textarea {
  font-family: var(--ohm-sans);
}
.content p, .content li, footer p, footer .textwidget p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}
.content p, .content p span[style*="#ffffff"], .content li {
  color: var(--ohm-text) !important;
}
footer p, footer .textwidget p, footer a { color: var(--ohm-muted) !important; }
footer strong, footer h5 { color: var(--ohm-text) !important; }

/* About story: real paragraph spacing instead of leading <br> */
.elementor-element-de3c6aa p + p { margin-top: 1.1em !important; }

/* ---------- 1. Brand accent ---------- */
/* Italic eyebrow lines ("Welcome to OHMIYA", "Behind the scene", …) */
.elementor-widget-text-editor h5,
sr7-txt#SR7_1_1-1-0 {
  font-family: var(--ohm-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--ohm-gold) !important;
  letter-spacing: .04em;
}
footer h5 {
  font-size: 22px !important;
  letter-spacing: .06em;
}
.main_menu > ul > li > a { transition: color .2s ease; }
.main_menu > ul > li > a:hover,
.main_menu > ul > li.active > a,
.main_menu > ul > li.active > a span {
  color: var(--ohm-gold) !important;
}
.main_menu > ul > li.active > a span { text-decoration-color: var(--ohm-gold) !important; }
/* Active/hover underline: drop it below the text instead of touching the glyphs */
nav.main_menu ul li a span.underline_dash {
  top: auto !important;
  bottom: -9px !important;
  height: 1px !important;
  background-color: var(--ohm-gold) !important;
}
.content a:not(.qode-btn):not(.qodef-popup-item):hover,
footer a:hover { color: var(--ohm-gold) !important; }

/* Buttons: gold outline, fills on hover */
.qode-btn, .qode-btn.qode-btn-simple, .wpcf7-submit, .ohm-btn {
  display: inline-block;
  padding: 14px 34px !important;
  border: 1px solid var(--ohm-gold) !important;
  background: transparent !important;
  color: var(--ohm-gold) !important;
  font-family: var(--ohm-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  line-height: 1.2 !important;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.qode-btn:hover, .wpcf7-submit:hover, .ohm-btn:hover,
.qode-btn:focus-visible, .wpcf7-submit:focus-visible, .ohm-btn:focus-visible {
  background: var(--ohm-gold) !important;
  color: var(--ohm-bg) !important;
}
.qode-btn .qode-btn-text { color: inherit !important; }

/* ---------- 3. Header reservation CTA + mobile action bar ---------- */
.ohm-header-cta {
  vertical-align: middle;
  margin-left: 6px;
  padding: 10px 20px !important;
  font-size: 12px !important;
}
.ohm-mobile-bar { display: none; }
@media (max-width: 1000px) {
  .ohm-header-cta { display: none !important; }
  .ohm-mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    display: grid; grid-template-columns: 1fr 1fr;
    background: rgba(14, 12, 10, .96);
    border-top: 1px solid var(--ohm-line);
    padding-bottom: env(safe-area-inset-bottom);
    backdrop-filter: blur(6px);
  }
  .ohm-mobile-bar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 56px;
    font: 500 13px/1 var(--ohm-sans);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ohm-text) !important;
  }
  .ohm-mobile-bar a + a { background: var(--ohm-gold); color: var(--ohm-bg) !important; }
  body { padding-bottom: 56px; }
  #back_to_top { display: none !important; }  /* the action bar replaces it on small screens */
}

/* ---------- 7. Home hero: gradient instead of boxed text ---------- */
sr7-txt#SR7_1_1-1-0, sr7-txt#SR7_1_1-1-1 {
  background: transparent !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .65);
}
sr7-txt#SR7_1_1-1-0 {
  color: var(--ohm-gold-strong) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .9), 0 0 28px rgba(0, 0, 0, .85);
}
#SR7_1_1-1-3::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* Shade only where the headline sits; keep the food and the bottom
     "JAPANESE RESTAURANT" band close to the original photo. */
  background:
    radial-gradient(ellipse 60% 32% at 50% 50%, rgba(14, 12, 10, .45) 0%, rgba(14, 12, 10, .2) 55%, transparent 100%),
    linear-gradient(to bottom, rgba(14, 12, 10, .2), transparent 18%, transparent 72%, rgba(14, 12, 10, .25));
}
a#SR7_1_1-1-2 {
  background: rgba(14, 12, 10, .55) !important;
  border-color: var(--ohm-gold) !important;
  color: var(--ohm-gold) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  font-family: var(--ohm-sans) !important;
}
a#SR7_1_1-1-2:hover { background: var(--ohm-gold) !important; color: var(--ohm-bg) !important; }

/* ---------- 8. Inner page banners ---------- */
/* The theme's fixed-attachment parallax sizes the photo to the viewport, so
   portrait-ish photos only show their top edge. Size to the banner instead. */
.title.has_fixed_background {
  position: relative;
  background-attachment: scroll !important;
  background-size: cover !important;
  background-position: center 50% !important;
}
.title.ohm-banner-sushi { background-position: center 42% !important; }  /* shop sign + counter */
.title.ohm-banner-about { background-position: center 66% !important; }  /* lanterns + dining room */
/* ≤1000px the theme swaps the background for the inline <img>: crop it to a
   banner and keep the overlay and title above it. */
.title.has_fixed_background::before { z-index: 1; }
.title.has_fixed_background .title_holder { z-index: 2 !important; }
@media (max-width: 1000px) {
  .title.has_fixed_background .image img {
    width: 100%;
    height: clamp(300px, 52vw, 480px);
    object-fit: cover;
    object-position: center 50%;
  }
  .title.ohm-banner-sushi .image img { object-position: center 42%; }
  .title.ohm-banner-about .image img { object-position: center 40%; }
  .title.has_fixed_background h1 { font-size: clamp(44px, 7vw, 64px) !important; line-height: 1.1 !important; }
}
.title.has_fixed_background::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 12, 10, .55), rgba(14, 12, 10, .35) 45%, rgba(14, 12, 10, .85));
}
.title.has_fixed_background .title_holder { position: relative; z-index: 1; }
.title h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }

/* ---------- 10. Consistent section rhythm ---------- */
.elementor-element-f3bf347,   /* home: open hours */
.elementor-element-6305971,   /* sushi/about: our story */
.elementor-element-f367f8d,   /* sushi: gallery */
.elementor-element-db7bc20,   /* contact: form */
.elementor-element-1eee60e {  /* menu: intro */
  padding-top: var(--ohm-section) !important;
  padding-bottom: var(--ohm-section) !important;
}
.elementor-element-c316a72 { padding-top: var(--ohm-section) !important; }   /* home: we promise */
.elementor-element-663c6e1,
.elementor-element-d492f0b { padding-bottom: var(--ohm-section) !important; }
footer .footer_top { padding-top: 96px !important; padding-bottom: 72px !important; }

/* ---------- 9. Sushi gallery: contained 5×2 grid ---------- */
.ohm-sushi-grid .qodef-grid-inner {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 24px;
}
.ohm-sushi-grid .qodef-grid-item {
  width: auto !important; padding: 0 !important; margin: 0 !important;
  float: none !important;
  overflow: hidden;
}
.ohm-sushi-grid .qodef-grid-item img {
  display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  transition: transform .5s ease;
}
.ohm-sushi-grid .qodef-grid-item:hover img { transform: scale(1.04); }
@media (max-width: 1024px) {
  .ohm-sushi-grid .qodef-grid-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}

/* ---------- 4. Menu boards: clear "tap to enlarge" affordance ---------- */
.qodef-popup-item { position: relative; display: block; cursor: zoom-in; }
.qodef-qi-image-slider .qodef-popup-item::after {
  content: 'Tap to enlarge';
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  padding: 8px 16px;
  font: 500 11px/1 var(--ohm-sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ohm-bg); background: var(--ohm-gold);
  opacity: 0; transition: opacity .2s ease;
  pointer-events: none;
}
.qodef-qi-image-slider .qodef-popup-item:hover::after,
.qodef-qi-image-slider .qodef-popup-item:focus-visible::after { opacity: 1; }
@media (hover: none) { .qodef-qi-image-slider .qodef-popup-item::after { opacity: .92; } }
.fslightbox-container { background: rgba(8, 7, 6, .96) !important; }

/* Home open hours: kitchen cut-off note under the timetable */
.ohm-last-orders { margin-top: 18px !important; color: var(--ohm-gold) !important; font-style: italic; }

/* ---------- 13. Contact + booking forms ---------- */
#enquiry, #booking { scroll-margin-top: 120px; }
.ohm-label {
  display: block; margin: 0 0 6px;
  font: 500 11px/1.2 var(--ohm-sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ohm-muted);
}
#ohmiya-contact > div, #ohmiya-booking > div { margin-bottom: 18px; }
#ohmiya-contact input:not([type=submit]):not([name=website_url]), #ohmiya-booking input:not([type=submit]):not([name=website_url]),
#ohmiya-contact textarea, #ohmiya-booking textarea {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(230, 225, 216, .28) !important;
  color: #f7f3ec !important;
  -webkit-text-fill-color: #f7f3ec;
  caret-color: var(--ohm-gold);
  font-family: var(--ohm-sans) !important;
  font-size: 16px !important;   /* 16px also stops iOS zooming on focus */
  font-weight: 400 !important;  /* theme default is 200, too thin to read */
  letter-spacing: .01em !important;
  transition: border-color .2s ease, background-color .2s ease;
}
#ohmiya-contact input:focus, #ohmiya-booking input:focus, #ohmiya-contact textarea:focus, #ohmiya-booking textarea:focus {
  border-color: var(--ohm-gold) !important; outline: none;
  background: rgba(255, 255, 255, .08) !important;
}
/* Browser autofill would otherwise paint a pale box with dark text */
#ohmiya-contact input:-webkit-autofill, #ohmiya-booking input:-webkit-autofill,
#ohmiya-contact input:-webkit-autofill:hover, #ohmiya-booking input:-webkit-autofill:hover,
#ohmiya-contact input:-webkit-autofill:focus, #ohmiya-booking input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f7f3ec;
  -webkit-box-shadow: 0 0 0 1000px #23201c inset;
  caret-color: var(--ohm-gold);
}
#ohmiya-contact .wpcf7-submit, #ohmiya-booking .wpcf7-submit { height: auto !important; min-height: 0 !important; }
#ohmiya-contact ::placeholder, #ohmiya-booking ::placeholder { color: #8a847b !important; opacity: 1; }
#enquiry-result:not(:empty), #booking-result:not(:empty) { margin-top: 18px; color: var(--ohm-gold) !important; }
#ohmiya-booking { color-scheme: dark; }  /* light date/time picker icons on the dark form */
/* Booking form: theme margins/padding differ per input type, so reset them and let the rows set the rhythm */
#ohmiya-booking input:not([type=submit]):not([name=website]),
#ohmiya-booking textarea {
  width: 100% !important; height: auto !important; margin: 0 !important;
  padding: 14px 16px !important; line-height: 1.4 !important; box-sizing: border-box;
}
#ohmiya-booking .ohm-picker input.ohm-picker-input { padding-right: 42px !important; }
#ohmiya-booking input[type=number] { -moz-appearance: textfield; }
#ohmiya-booking input[type=number]::-webkit-inner-spin-button,
#ohmiya-booking input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ohm-booking-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .75fr); gap: 0 14px; }
.ohm-booking-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#ohmiya-booking > .ohm-booking-row { margin-bottom: 0; }
.ohm-booking-row > div { margin-bottom: 18px; }
@media (max-width: 600px) {
  .ohm-booking-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ohm-booking-row > div:first-child { grid-column: 1 / -1; }   /* date full width, time + guests share a row */
  .ohm-booking-row--two { grid-template-columns: 1fr; }
}
/* Custom date/time pickers (booking.js) replace the native browser widgets */
.ohm-picker { position: relative; }
.ohm-picker .ohm-picker-input { padding-right: 40px !important; cursor: pointer; }
.ohm-picker-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ohm-gold); font-size: 15px; pointer-events: none;
}
.ohm-picker-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: 300px; max-width: calc(100vw - 40px); padding: 16px;
  background: #1d1915; border: 1px solid var(--ohm-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.ohm-picker-pop[hidden] { display: none; }
.ohm-picker-pop button {
  margin: 0; padding: 0; height: auto; min-height: 0; line-height: 1;
  font: 400 14px var(--ohm-sans) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--ohm-text); background: transparent; border: 1px solid transparent; border-radius: 0;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ohm-picker-pop button:hover:not(:disabled) { background: rgba(233, 185, 138, .14); color: var(--ohm-gold-strong); }
.ohm-picker-pop button:focus-visible { outline: none; border-color: var(--ohm-gold); }
.ohm-picker-pop button:disabled { color: #4d4740; cursor: default; }
.ohm-picker-pop button.is-selected,
.ohm-picker-pop button.is-selected:hover { background: var(--ohm-gold); color: var(--ohm-bg); }
.ohm-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ohm-cal-head span { font: 500 20px/1 var(--ohm-display); color: #f7f3ec; letter-spacing: .02em; }
.ohm-cal-head button { width: 32px; height: 32px; font-size: 22px !important; color: var(--ohm-gold); }
.ohm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ohm-cal-dow {
  padding: 6px 0; text-align: center;
  font: 500 10px/1 var(--ohm-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ohm-muted);
}
.ohm-cal-day { aspect-ratio: 1; }
.ohm-cal-day.is-today { border-color: var(--ohm-line); color: var(--ohm-gold); }
.ohm-time-group + .ohm-time-group { margin-top: 14px; }
.ohm-time-label {
  display: block; margin-bottom: 8px;
  font: 500 10px/1 var(--ohm-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ohm-muted);
}
.ohm-time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ohm-time-slot { padding: 9px 0 !important; border-color: rgba(230, 225, 216, .12) !important; }
.ohm-time-slot.is-selected { border-color: var(--ohm-gold) !important; }
.ohm-time-note { margin: 14px 0 0 !important; font-size: 12px !important; color: var(--ohm-muted) !important; }
.ohm-booking-hint { color: var(--ohm-muted) !important; font-size: 14px !important; line-height: 1.6 !important; margin: 0 0 6px !important; }
.ohm-booking-hint a { color: var(--ohm-gold) !important; }
/* Contact + book: entrance photos */
.ohm-door-photo { width: 100%; margin: 36px 0 0; }
.ohm-door-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%; }
/* Book page on phones: contact details, then the form, photo last so the form isn't pushed down */
.ohm-door-photo--mobile { display: none; }
@media (max-width: 767px) {
  .ohm-book-section .ohm-door-photo:not(.ohm-door-photo--mobile) { display: none; }
  .ohm-book-section .ohm-door-photo--mobile { display: block; margin-top: 48px; }
  .ohm-book-section .elementor-element-daa1823 > .elementor-element-populated { padding-bottom: 40px !important; }
}
.ohm-finding-us { padding: var(--ohm-section) 40px; }
.ohm-finding-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.ohm-finding-inner img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ohm-finding-text p { margin: 0 0 28px !important; }
@media (max-width: 768px) {
  .ohm-finding-us { padding: var(--ohm-section) 20px; }
  .ohm-finding-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* Contact page: steer table bookings to /book before the general enquiry form */
.ohm-book-card {
  margin: 0 0 40px; padding: 28px 30px;
  border: 1px solid var(--ohm-line); background: var(--ohm-surface);
}
.ohm-book-card h5 { margin: 0 0 8px; }
.ohm-book-card p { margin: 0 0 20px !important; color: var(--ohm-muted) !important; }
.ohm-enquiry-heading { margin: 0 0 18px; }
.ohm-enquiry-note[hidden] { display: none !important; }
.ohm-enquiry-note p { color: var(--ohm-muted) !important; font-size: 14px !important; }

/* ---------- 11/12. Footer contact + social ---------- */
footer .q_icon_list p a, .content .q_icon_list p a { color: inherit !important; }
.ohm-footer-social { display: flex; justify-content: center; gap: 18px; margin-top: 18px; }
.ohm-footer-social a { color: var(--ohm-muted) !important; font-size: 17px; transition: color .2s ease; }
.ohm-footer-social a:hover { color: var(--ohm-gold) !important; }

/* Footer bottom bar: copyright left, credit right, identical type on both */
footer .footer_bottom { text-align: left !important; padding: 0 !important; height: auto !important; line-height: normal !important; }
.ohm-footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px 32px;
  max-width: 1300px; margin: 0 auto; padding: 26px 40px;
}
.ohm-footer-bottom p,
.ohm-footer-bottom a {
  margin: 0 !important;
  font-family: var(--ohm-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: .04em !important;
  color: var(--ohm-muted) !important;
}
.ohm-footer-bottom a { text-decoration: none; transition: color .2s ease; }
.ohm-footer-bottom a:hover, .ohm-footer-bottom a:focus-visible { color: var(--ohm-gold) !important; }
@media (max-width: 768px) {
  .ohm-footer-bottom { flex-direction: column; text-align: center; padding: 24px 20px; }
}

/* Turnstile widget sits between the message field and the submit button */
#ohmiya-contact .ohm-turnstile, #ohmiya-booking .ohm-turnstile { margin: 4px 0 18px; min-height: 65px; }

/* Narrow screens: the headline covers most of the photo, so shade a wider area */
@media (max-width: 768px) {
  #SR7_1_1-1-3::after {
    background:
      radial-gradient(ellipse 95% 42% at 50% 50%, rgba(14, 12, 10, .6) 0%, rgba(14, 12, 10, .3) 60%, transparent 100%),
      linear-gradient(to bottom, rgba(14, 12, 10, .2), transparent 18%, transparent 72%, rgba(14, 12, 10, .25));
  }
}

/* Home h1 keeps the italic eyebrow look of the h5 it replaced */
.ohm-home-h1 {
  margin: 0 !important;
  font-family: var(--ohm-display) !important;
  font-size: 21px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 31px !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  color: var(--ohm-gold) !important;
}