/* Byblos Built — shared site styles.
   Page layout and colours live inline in each page (kept exactly as designed);
   this file adds the behaviour states and the phone/tablet adjustments. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; overflow-x: hidden; }
img, video { max-width: 100%; }
a, h1, h2, h3, p { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #111111; outline-offset: 3px; }
.site-menu :focus-visible, footer :focus-visible, header :focus-visible { outline-color: #FFFFFF; }

/* Menu */
body.menu-is-open { overflow: hidden; }
.chev { transition: transform 0.2s ease; }
[data-projects-toggle][aria-expanded="true"] .chev { transform: rotate(180deg); }
.site-menu a:hover, .site-menu button:hover { opacity: 0.75; }

/* Projects slideshows */
.slideshow img[data-slide-img] { transition: opacity 0.25s ease; }
.slideshow button:hover { opacity: 0.65; }

/* Contact form */
.enquiry-form input, .enquiry-form textarea { width: 100%; border-radius: 0; }
.enquiry-form button[disabled] { opacity: 0.6; cursor: progress; }
.form-status { margin: 0; font-size: 15px; line-height: 1.6; min-height: 1px; }
.form-status.is-success { color: #1B5E20; font-weight: 600; }
.form-status.is-error { color: #B00020; font-weight: 600; }

/* Tablet */
@media (max-width: 960px) {
  .hero-inner { height: 600px !important; }
  .tile-media { height: 380px !important; }
  .svc-media { height: 340px !important; }
  .about-media { height: 420px !important; }
}

/* Phone */
@media (max-width: 640px) {
  .hero-inner { height: 78vh !important; min-height: 460px; }
  .tile-media { height: 300px !important; }
  .svc-media { height: 240px !important; flex-basis: 100% !important; }
  .about-media { height: 280px !important; border-width: 6px !important; }
  #approach > div, #contact { padding-top: 72px !important; padding-bottom: 72px !important; }
  #contact { gap: 40px !important; }
  .enquiry-form { padding: 24px !important; }
  .slideshow > div[style*="position: absolute"] { padding: 4px 6px 2px !important; }
  .slideshow [data-slide-count] { font-size: 10px !important; }
  .slideshow button { height: 40px !important; padding: 0 10px !important; font-size: 11px !important; }
  #about { padding-top: 56px !important; padding-bottom: 56px !important; gap: 32px !important; }
  section > div[style*="gap: 96px"], section[style*="gap: 96px"] { gap: 64px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}