/* WordPress glue for the Monza design system (app.css). Keep rules minimal:
   unlayered CSS outranks the layered Tailwind utilities in app.css. */

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

/* Header state */
.monza-header.is-solid { border-bottom-color: var(--border); background: color-mix(in oklab, var(--background) 95%, transparent); backdrop-filter: blur(12px); }
.monza-drawer.is-open { max-height: 85vh; opacity: 1; }
.monza-menu, .monza-mobile-menu, .monza-menu ul, .monza-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.monza-menu { display: flex; align-items: center; gap: 1.25rem; }
@media (min-width: 1536px) { .monza-menu { gap: 1.75rem; } }
.monza-menu > li { position: relative; }
.monza-menu .is-current, .monza-menu .current-menu-item > a { color: var(--foreground); }
.monza-menu .sub-menu { position: absolute; left: -1rem; top: 100%; min-width: 15rem; padding: .75rem 1rem; background: var(--background); border: 1px solid var(--border); display: none; }
.monza-menu li:hover > .sub-menu, .monza-menu li:focus-within > .sub-menu { display: block; }
.monza-menu .sub-menu a { display: block; padding: .5rem 0; }
.monza-mobile-menu .sub-menu a { padding-left: 1rem; font-size: 1rem; }

/* Blocks: let the design classes on each block do the work */
@layer base {
  .wp-block-group, .wp-block-heading, figure.wp-block-image, .wp-block-details { margin: 0; }
  figure.wp-block-image { overflow: hidden; }
  figure.wp-block-image > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
}
.wp-block-buttons.contents { display: contents; }
.wp-block-button { position: relative; cursor: pointer; }
.wp-block-button__link { color: inherit; text-decoration: none; background: none; padding: 0; border: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.wp-block-button__link::after { content: ""; position: absolute; inset: 0; }
.monza-card-link { position: relative; }
.monza-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.monza-list { list-style: none; }

/* FAQ (core Details block) */
.wp-block-details.monza-faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1rem; color: var(--foreground); }
@media (min-width: 640px) { .wp-block-details.monza-faq > summary { font-size: 1.125rem; } }
.wp-block-details.monza-faq > summary::-webkit-details-marker { display: none; }
.wp-block-details.monza-faq > summary::after { content: "+"; color: var(--primary); font-size: 1.5rem; line-height: 1; transition: transform .3s; }
.wp-block-details.monza-faq[open] > summary::after { transform: rotate(45deg); }
.wp-block-details.monza-faq > p { max-width: 48rem; padding-bottom: 1.75rem; font-size: .875rem; line-height: 1.625; color: var(--muted-foreground); }

/* Forms */
.monza-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.monza-choice { cursor: pointer; }
.monza-choice:has(input:checked) { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--foreground); }
.monza-choice:has(input:focus-visible) { outline: 2px solid var(--ring); }
.monza-form [hidden], .monza-sent[hidden], .monza-form[hidden] { display: none !important; }
.monza-form .is-invalid { border-color: var(--primary); }
.monza-form button[disabled] { opacity: .5; pointer-events: none; }

/* Before / after compare */
.monza-compare [aria-hidden="true"] { pointer-events: none; }
.monza-compare > div:first-child { touch-action: pan-y; }

/* Plain text pages + blog */
.monza-prose { color: color-mix(in oklab, var(--foreground) 85%, transparent); line-height: 1.75; }
.monza-prose > * + * { margin-top: 1.25em; }
.monza-prose h2, .monza-prose h3 { font-family: var(--font-display); text-transform: uppercase; color: var(--foreground); margin-top: 2em; }
.monza-prose h2 { font-size: 1.75rem; } .monza-prose h3 { font-size: 1.25rem; }
.monza-prose a { color: var(--primary); text-decoration: underline; }
.monza-prose ul { list-style: disc; padding-left: 1.25rem; } .monza-prose ol { list-style: decimal; padding-left: 1.25rem; }
.monza-prose img { height: auto; }
.monza-pagination .nav-links { display: flex; gap: .5rem; }
.monza-pagination .page-numbers { border: 1px solid var(--border); padding: .5rem .9rem; }
.monza-pagination .current { background: var(--primary); color: var(--primary-foreground); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }