/* ==========================================================================
   Prontox — Miami Pizzeria theme (retro diner, light)
   ========================================================================== */

body {
  min-height: 100vh;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: var(--wp--preset--color--surface);
  background-image: url("../images/diner-texture.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

a {
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.08em;
}

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

.wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wp-site-blocks > main {
  flex: 1;
}

.wp-block-site-title a {
  color: inherit;
  text-decoration: none;
}

.wp-block-template-part[area="header"] {
  position: relative;
  z-index: 20;
}

.wp-block-navigation a {
  text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--preset--spacing--lg);
}

/* ==========================================================================
   Brand helpers
   ========================================================================== */

/* Pacifico script accent (e.g. the "Miami" wordmark). Deliberately without
   !important: the class only outranks the theme.json element defaults, so any
   font picked in the editor (preset class or inline style) still wins. */
.font-script {
  font-family: var(--wp--preset--font-family--pacifico);
  font-weight: 400;
  line-height: 1.1;
}

/* Anton display */
.font-display {
  font-family: var(--wp--preset--font-family--anton);
  letter-spacing: 0.005em;
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Diner "eyebrow" label above section titles */
.eyebrow {
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--wp--preset--font-size--label-lg);
  color: var(--wp--preset--color--primary-container);
}

/* Mustard "sale/offer" badge */
.diner-badge {
  display: inline-block;
  background: var(--wp--preset--color--secondary-container);
  color: var(--wp--preset--color--on-secondary-container);
  font-family: var(--wp--preset--font-family--anton);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  border: 2px solid var(--wp--preset--color--on-surface);
  transform: rotate(-3deg);
}

/* ==========================================================================
   Hero / panels
   ========================================================================== */

.prontox-hero {
  min-height: clamp(440px, 60vh, 720px);
}

.prontox-hero .wp-block-cover__inner-container {
  width: min(100%, var(--wp--style--global--wide-size));
}

.prontox-panel {
  border: 1px solid var(--wp--preset--color--outline);
  border-radius: 1rem;
  background: var(--wp--preset--color--surface-container);
}

.prontox-meta-row {
  color: var(--wp--preset--color--on-surface-variant);
  font-size: var(--wp--preset--font-size--label-lg);
}

.wp-block-post-featured-image img,
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
  border-radius: 0.75rem;
}

.wp-block-post-template,
.wc-block-product-template {
  row-gap: var(--wp--preset--spacing--lg);
}

.wp-block-post-template .wp-block-post,
.wc-block-product-template .wp-block-post {
  min-width: 0;
}

/* ==========================================================================
   Forms (light retro)
   ========================================================================== */
.wp-block-search__input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce input.input-text,
.woocommerce textarea,
.wc-block-components-text-input__input,
.wc-block-components-combobox__input,
.wc-block-components-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  background-color: var(--wp--preset--color--surface-container) !important;
  border: 1.5px solid var(--wp--preset--color--outline) !important;
  border-radius: 0.6rem !important;
  min-height: 48px;
  padding: 0.75rem 1.1rem !important;
  color: var(--wp--preset--color--on-surface) !important;
  transition: all 0.25s ease;
}

.wp-block-search__input:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.wc-block-components-text-input__input:focus,
.wc-block-components-combobox__input:focus,
.wc-block-components-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent) !important;
}

.wp-block-search__input::placeholder,
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder,
.wc-block-components-text-input__input::placeholder,
.wc-block-components-textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--wp--preset--color--on-surface-variant) 70%, transparent) !important;
}

/* ==========================================================================
   WooCommerce buttons & surfaces
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--on-primary-container);
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--outfit);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.75rem 1.6rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--on-primary);
  transform: translateY(-1px);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--wp--preset--color--primary-container);
}

.wp-block-search__button,
.woocommerce table.shop_table,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout-review-order {
  border-radius: 0.75rem;
}

/* Outline / secondary button style (theme.json core/button.variations.outline).
   No !important so editor color choices on individual buttons take effect. */
.wp-element-button.is-style-outline,
.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--primary);
  border: 2px solid var(--wp--preset--color--primary);
  transition: background 0.18s ease, color 0.18s ease;
}

.wp-element-button.is-style-outline:hover,
.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--on-primary);
}

.woocommerce-store-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 0.6rem;
}

.wp-block-woocommerce-product-price,
.wc-block-components-product-price {
  font-weight: 700;
  color: var(--wp--preset--color--primary-container);
}

.wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-components-product-button__button {
  width: 100%;
}

.prontox-food-menu-card {
  height: 100%;
}

@media (max-width: 720px) {
  .prontox-hero {
    min-height: 400px;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: flex-start;
  }
}

/* ==========================================================================
   Animation, layout & visual polish
   ========================================================================== */

/* Scroll-triggered reveal animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Entrance Animations */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.7s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Staggered Children Delays */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }

/* Interactive Hover Transitions */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(36, 28, 22, 0.12);
}

.hover-glow {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.hover-glow:hover {
  border-color: var(--wp--preset--color--primary) !important;
  box-shadow: 0 0 25px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}

/* Continuous ambient floating motion */
.float-subtle {
  animation: floatSubtle 4s ease-in-out infinite;
}

@keyframes floatSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Equal height column cards wrapper */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}

.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.equal-cards .cta-bottom {
  margin-top: auto !important;
}

/* Reset FSE Footer Top Margin */
.wp-site-blocks > footer {
  margin-block-start: 0 !important;
}

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Disable hiding animations in Gutenberg Editor so patterns are visible while editing */
.editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .fade-in,
.editor-styles-wrapper .stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  visibility: visible !important;
}

/* ==========================================================================
   Prontox plugin surfaces — flatten for the light retro theme
   (override leftover dark-theme rgba boxes/shadows from prontox-core CSS)
   ========================================================================== */

/* Product add-on group cards: clean light card, no heavy shadow */
.product-addon {
  background: var(--wp--preset--color--surface-container) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid var(--wp--preset--color--outline) !important;
  box-shadow: none !important;
}

/* Add-on option pills */
.product-addon p.form-row.form-row-wide label {
  background: var(--wp--preset--color--surface) !important;
  border-color: var(--wp--preset--color--outline) !important;
  box-shadow: none !important;
  color: var(--wp--preset--color--on-surface) !important;
}
.product-addon p.form-row.form-row-wide label:has(input:checked) {
  background: color-mix(in srgb, var(--wp--preset--color--primary-container) 12%, transparent) !important;
  border-color: var(--wp--preset--color--primary-container) !important;
  box-shadow: none !important;
}

/* Variation selector: drop the grey box + shadow entirely */
.variations_form .variations {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Size/label swatch pills: visible on cream, no shadow */
.prontox-wcs-swatches .swatch,
.prontox-wcs-swatches .swatch-label {
  background: var(--wp--preset--color--surface-container) !important;
  border-color: var(--wp--preset--color--outline) !important;
  box-shadow: none !important;
  color: var(--wp--preset--color--on-surface) !important;
}
.prontox-wcs-swatches .swatch.selected,
.prontox-wcs-swatches .swatch-label.selected {
  background: color-mix(in srgb, var(--wp--preset--color--primary-container) 12%, transparent) !important;
  border-color: var(--wp--preset--color--primary-container) !important;
  color: var(--wp--preset--color--primary-container) !important;
  box-shadow: none !important;
}

/* Add-ons total / price summary: no dark box, just a clean divider */
#product-addons-total {
  background: transparent !important;
  border: none !important;
  border-top: 2px dashed var(--wp--preset--color--outline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   Restaurant-style product rows (image left, text + price + button right)
   ========================================================================== */
.menu-row {
  display: flex;
  gap: var(--wp--preset--spacing--md);
  align-items: stretch;
  height: 100%;
  background: var(--wp--preset--color--surface-container);
  border: 1.5px solid var(--wp--preset--color--outline);
  border-radius: 1rem;
  padding: var(--wp--preset--spacing--sm);
  box-shadow: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.menu-row:hover {
  border-color: var(--wp--preset--color--primary-container);
  transform: translateY(-2px);
}
.menu-row .menu-row__img {
  flex: 0 0 132px;
  width: 132px;
  margin: 0;
  display: block;
}
.menu-row .menu-row__img a {
  display: block;
  width: 100%;
  height: 100%;
}
.menu-row .menu-row__img img {
  width: 100%;
  height: 100%;
  min-height: 132px;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
}
.menu-row .menu-row__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  text-align: left;
}
.menu-row .menu-row__body .wp-block-post-title,
.menu-row .menu-row__body .wp-block-woocommerce-product-price {
  text-align: left;
}
.menu-row .menu-row__body .wp-block-woocommerce-product-button {
  margin-top: auto;
}
.menu-row .menu-row__body .wp-block-woocommerce-product-button .wp-block-button__link,
.menu-row .menu-row__body .wc-block-components-product-button__button {
  width: auto;
  align-self: flex-start;
}
@media (max-width: 520px) {
  .menu-row { flex-direction: column; }
  .menu-row .menu-row__img { flex-basis: auto; width: 100%; }
  .menu-row .menu-row__img img { height: 180px; min-height: 0; }
}