/*
Theme Name: Napolino
Theme URI: https://alvinazmi.com
Author: Alvin Azmi Alexander
Author URI: https://alvinazmi.com
Description: Elementor-ready base theme for Napolino Woodfired Pizza. Layout and styling live in Elementor (Site Settings > Global Colors / Global Fonts, Theme Builder header & footer); this stylesheet only carries the brand tokens and the few behaviours Elementor has no control for.
Version: 1.3.4
Requires at least: 6.8
Requires PHP: 7.4
Requires Plugins: elementor
License: Proprietary
Text Domain: napolino
*/

/* ===========================================================================
   Tokens — sRGB values from the Figma CSS export (not the handoff hex, which
   are Display P3 coordinates). The Elementor globals win when present; the
   hex is only the fallback for non-Elementor pages (404, plain pages).
   =========================================================================== */
:root {
  --nap-brown:      var(--e-global-color-primary, #652B00);
  --nap-gold:       var(--e-global-color-secondary, #E29F33);
  --nap-brown-soft: var(--e-global-color-text, #714523);
  --nap-sand:       var(--e-global-color-sand, #F4D59C);
  --nap-cream:      var(--e-global-color-cream, #FFF8ED);
  --nap-white:      #FFFFFF;
  --nap-mist:       #D9D9D9;
  --nap-ink:        #0B0501;

  --nap-font-heading: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --nap-font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --nap-gutter: 12px;
  --ease-soft: cubic-bezier(.44, 0, .56, 1);
  --ease-hero: cubic-bezier(.12, .23, .5, 1);
}

@media (min-width: 768px) {
  :root {
    --nap-gutter: 24px;
  }
}

/* ===========================================================================
   Base — only what Elementor does not already set through the Kit.
   =========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nap-cream);
  color: var(--nap-brown-soft);
  font-family: var(--nap-font-body);
  font-size: 16px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

/* Visually hidden, still read by screen readers (menu item "(opens in a new
   tab)" hints, form labels kept for the placeholder-as-label fields). */
.screen-reader-text,
.nap-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text Editor paragraphs: no stray outer margins (Elementor leaves the
   browser default on the first/last paragraph). */
.elementor-widget-text-editor p:first-child {
  margin-top: 0;
}

.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.nap-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--nap-brown);
  color: var(--nap-sand);
  font: 700 14px/16px var(--nap-font-body);
  text-transform: uppercase;
  text-decoration: none;
}

.nap-skip-link:focus {
  top: 16px;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ===========================================================================
   Motion — handoff 03 / appendix A. Classes go on Elementor elements
   (Advanced > CSS Classes): nap-reveal (headings: word by word), nap-fade
   (eyebrows, text, images, cards), nap-load (run on page load — the hero),
   nap-d1…nap-d5 (100–500ms delay). .nap-js is only set on the front end
   (functions.php), so nothing hides in the Elementor editor.
   =========================================================================== */
.nap-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft);
  transition-delay: calc(var(--nap-i, 0) * 75ms + var(--nap-delay, 0ms));
}

.nap-in .nap-word {
  opacity: 1;
  transform: none;
}

.nap-js .nap-reveal:not(.nap-split) {
  visibility: hidden;
}

.nap-js .nap-fade {
  opacity: 0;
  transition: opacity 1s var(--ease-hero);
  transition-delay: var(--nap-delay, 0ms);
}

.nap-js .nap-fade.nap-in {
  opacity: 1;
}

.nap-d1 { --nap-delay: 100ms; }
.nap-d2 { --nap-delay: 200ms; }
.nap-d3 { --nap-delay: 300ms; }
.nap-d4 { --nap-delay: 400ms; }
.nap-d5 { --nap-delay: 500ms; }

.nap-failsafe .nap-reveal,
.nap-failsafe .nap-fade {
  visibility: visible !important;
  opacity: 1 !important;
}

.nap-failsafe .nap-word {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .nap-js .nap-reveal {
    visibility: visible !important;
  }

  .nap-word,
  .nap-js .nap-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===========================================================================
   Card rows — handoff 06 / appendix B. A native horizontal scroller: the
   first card on the content edge, the row runs off the right edge,
   scroll-snap, no JS. Used on Elementor containers (class nap-scroll-row,
   full width) and inside the Menu Cards widget.
   =========================================================================== */
.elementor .elementor-element.nap-scroll-row,
.nap-scroll-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-left: max(var(--nap-gutter), calc((100% - 1176px) / 2));
  padding-right: var(--nap-gutter);
  scroll-padding-left: max(var(--nap-gutter), calc((100% - 1176px) / 2));
}

.nap-scroll-row::-webkit-scrollbar {
  display: none;
}

.elementor .elementor-element.nap-scroll-row > *,
.nap-scroll-row > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.nap-scroll-row:focus-visible {
  outline: 2px solid var(--nap-brown);
  outline-offset: -2px;
}

/* ===========================================================================
   Home hero — handoff 02. Full screen; the Hero Slider widget fills it
   (plugin widgets.css), the copy sits above it.
   =========================================================================== */
.elementor .elementor-element.nap-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
}

.elementor .elementor-element.nap-hero > .e-con-inner > .elementor-element:not(.elementor-widget-aanp-hero-slider),
.elementor .elementor-element.nap-hero > .elementor-element:not(.elementor-widget-aanp-hero-slider) {
  position: relative;
  z-index: 1;
}

/* ===========================================================================
   Buttons & text links — handoff 04. Colours, border and padding come from
   the Elementor settings (build-lib aanp_button / aanp_text_link); this adds
   the 0.2s colour transition, the focus ring and the text-link underline.
   =========================================================================== */
.elementor .elementor-button {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor .elementor-button:focus-visible,
.elementor .elementor-menu-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.elementor-widget-button.nap-link .elementor-button:hover .elementor-button-text,
.elementor-widget-button.nap-link .elementor-button:focus-visible .elementor-button-text {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Elementor 4.3 prints the button (inline-block) straight inside the widget
   wrapper, which has the body line-height (28px): it sits on the baseline and
   adds ~6px around itself. The label keeps its own line-height. */
.elementor-widget-button.nap-link,
.elementor-widget-button.nap-btn {
  line-height: 0;
}

.elementor-widget-button.nap-link .elementor-button-icon svg {
  width: 8px;
  height: 12px;
}

/* External-link icon (Get Directions ↗): a 12px square. */
.elementor-widget-button.nap-link.nap-link--ext .elementor-button-icon svg {
  width: 12px;
  height: 12px;
}

/* Text links are drawn 16–24px tall: extend the hit area to 44px. */
.elementor-widget-button.nap-link .elementor-button {
  position: relative;
}

.elementor-widget-button.nap-link:not(.nap-header__membership) .elementor-button::after {
  content: "";
  position: absolute;
  inset: -10px 0;
}

/* ===========================================================================
   Header — handoff 01 (Theme Builder "Header Main", build-header-footer.php)
   =========================================================================== */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-bar .elementor-location-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .elementor-location-header {
    top: 46px;
  }
}

@media (max-width: 600px) {
  .admin-bar .elementor-location-header {
    top: 0;
  }
}

/* Pages with a full-screen hero: the header floats over the photo. */
body:has(.nap-hero) .elementor-location-header {
  position: fixed;
  left: 0;
  right: 0;
}

/* Equal side columns, so the nav sits on the page centre (Figma: 364px nav
   centred on 720 in the 1440 frame) — but never narrower than their content. */
.elementor .elementor-element.nap-header__side {
  flex: 1 1 0;
  min-width: max-content;
}

.nap-header .elementor-item,
.nap-header .elementor-button,
.nap-header .elementor-menu-toggle {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.nap-header__nav .elementor-nav-menu--main .elementor-item:hover,
.nap-header__nav .elementor-nav-menu--main .elementor-item:focus-visible,
.nap-header__nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
.nap-header__toggle .elementor-nav-menu--dropdown .elementor-item:hover,
.nap-header__toggle .elementor-nav-menu--dropdown .elementor-item:focus-visible,
.nap-header__toggle .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Membership is its own link beside Order Delivery on desktop. (Elementor's
   .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li is 0,2,1.) */
.nap-header__nav .elementor-nav-menu > li.nap-menu-external {
  display: none;
}

/* …and the item before it is then the last visible one: drop the half-gap
   Elementor leaves after every link but the last (keeps the nav centred). */
.nap-header__nav .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:has(+ li.nap-menu-external) > a {
  margin-inline-end: 0;
}

/* Same weight as the text-link chevron rule above, later in the file. */
.elementor-widget-button.nap-header__membership .elementor-button-icon svg {
  width: 12px;
  height: 12px;
}

/* ↗ cue on Membership in the menu panel (Font Awesome external-link-alt).
   Beats Pro's pointer reset .elementor-item:not(:hover)…:after {opacity:0}
   (0,5,1). */
.elementor-element.nap-header__toggle .elementor-nav-menu--dropdown li.nap-menu-external > a.elementor-item.elementor-item::after {
  content: "";
  position: static;
  opacity: 1;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M432 320h-32a16 16 0 0 0-16 16v112H64V128h144a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16H48a48 48 0 0 0-48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V336a16 16 0 0 0-16-16zM488 0H360c-21.4 0-32.1 25.9-17 41l35.7 35.7L135 320.4a24 24 0 0 0 0 34l22.7 22.6a24 24 0 0 0 34 0l243.6-243.7L471 169c15 15 41 4.5 41-17V24a24 24 0 0 0-24-24z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M432 320h-32a16 16 0 0 0-16 16v112H64V128h144a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16H48a48 48 0 0 0-48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V336a16 16 0 0 0-16-16zM488 0H360c-21.4 0-32.1 25.9-17 41l35.7 35.7L135 320.4a24 24 0 0 0 0 34l22.7 22.6a24 24 0 0 0 34 0l243.6-243.7L471 169c15 15 41 4.5 41-17V24a24 24 0 0 0-24-24z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Hamburger: 16px glyph in a 44px target (Figma: 32px frame, 12px from the
   edge — the extra 6px of the target hangs into the gutter). */
.nap-header__toggle .elementor-menu-toggle {
  padding: 14px;
  margin-right: -6px;
}

.nap-header__toggle .elementor-nav-menu--dropdown {
  box-shadow: 0 1px 0 var(--e-global-color-brown20, rgba(101, 43, 0, 0.2));
}

/* Over a hero: transparent, white text and outline, until 100px of scroll
   (napolino.js → body.nap-scrolled) or while the menu panel is open. */
body:has(.nap-hero):not(.nap-scrolled) .elementor-element.nap-header:not(:has(.elementor-menu-toggle.elementor-active)) {
  background-color: transparent;
}

body:has(.nap-hero):not(.nap-scrolled) .nap-header:not(:has(.elementor-menu-toggle.elementor-active)) .nap-header__nav .elementor-nav-menu--main .elementor-item,
body:has(.nap-hero):not(.nap-scrolled) .nap-header:not(:has(.elementor-menu-toggle.elementor-active)) .nap-header__membership .elementor-button,
body:has(.nap-hero):not(.nap-scrolled) .nap-header:not(:has(.elementor-menu-toggle.elementor-active)) .nap-header__toggle .elementor-menu-toggle {
  color: var(--e-global-color-white, #fff);
  fill: var(--e-global-color-white, #fff);
}

body:has(.nap-hero):not(.nap-scrolled) .nap-header:not(:has(.elementor-menu-toggle.elementor-active)) .nap-header__toggle .elementor-menu-toggle svg {
  fill: var(--e-global-color-white, #fff);
}

/* Order Delivery: Secondary · dark bg (white outline → white fill). */
body:has(.nap-hero):not(.nap-scrolled) .nap-header:not(:has(.elementor-menu-toggle.elementor-active)) .nap-header__order .elementor-button {
  color: var(--e-global-color-white, #fff);
  border-color: var(--e-global-color-white, #fff);
  background-color: transparent;
}

body:has(.nap-hero):not(.nap-scrolled) .nap-header:not(:has(.elementor-menu-toggle.elementor-active)) .nap-header__order .elementor-button:hover,
body:has(.nap-hero):not(.nap-scrolled) .nap-header:not(:has(.elementor-menu-toggle.elementor-active)) .nap-header__order .elementor-button:focus-visible {
  color: var(--e-global-color-brown, #652B00);
  border-color: var(--e-global-color-white, #fff);
  background-color: var(--e-global-color-white, #fff);
}

/* ===========================================================================
   Footer — handoff 18 (Theme Builder "Footer Main")
   =========================================================================== */
.nap-footer__menu .elementor-icon-list-item a:hover .elementor-icon-list-text,
.nap-footer__menu .elementor-icon-list-item a:focus-visible .elementor-icon-list-text,
.nap-footer__follow .elementor-icon-list-item a:hover .elementor-icon-list-text,
.nap-footer__follow .elementor-icon-list-item a:focus-visible .elementor-icon-list-text,
.nap-footer__legal-item a:hover,
.nap-footer__legal-item a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Links are drawn 16px apart from 16px text: 32px targets without moving
   the rhythm. */
.nap-footer__menu .elementor-icon-list-item a {
  padding-block: 8px;
  margin-block: -8px;
}

/* Social glyph (16px) centred in a 24px box, rows 24px tall, as in Figma. */
.nap-footer__follow .elementor-icon-list-icon {
  min-width: 24px;
  justify-content: center;
}

.nap-footer__follow .elementor-icon-list-item {
  min-height: 24px;
}

.nap-footer__legal-item a {
  color: inherit;
  text-decoration: none;
}

/* ===========================================================================
   Form fields — handoff 05: 56/40px tall underline fields, placeholder as
   the (visually hidden) label. .nap-form--light: on sand, brown 40% → 100%
   when focused or filled.
   =========================================================================== */
.nap-form .elementor-field-group .elementor-field {
  padding: 8px 8px 7px;
  min-height: 40px;
  box-shadow: none;
}

.nap-form .elementor-field-group textarea.elementor-field {
  height: 96px;
  min-height: 96px;
  resize: vertical;
}

.nap-form--light .elementor-field::placeholder {
  color: var(--e-global-color-brown40, rgba(101, 43, 0, 0.4));
  opacity: 1;
}

.nap-form .elementor-field:focus {
  outline: none;
}

body .elementor .elementor-element.nap-form--light .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper):is(:focus, :not(:placeholder-shown)) {
  border-color: var(--e-global-color-brown, #652B00);
}

.nap-form--light .elementor-field:focus-visible {
  box-shadow: 0 1px 0 0 var(--e-global-color-brown, #652B00);
}

/* ===========================================================================
   Form fields, dark variant — handoff 05 on the brown Contact panel:
   56px fields, white 60% line and placeholder → white when focused/filled.
   =========================================================================== */
.nap-form--dark .elementor-field-group .elementor-field {
  padding: 16px 8px 15px;
  min-height: 56px;
}

.nap-form--dark .elementor-field-group textarea.elementor-field {
  height: 96px;
  min-height: 96px;
}

.nap-form--dark .elementor-field::placeholder {
  color: var(--e-global-color-white60, rgba(255, 255, 255, 0.6));
  opacity: 1;
}

body .elementor .elementor-element.nap-form--dark .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper):is(:focus, :not(:placeholder-shown)) {
  border-color: var(--e-global-color-white, #fff);
}

.nap-form--dark .elementor-field:focus-visible {
  box-shadow: 0 1px 0 0 var(--e-global-color-white, #fff);
}

/* Pro's inline field errors and the form message, readable on brown. */
.nap-form--dark .elementor-message,
.nap-form--dark .elementor-message.elementor-message-danger,
.nap-form--dark .elementor-message.elementor-help-inline {
  color: var(--e-global-color-sand, #F4D59C);
}

.nap-form--dark .elementor-message.elementor-message-success {
  color: var(--e-global-color-white, #fff);
}

/* ===========================================================================
   Contact page — handoff 15 (build-contact.php). Follow us rows are drawn
   32px tall (24px icon in a 32px box), 4px apart.
   =========================================================================== */
.nap-contact-follow__list .elementor-icon-list-item {
  min-height: 32px;
}

.nap-contact-follow__list .elementor-icon-list-icon {
  justify-content: center;
  width: 32px;
}

/* Narrow phones: Email and WhatsApp Number stack, so their placeholders
   (the visible labels) are not cut off. */
@media (max-width: 400px) {
  .nap-form--dark .elementor-form-fields-wrapper .elementor-field-group.elementor-sm-50 {
    width: 100%;
  }
}

/* ===========================================================================
   Location page — handoff 13 (build-locations.php). Outlet anchors clear the
   sticky header; the Book a Table panel stays in view on tall desktop
   screens (handoff [PROPOSAL]).
   =========================================================================== */
.nap-outlet,
.nap-book-panel {
  scroll-margin-top: 179px;
}

@media (max-width: 1024px) {
  .nap-outlet,
  .nap-book-panel {
    scroll-margin-top: 120px;
  }
}

/* Elementor sets position on every container (.e-con), so this needs more
   weight — a lone `top` on a relative box would shift it down instead. */
@media (min-width: 1025px) and (min-height: 860px) {
  .elementor .e-con.nap-book-panel {
    position: sticky;
    top: 179px;
  }

  .admin-bar .elementor .e-con.nap-book-panel {
    top: 211px;
  }
}

/* ===========================================================================
   Our Story (handoff 16). The Table: text column | photos on desktop;
   ≤1024 the heading, then the photos, then the text (as drawn on mobile) —
   the copy column dissolves into the row so its parts can be reordered.
   In the News: the last article has no rule.
   =========================================================================== */
@media (max-width: 1024px) {
  .elementor .e-con.nap-story-table__copy {
    display: contents;
  }

  .elementor .e-con.nap-story-table__images {
    order: 1;
  }

  .elementor .e-con.nap-story-table__more {
    order: 2;
  }
}

.elementor .e-con.nap-press__item:last-child {
  --padding-bottom: 0px;
  padding-bottom: 0;
  border-bottom: 0;
}

/* ===========================================================================
   Fallback templates (404 / non-Elementor pages / header & footer before the
   Theme Builder templates exist)
   =========================================================================== */
.nap-site-header,
.nap-site-footer {
  width: min(1176px, 100% - 2 * var(--nap-gutter));
  margin-inline: auto;
  padding-block: 24px;
}

.nap-site-header a {
  color: var(--nap-brown);
  font: 700 14px/16px var(--nap-font-body);
  text-transform: uppercase;
  text-decoration: none;
}

.nap-site-footer {
  font-size: 14px;
  line-height: 16px;
}

.nap-fallback {
  width: min(776px, 100% - 2 * var(--nap-gutter));
  margin: 0 auto;
  padding-block: 80px;
}

.nap-fallback h1,
.nap-fallback h2 {
  margin: 0 0 32px;
  color: var(--nap-brown);
  font: 400 40px/40px var(--nap-font-heading);
  text-transform: uppercase;
}

.nap-fallback h2 {
  font-size: 24px;
  line-height: 24px;
}

.nap-fallback h2 a {
  color: inherit;
  text-decoration: none;
}

.nap-fallback__eyebrow {
  margin: 0 0 16px;
  color: var(--nap-gold);
  font: 700 12px/16px var(--nap-font-body);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nap-fallback__link {
  color: var(--nap-brown);
  font: 700 14px/16px var(--nap-font-body);
  text-transform: uppercase;
  text-decoration: none;
}

.nap-fallback__link:hover {
  text-decoration: underline;
}

.nap-fallback__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}