/* Eretz Kitchens: our additions on top of Webflow's stylesheet (see eretz-design-template.md).
   Brand: charcoal #212325, orange #f89400 (dark text on orange for contrast), warm white #fbf7f1.
   Pages load this as site.css?v=N: raise N (tools/enhance.py, V) after every change. */

/* ---------- SEO heading levels changed without changing looks ----------
   Same specificity as Webflow's tag rules (this file loads later, so it wins); Webflow class styles still win over both. */
h2:where(.ek-h1to2) {
  margin-top: 20px; margin-bottom: var(--_typography---h1-heading--h1-margin-bottom);
  font-family: var(--_typography---font--heading-font); font-size: var(--_typography---h1-heading--h1-size);
  line-height: var(--_typography---h1-heading--h1-line-height); font-weight: var(--_typography---h1-heading--h1-weight);
  letter-spacing: var(--_typography---h1-heading--h1-letter-spacing);
}
h1:where(.ek-h2to1) {
  margin-top: 20px; margin-bottom: 10px;
  font-family: var(--_typography---font--heading-font); font-size: var(--_typography---h2-heading--h2-size);
  line-height: var(--_typography---h2-heading--h2-line-height); font-weight: var(--_typography---h2-heading--h2-weight);
  letter-spacing: var(--_typography---h2-heading--h2-letter-spacing);
}

/* ---------- Accessibility: skip link, menu (assets/site/a11y.js), modes ---------- */
.ek-skip {
  position: fixed; z-index: 100000; top: 8px; right: 8px; padding: 12px 20px;
  background: #f89400; color: #212325 !important; font: 700 16px/1.2 "Nunito Sans", Arial, sans-serif; text-decoration: none;
  transform: translateY(-300%);
}
.ek-skip:focus { transform: none; outline: 3px solid #212325; outline-offset: 2px; }
main:focus { outline: none; }

.ek-a11y-btn {
  position: fixed; z-index: 99990; left: 0; bottom: 18px; width: 52px; height: 52px; padding: 0; border: 0; cursor: pointer;
  border-radius: 0 12px 12px 0; background: #212325; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset -3px 0 0 #f89400; transition: width .15s, bottom .3s;
}
.ek-a11y-btn:hover, .ek-a11y-btn:focus-visible { width: 58px; }
.ek-a11y-btn:focus-visible, .ek-a11y-panel button:focus-visible, .ek-a11y-panel a:focus-visible { outline: 3px solid #f89400; outline-offset: 2px; }
html.ek-consent-up .ek-a11y-btn { bottom: 150px; }
.ek-a11y-panel {
  position: fixed; z-index: 99991; left: 12px; bottom: 80px; width: 300px; max-width: calc(100vw - 24px); max-height: calc(100vh - 100px); overflow: auto;
  padding: 18px; border-radius: 14px; direction: rtl; text-align: right; color: #fff; font-family: "Nunito Sans", Arial, sans-serif;
  background: #212325; border-top: 4px solid #f89400; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.ek-a11y-panel[hidden] { display: none; }
.ek-a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ek-a11y-head b { font-size: 20px; }
.ek-a11y-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 24px; line-height: 36px; cursor: pointer; }
.ek-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ek-a11y-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 92px; padding: 12px 8px; border-radius: 10px; cursor: pointer;
  border: 2px solid transparent; background: #fff; color: #212325; font: 700 14px/1.25 "Nunito Sans", Arial, sans-serif; text-align: center;
}
.ek-a11y-grid button small { font-size: 12px; color: #5f5a52; min-height: 14px; }
.ek-a11y-grid button[aria-pressed="true"] { border-color: #f89400; background: #fff4e0; box-shadow: 0 0 0 3px rgba(248, 148, 0, .35); }
.ek-a11y-link { display: block; margin-top: 14px; text-align: center; color: #ffb84d !important; text-decoration: underline; font-size: 15px; }

html.ek-a11y-zoom body { zoom: var(--ek-zoom, 1); }
html.ek-a11y-contrast main, html.ek-a11y-contrast .navbar-elements, html.ek-a11y-contrast footer { filter: contrast(1.4) saturate(1.15); }
html.ek-a11y-contrast main p, html.ek-a11y-contrast main li { text-shadow: 0 0 1px currentColor; }
html.ek-a11y-links a:not(.ek-a11y-btn):not(.ek-skip) { text-decoration: underline !important; text-underline-offset: 3px; outline: 2px dashed #f89400; outline-offset: 2px; }
html.ek-a11y-font body, html.ek-a11y-font body * { font-family: Arial, "Segoe UI", Helvetica, sans-serif !important; letter-spacing: .01em; }
html.ek-a11y-still *, html.ek-a11y-still *::before, html.ek-a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

@media (max-width: 600px) {
  .ek-a11y-btn { width: 46px; height: 46px; bottom: 14px; }
  html.ek-consent-up .ek-a11y-btn { bottom: 230px; }
  .ek-a11y-panel { left: 6px; right: 6px; width: auto; bottom: 10px; }
}

/* ---------- Cookie banner (assets/site/consent.js) ---------- */
.ek-consent {
  position: fixed; z-index: 99999; left: 16px; right: 16px; bottom: 16px; max-width: 780px; margin: 0 auto; direction: rtl; text-align: right;
  font-family: "Nunito Sans", Arial, sans-serif; color: #fff; padding: 20px 22px; display: flex; align-items: center; gap: 18px;
  background: #212325; border-top: 4px solid #f89400; box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  transform: translateY(150%); transition: transform .45s cubic-bezier(.2, 1, .3, 1);
}
.ek-consent.ek-show { transform: none; }
.ek-consent p { margin: 0; flex: 1; font-size: 15px; line-height: 1.55; color: #e4dfd7; }
.ek-consent p b { display: block; margin-bottom: 2px; font-size: 17px; color: #fff; }
.ek-consent a.ek-c-link { color: #ffb84d; text-decoration: underline; }
.ek-consent .ek-c-btns { display: flex; gap: 10px; flex: none; }
.ek-consent button { font-family: inherit; font-size: 15px; font-weight: 700; padding: 11px 20px; cursor: pointer; white-space: nowrap; border: 2px solid #f89400; border-radius: 0; }
.ek-consent .ek-c-all { background: #f89400; color: #212325; }
.ek-consent .ek-c-all:hover { background: #ffa21f; }
.ek-consent .ek-c-min { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.ek-consent .ek-c-min:hover { border-color: #fff; }
.ek-consent button:focus-visible, .ek-consent a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
  .ek-consent { left: 10px; right: 10px; bottom: 10px; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
  .ek-consent button { flex: 1; padding: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) { .ek-consent { transition: none; } }

/* ---------- Brand orange = the logo's amber (Adam, Oct 14: Webflow's #ff6b00 was too aggressive) ----------
   Fills (buttons, bands, labels, badges) use the logo orange #f89400 with charcoal text (6.8:1, IS 5568 / WCAG AA).
   Orange words on white keep the logo's hue but darker, so they stay readable: #d47800 for large headings (3.2:1),
   #a65e00 for small links (4.9:1). Hover: #ffa21f. */
:root {
  --_colors---core-accent-color--accent-primary: #f89400;
  --_colors---core-accent-color--accent-primary-hover: #ffa21f;
  --_colors---text-color--text-accent-on-primary: #d47800;
  --_colors---core-color-tint--accent-primary-a20: #f8940033;
  --_colors---core-color-tint--accent-primary-a10: #f894001a;
  --_colors---core-color-tint--accent-primary-a90: #f89400e6;
  --_colors---core-color-tint--accent-primary-a80: #f89400cc;
  --_colors---core-color-tint--accent-primary-a70: #f89400b3;
  --_colors---core-color-tint--accent-primary-a60: #f8940099;
  --_colors---core-color-tint--accent-primary-a50: #f8940080;
  --_colors---core-color-tint--accent-primary-a40: #f8940066;
  --_colors---core-color-tint--accent-primary-a30: #f894004d;
}
.team-prev, .team-next { background-color: #f89400; }
.button, .heading-4, .heading-4-copy, .eyebrow { color: #212325; }
.button:not(.is-secondary):not(.on-accent-primary):not(.on-accent-secondary):not(.on-accent-tertiary) { background-color: #f89400; }
.button:not(.is-secondary):not(.on-accent-primary):not(.on-accent-secondary):not(.on-accent-tertiary):hover { background-color: #ffa21f; background-image: none; color: #212325; }
.heading-4, .heading-4-copy, .eyebrow { background-color: #f89400; }
.text-button { color: #a65e00; }
.text-span-3, .text-span-4, .text-span-6, .text-span-7, .text-span-9, .heading, .heading_h1.o { color: #d47800; }

/* ---------- Footer links and small fixes ---------- */
.ek-foot-link { color: #ffc266 !important; text-decoration: none; white-space: nowrap; }
.ek-foot-link:hover, .ek-foot-link:focus-visible { color: #fff !important; text-decoration: underline; }
.ek-404-home { display: inline-block; margin-top: 18px; padding: 12px 24px; background: #f89400; color: #212325; font-weight: 700; text-decoration: none; }
/* spam-trap field: clipped in place (pushed far left it would add a sideways scrollbar on right-to-left pages) */
.ek-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }

/* ---------- Privacy policy and accessibility statement (privacy.html, accessibility.html) ---------- */
.ek-legal { padding: 150px 20px 80px; direction: rtl; font-family: "Nunito Sans", Arial, sans-serif; background: #fbf7f1; }
.ek-legal-head { max-width: 860px; margin: 0 auto 28px; text-align: center; }
.ek-legal-head .ek-kicker { display: inline-block; padding: 6px 16px; background: #f89400; color: #212325; font-weight: 700; font-size: 15px; }
.ek-legal-head h1 { margin: 16px 0 6px; font-size: 44px; line-height: 1.2; color: #212325; }
.ek-legal-head p { margin: 0; color: #5f5a52; font-size: 16px; }
.ek-legal-card {
  max-width: 860px; margin: 0 auto; padding: 44px 52px; background: #fff; color: #212325; text-align: right;
  border: 1px solid #212325; box-shadow: 8px 8px 0 #f89400;
}
.ek-legal-card h2 { margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 2px solid #f89400; font-size: 24px; line-height: 1.3; color: #212325; }
.ek-legal-card h2:first-of-type { margin-top: 26px; }
.ek-legal-card p, .ek-legal-card li { font-size: 17px; line-height: 1.8; color: #33363a; }
.ek-legal-card p { margin: 0 0 12px; }
.ek-legal-card ul { margin: 0 0 14px; padding: 0 22px 0 0; }
.ek-legal-card li { margin-bottom: 6px; }
.ek-legal-card li::marker { color: #f89400; }
.ek-legal-card a { color: #a65e00; text-decoration: underline; }
.ek-legal-contact { padding: 18px 22px; background: #fbf7f1; border-right: 4px solid #f89400; }
@media (max-width: 600px) {
  .ek-legal { padding: 125px 12px 52px; }
  .ek-legal-head h1 { font-size: 32px; }
  .ek-legal-card { padding: 26px 20px; box-shadow: 5px 5px 0 #f89400; }
  .ek-legal-card h2 { font-size: 20px; }
  .ek-legal-card p, .ek-legal-card li { font-size: 16px; }
}

/* ---------- Desktop 80% rule (Adam, Oct 2026) ----------
   Floating content (text, buttons, cards, inline photos) stays inside the middle 80% of the screen (10vw from each edge),
   so everything lines up with the menu. Only backgrounds and full-width banners run edge to edge: the home hero (.main-banner),
   the night-kitchen banner (.night), the photo-shoot photo and its orange title band (.camera-promo), the designers banner photo.
   Text first: where a photo sits beside text, the text keeps its width and the photo gives way.
   From 1280px up; narrower desktops keep Webflow's own layout (there the band would squeeze the menu and the text columns). */
@media (min-width: 1280px) {
  .navbar-final-elements .container-regular { max-width: 80vw; margin-left: auto; margin-right: auto; }
  .navbar-final-elements .navbar-wrapper .button-group { flex: none; }
  .navbar-final-elements .button { white-space: nowrap; }
  /* menu links: Webflow's 41px side padding at 1440px, tighter below so logo, links and button fit the band */
  .navbar-final-elements .navbar-brand { flex: none; }
  .navbar-final-elements .nav-menu-wrapper { margin-right: 24px; }
  .navbar-final-elements .nav-menu-wrapper .nav_link { padding-left: min(41.36px, calc(7.1vw - 61px)); padding-right: min(41.36px, calc(7.1vw - 61px)); }

  #main > .intro .container-intro { max-width: 80vw; }
  #main > .intro .grid_2-col-copy { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  #main > .pain { padding-left: 10vw; padding-right: 10vw; box-sizing: border-box; }
  #main > .pain > .header { flex: 1 1 56%; }
  #main > .pain > .div-block-14 { flex: 0 1 40%; margin-right: 0; }
  .camera-promo .div-block-20 { max-width: 80vw; margin-left: auto; margin-right: auto; }
  .logos-title-large .grid { max-width: 80vw; margin-left: auto; margin-right: auto; grid-column-gap: min(30px, calc((80vw - 960px) / 7)); }
  .designers-banner .div-block-21 { padding-right: 10vw; box-sizing: border-box; }
  .section-9-new .team-scroll { max-width: 80vw; margin-left: auto; margin-right: auto; }
  footer.footer-main { padding-left: 10vw; padding-right: 10vw; box-sizing: border-box; }
}