/* Meortech shared site styles (loaded on every page after the compiled Tailwind CSS). */

/* ---------- Self-hosted fonts (replaces Google Fonts; no third-party requests) ---------- */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/space-grotesk-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/inter-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* Material Symbols — subset to only the icons the site uses (~8KB instead of ~4MB).
   To add a new icon, re-run the subset step described in README.md. */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 200 400;
  font-display: block;
  src: url("../fonts/material-symbols-outlined-subset.woff2") format("woff2");
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'wght' 400;
}

/* ---------- Base (shared by every page; page <style> blocks may refine it) ---------- */
body { background-color: #131313; color: #e5e2e1; -webkit-font-smoothing: antialiased; }
::selection { background: #00e5ff; color: #00363d; }
nav { transition: background-color 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease; background: transparent; }
nav.scrolled { background: rgba(19, 19, 19, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding-top: 0.75rem; padding-bottom: 0.75rem; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 10000;
  background: #00e5ff; color: #00363d; padding: .75rem 1.25rem;
  font: 700 12px/1 Inter, sans-serif; letter-spacing: .15em; text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid #00e5ff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .hero-reveal { opacity: 1 !important; transform: none !important; }
}

/* Fixed-background parallax is janky/broken on phones & tablets (iOS ignores it). */
@media (hover: none), (max-width: 767px) {
  .parallax-bg, .cta-section, #vision, [style*="background-attachment: fixed"] { background-attachment: scroll !important; }
}

/* ---------- Mobile menu ---------- */
body.menu-open { overflow: hidden; }
.mobile-menu { opacity: 0; transition: opacity .25s ease; }
.mobile-menu.is-open { opacity: 1; }

/* ---------- Forms ---------- */
.form-error { color: #ffb4ab; font-family: "IBM Plex Mono", monospace; font-size: 12px; line-height: 1.4; letter-spacing: .05em; margin-top: .375rem; }
[aria-invalid="true"] { border-color: #ffb4ab !important; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: 1rem 1.25rem; border-left: 3px solid; font-size: 14px; line-height: 1.5; }
.form-status[data-state="success"] { border-color: #00e5ff; background: rgba(0, 229, 255, .08); color: #e5e2e1; }
.form-status[data-state="error"] { border-color: #ffb4ab; background: rgba(255, 180, 171, .08); color: #ffdad6; }
.file-name { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #9cf0ff; word-break: break-all; }

/* ---------- Cookie banner ---------- */
#cookie-banner { opacity: 1; }
#cookie-banner[hidden] { display: none; }

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
  /* keep hero content clear of the fixed nav when it is taller than the screen */
  #main > section:first-child, #main > header:first-child { padding-top: 7rem !important; padding-bottom: 4rem !important; }
}
@media (max-width: 639px) {
  /* big display headlines: scale with the viewport so long words never overflow at 320px */
  #main > section:first-child h1, #main > header:first-child h1 { font-size: clamp(2.25rem, 11.5vw, 3.75rem) !important; line-height: 1.1 !important; }
}