.elementor-kit-7{--e-global-color-primary:#2E5A16;--e-global-color-secondary:#D5381A;--e-global-color-text:#191510;--e-global-color-accent:#F2B42E;--e-global-typography-primary-font-family:"Coustard";--e-global-typography-primary-font-weight:900;--e-global-typography-secondary-font-family:"Coustard";--e-global-typography-secondary-font-weight:900;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-weight:500;background-color:#FCFBF8;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:939px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:639px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --e-gv-30386f4:clamp(2.9rem, 1.4rem + 6.6vw, 6rem); --ForestGreen:#2E5A16; --ForestDeep:#173009; --ForestMid:#3E7320; --LeafBright:#5B9A2E; --WarmPaper:#FCFBF8; --CreamPanel:#F3EAD6; --Ink:#191510; --InkSoft:#544C3E; --TomatoRed:#D5381A; --TomatoDeep:#B72E12; --AmberGold:#F2B42E; --White:#FFFFFF; --Night:#0E1305; --Hairline:#E7DFC7; --DisplayFont:Coustard; --BodyFont:Archivo; --SizeDisplay:clamp(2.9rem, 1.4rem + 6.6vw, 6rem); --SizeHeadline:clamp(2.15rem, 1.3rem + 3vw, 3.1rem); --SizeStat:clamp(2.4rem, 1.6rem + 2.5vw, 3.4rem); --SizeTitle:clamp(1.5rem, 1.2rem + 1vw, 2rem); --SizeSubhead:1.35rem; --SizeLede:clamp(1.0625rem, 1rem + 0.5vw, 1.25rem); --SizeLead:1.125rem; --SizeBody:1.0625rem; --SizeUI:0.9375rem; --SizeMeta:0.875rem; --SizeLabel:0.82rem; --SizeCaption:0.8rem; --RadXS:8px; --RadSM:10px; --RadMD:12px; --RadLG:14px; --RadXL:16px; --RadPill:999px; --SpaceXS:8px; --SpaceSM:12px; --SpaceMD:20px; --SpaceLG:32px; --SectionPad:clamp(3rem, 7vw, 5.4rem); --Gutter:clamp(1.1rem, 4vw, 2.4rem); }
/* Start custom CSS *//* Brothers Pizza — rules with no Elementor v4 style-schema equivalent (Phase 5, Gap 6). */

/* Selection colour */
::selection { background: var(--TomatoRed); color: #fff; }

/* Phone numbers must never break at their hyphens */
.s-header-tel, .s-footer-phone, a[href^="tel:"] { white-space: nowrap; }

/* Keep prices, hours and proof figures in clean columns */
.s-footer-hours, .bp-price, .bp-hours, .t-stat { font-variant-numeric: tabular-nums; }

/* Scrollbar in brand colours */
html { scrollbar-color: var(--ForestGreen) var(--CreamPanel); }

/* Honour reduced-motion for Elementor Interactions and any transition */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-interaction-id] { opacity: 1 !important; transform: none !important; }
}

/* Photo-tile image zoom on hover — needs a descendant .elementor-kit-7, which the v4 class system cannot express. */
.photo-tile .e-image-base { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.photo-tile:hover .e-image-base { transform: scale(1.05); }


/* Button labels never wrap to a second line. */
.btn { white-space: nowrap; }


/* Menu item price block — markup comes from a shortcode, so it is styled here. */
.bp-price { display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; white-space:nowrap; }
.bp-price-label { display:block; font-weight:700; color:var(--InkSoft); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.06em; }
/* Menu loop grids are simple stacked lists — no card gap. */
.elementor-widget-loop-grid .elementor-grid { gap:0 !important; }


/* ---- Sticky header -------------------------------------------------------
   position:sticky can only travel inside its parent's box, and the inner
   header element's parent (.elementor-location-header) is only header-height
   tall — so the stick has to live on that wrapper instead. --header-h is the
   single source of truth for anything that needs to clear the header. */
:root { --header-h: 73px; --wrap-max: 1200px; }

.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* ---- Category nav scroll affordance --------------------------------------
   The two `local` gradient layers scroll with the content and mask the two
   fixed `scroll` shadow layers, so each edge shadow appears only while there
   is more to scroll in that direction. Entirely CSS — no JS, works on touch. */
.s-catnav-inner {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  background:
    linear-gradient(to right, var(--WarmPaper) 32%, rgba(252,251,248,0)) left center / 60px 100% no-repeat local,
    linear-gradient(to left,  var(--WarmPaper) 32%, rgba(252,251,248,0)) right center / 60px 100% no-repeat local,
    radial-gradient(farthest-side at 0    50%, rgba(23,48,9,.20), rgba(23,48,9,0)) left center / 26px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(23,48,9,.20), rgba(23,48,9,0)) right center / 26px 100% no-repeat scroll;
}
.s-catnav-inner::-webkit-scrollbar { display: none; }

/* Clickable arrows — pointer devices only; touch users swipe. */
.catnav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--Hairline);
  border-radius: var(--RadPill);
  background: var(--White);
  color: var(--ForestGreen);
  font-family: var(--BodyFont);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px -2px rgba(20,32,8,.55);
  transition: background .15s, color .15s;
}
.catnav-arrow:hover {
  background: var(--ForestGreen);
  color: var(--White);
  border-color: var(--ForestGreen);
}
.catnav-arrow:focus-visible { outline: 3px solid var(--AmberGold); outline-offset: 2px; }
.catnav-arrow[hidden] { display: none; }
.catnav-arrow-prev { inset-inline-start: max(8px, calc((100% - var(--wrap-max)) / 2 + 8px)); }
.catnav-arrow-next { inset-inline-end: max(8px, calc((100% - var(--wrap-max)) / 2 + 8px)); }

@media (hover: none) { .catnav-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .s-catnav-inner { scroll-behavior: auto; } }

/* ---- Global keyboard focus ----------------------------------------------
   Component classes set their own focus rings, but inline links, the nav menu
   and the logo had none. :where() keeps specificity at 0 so the per-component
   rules still win where they exist. */
/* body :is(...) = specificity (0,1,2): beats Hello Elementor's reset.css
   a:focus-visible (0,1,1), still loses to component rules like
   .btn-order:focus-visible (0,2,0). */
body :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--AmberGold);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---- Collapsed nav dropdown (burger menu, below 940px) -------------------
   Elementor's dropdown collapses in height only, and is absolutely positioned
   via the widget's Full Width (stretch) setting. This just gives it brand
   styling and clears the sticky header. */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  background-color: var(--ForestDeep);
  border-radius: var(--RadMD);
  box-shadow: 0 16px 32px -20px rgba(20,32,8,.55);
  margin-top: 0.7rem;
  overflow: hidden;
}
.elementor-nav-menu--dropdown a,
.elementor-nav-menu--dropdown a:focus,
.elementor-nav-menu--dropdown a:hover {
  color: var(--White);
  font-family: var(--BodyFont);
  font-weight: 600;
  border-inline-start: 0;
}
.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-nav-menu--dropdown .elementor-item:focus,
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  background-color: var(--ForestMid);
  color: var(--White);
}
.elementor-menu-toggle {
  background-color: rgba(255,255,255,0.12);
  color: var(--White);
  border-radius: var(--RadSM);
}
.elementor-menu-toggle svg { fill: var(--White); }/* End custom CSS */