/*
Theme Name: Review Sync Test
Author: Brodevious
Description: Minimal classic WordPress starter theme.
Version: 0.1.0
Text Domain: review-sync-test
*/

:root { color-scheme: light; font-family: system-ui, sans-serif; line-height: 1.6; color: #202124; background: #fff; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overflow-wrap: anywhere; }
a { color: #174ea6; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .15em; }
:focus-visible { outline: 3px solid #174ea6; outline-offset: 4px; }
.container { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.site-header, .site-footer { padding-block: 1.5rem; background: #f3f4f6; }
.site-title { font-size: 1.5rem; font-weight: 700; }
.menu, .menu .sub-menu { list-style: none; padding: 0; }
.menu { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.menu a { display: inline-block; padding-block: .25rem; }
.menu .sub-menu { margin-inline-start: 1rem; }
main { min-height: 50vh; padding-block: 2rem; }
article + article { margin-block-start: 2rem; border-top: 1px solid #ccc; padding-block-start: 2rem; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
figure { margin-inline: 0; }
pre { overflow-x: auto; }
table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
th, td { padding: .5rem; border: 1px solid #ccc; }
input, button, select, textarea { font: inherit; max-width: 100%; }
.screen-reader-text, .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus, .skip-link:focus { width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; padding: .75rem 1rem; background: #fff; z-index: 1000; top: 1rem; left: 1rem; }
@media (max-width: 40rem) { .menu { flex-direction: column; gap: .25rem; } }

.image-slider-section { margin-block: 2rem; }
.image-slider__slide { margin: 0 0 1.5rem; }
.image-slider__image { display: block; max-width: 100%; height: auto; }
.image-slider figcaption { padding-block: .5rem; }
.image-slider .slick-slide { margin-bottom: 0; }
.image-slider__controls { display: flex; flex-direction: row; gap: .75rem; margin-block: 1rem; }
.image-slider__previous, .image-slider__next { padding: .5rem 1rem; margin: 0; border: 1px solid #666; background: #fff; color: #202124; cursor: pointer; }
.image-slider__controls button:focus-visible { outline: 3px solid #174ea6; outline-offset: 4px; }
.image-slider__controls button[disabled], .image-slider__controls .slick-disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .image-slider *, .image-slider *::before, .image-slider *::after { transition: none !important; animation: none !important; } }

/* Reusable popup entrance; mobile navigation owns its own transition. */
dialog[open]:not(.mobile-menu-panel),
dialog[open]:not(.mobile-menu-panel)::backdrop {
  animation: brodevious-popup-fade-in 300ms ease-out both;
}
@keyframes brodevious-popup-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  dialog[open]:not(.mobile-menu-panel),
  dialog[open]:not(.mobile-menu-panel)::backdrop { animation: none; }
}

/* Global content boundary. Section backgrounds may extend beyond it. */
:root { --content-max-width: 1240px; --content-gutter: 100px; }
@media (max-width: 1200px) { :root { --content-gutter: 40px; } }
@media (max-width: 1000px) { :root { --content-gutter: 24px; } }
.container, .content-container {
  width: min(calc(100% - var(--content-gutter) * 2), var(--content-max-width));
  margin-inline: auto;
}