/* Global site styles */
:root {
  --brand-bg-grad: linear-gradient(120deg, #081421, #1a5ccc);
  --brand-accent: #e11d48;
  --muted: #6b7280;
}

/* Base */
html, body {
  margin: 0;
  padding: 0;
}
/* Ensure padding/borders are included in element width calculations to prevent overflow */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; height: auto; }

/* Layout helpers */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.content { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.hero { position: relative; padding: 72px 0; }
.hero.brand { color: #fff; background: linear-gradient(120deg, rgba(10,26,42,0.85), rgba(31,111,235,0.55)); }
.lead { font-size: 1.1rem; color: #374151; }

/* Grids */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

/* Cards */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.03); padding: 1rem; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
.card figure, .card article { margin: 0; }
/* Allow card content to scroll horizontally on small screens if needed (e.g., tables) */

/* Buttons/links */
.cta { display: inline-block; padding: .5rem .75rem; border-radius: 6px; background: var(--brand-accent); color: #fff; text-decoration: none; font-weight: 600; border: 0; cursor: pointer; }
.cta.secondary { background: #111827; color: #fff; }
.link-plain { color: inherit; text-decoration: none; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; }
.row.row-wrap { flex-wrap: wrap; }
/* Allow flex items to shrink properly and not overflow horizontally */
.row > * { min-width: 0; }
.row > div { flex: 1 1 240px; min-width: 220px; }

/* Header (nav) */
.site-header { position: sticky; top: 0; z-index: 1000; background: rgba(8,20,33,0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.site-header .bar { display: flex; align-items: center; gap: .5rem; min-height: 80px; }
.site-header a { color: #fff; text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand img { height: 90px; }
nav.primary { margin-left: auto; display: flex; flex-wrap: wrap; gap: .25rem; }
nav.primary a { padding: .5rem .75rem; border-radius: 999px; color: #fff; }
nav.primary a:hover { background: rgba(255,255,255,0.1); }
nav.primary .pill { border: 1px solid rgba(255,255,255,0.25); }
nav.primary .divider { display:inline-block; width:1px; height:24px; background: rgba(255,255,255,0.25); margin: 0 .25rem; vertical-align: middle; }

/* Footer */
.site-footer { margin-top: 2.5rem; padding: 2rem 0 1.25rem; background: var(--brand-bg-grad); color: #fff; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; align-items: start; }
.footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem 1.25rem; }
.footer-nav a { color: inherit; text-decoration: none; opacity: .9; }
.footer-nav a:hover { text-decoration: underline; opacity: 1; }
.footer-note { margin-top: 1rem; border-top: 1px solid rgba(255,255,255,0.2); padding-top: .75rem; opacity: .8; font-size: .85rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; }

/* Nav toggle (mobile) */
.nav-toggle { display:none; margin-left:auto; background: transparent; border: 1px solid rgba(255,255,255,0.25); color:#fff; border-radius:8px; padding:6px 10px; line-height:1; }
.nav-toggle:hover { background: rgba(255,255,255,0.1); }
.nav-toggle:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Focus states */
a:focus-visible, button:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }
.site-header a:focus-visible, .site-header button:focus-visible { outline-color: #fff; }

/* Mobile nav behavior */
@media (max-width: 900px) {
  nav.primary { display: none; position: absolute; top: 80px; left: 0; right: 0; background: rgba(8,20,33,0.98); padding: .5rem; border-bottom: 1px solid rgba(255,255,255,0.08); z-index: 999; flex-direction: column; gap: .25rem; }
  nav.primary.is-open { display: flex; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  nav.primary a { padding: .75rem 1rem; border-radius: 8px; }
  nav.primary a:hover { background: rgba(255,255,255,0.08); }
}

/* Futuristic UI/UX enhancements */
html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Card interactions */
.card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,.08); border-color: #d1d5db; }

/* CTA buttons */
.cta { box-shadow: 0 6px 18px rgba(225, 29, 72, .35); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(225, 29, 72, .45); }
.cta.secondary { box-shadow: 0 6px 18px rgba(17, 24, 39, .25); }

/* Hero brand section */
.hero.brand { background: var(--brand-bg-grad); position: relative; overflow: hidden; }
.hero.brand::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 600px at -10% -20%, rgba(255,255,255,.08), transparent 50%), radial-gradient(1000px 600px at 110% 10%, rgba(255,255,255,.06), transparent 50%); pointer-events: none; }

/* Utility */
.shadow-lg { box-shadow: 0 20px 40px rgba(0,0,0,.12); }
.rounded { border-radius: 12px; }

/* Link subtle underline on hover */
nav.primary a, .footer-nav a { position: relative; }
nav.primary a::after, .footer-nav a::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .4rem; height: 2px; background: currentColor; opacity: 0; transform: scaleX(.2); transform-origin: left; transition: transform .2s ease, opacity .2s ease; }
nav.primary a:hover::after, .footer-nav a:hover::after { opacity: .8; transform: scaleX(1); }

/* Images */
img { border-radius: 6px; }
.card .imgWrap img { border-radius: 0; }

/* Footer polish */
.site-footer { background: linear-gradient(160deg, rgba(8,20,33,1), rgba(26,92,204,0.85)); }
.footer-note { letter-spacing: .2px; }


/* Primary nav dropdowns */
nav.primary details { position: relative; }
nav.primary summary { list-style: none; padding: .5rem .75rem; border-radius: 999px; color: #fff; display: inline-flex; align-items: center; cursor: pointer; }
nav.primary summary::-webkit-details-marker { display: none; }
nav.primary details:hover > summary { background: rgba(255,255,255,0.1); }
nav.primary summary::after { content: "▾"; margin-left: .35rem; font-size: .8em; opacity: .8; }
nav.primary .submenu { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: rgba(8,20,33,0.98); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; min-width: 220px; padding: .25rem; box-shadow: 0 12px 24px rgba(0,0,0,0.25); }
nav.primary details[open] > .submenu { display: block; }
nav.primary .submenu a { display: block; padding: .5rem .75rem; border-radius: 8px; color: #fff; }
nav.primary .submenu a:hover { background: rgba(255,255,255,0.08); }

/* Mobile dropdown adjustments */
@media (max-width: 900px) {
  nav.primary details { width: 100%; }
  nav.primary summary { width: 100%; border-radius: 8px; }
  nav.primary .submenu { position: static; border: 0; background: transparent; box-shadow: none; padding: 0; }
  nav.primary .submenu a { padding: .5rem .75rem; }
}

/* Forms and utilities for app UIs */
.muted { color: var(--muted); }
.form-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.03); overflow: hidden; }
.form-row { margin-bottom: .9rem; }
.form-row label { display:block; font-weight:600; margin: .25rem 0; }
.form-row input,
.form-row select,
.form-row textarea { width: 100%; padding: .55rem .65rem; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; max-width: 100%; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
.form-actions { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }

/* Alerts */
.alert { border-radius: 8px; padding: .6rem .8rem; margin: .75rem 0; border: 1px solid #e5e7eb; }
.alert.success { color: #065f46; background: #d1fae5; border-color: #a7f3d0; }
.alert.error { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.alert.info { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }
.error { color: #b91c1c; font-size: .92rem; }

/* Secondary button */
.button { display:inline-block; padding:.45rem .7rem; border-radius:6px; border:1px solid #d1d5db; background:#fff; color:#111; text-decoration:none; cursor:pointer; }
.button:hover { background:#f9fafb; }

/* Tables */
.table-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding: .5rem; overflow:auto; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid #f3f4f6; }
.table th { font-weight:700; }

/* Small helpers */
.badge { display:inline-block; border:1px solid #e5e7eb; border-radius:999px; padding:.1rem .5rem; font-size:.85rem; color:#374151; }
.qty { display:inline-flex; align-items:center; gap:.25rem; }
.qty button { width:28px; height:28px; border:1px solid #d1d5db; background:#fff; border-radius:6px; cursor:pointer; }
.qty input[type="number"] { width: 80px; text-align: center; }

/* Global form control base (covers forms not using .form-row) */
form label { display:block; font-weight:600; margin:.25rem 0; }
form input,
form select,
form textarea { width:100%; padding:.55rem .65rem; border:1px solid #d1d5db; border-radius:8px; font:inherit; }
form input:focus,
form select:focus,
form textarea:focus { outline:2px solid #2563eb; outline-offset:1px; border-color:#2563eb; }


/* Sticky footer layout: make main fill remaining viewport height so footer stays at the bottom on short pages */
main { flex: 1 0 auto; }


/* Image hover pop and lightbox */
/* Subtle hover zoom for images inside common wrappers */
.imgWrap, .imgTile, .imgPop { position: relative; overflow: hidden; }
.imgWrap img, .imgTile img, .imgPop img, main img.is-enlargeable { transition: transform .35s ease, filter .35s ease; transform-origin: center center; }
.imgWrap:hover img, .imgTile:hover img, .imgPop:hover img, main img.is-enlargeable:hover { transform: scale(1.06); }

/* Show zoom-in cursor only on images we mark as enlargeable */
main img.is-enlargeable { cursor: zoom-in; }

/* Lightbox overlay styles */
.image-lightbox-overlay { position: fixed; inset: 0; background: rgba(2,6,23,0.88); display: none; align-items: center; justify-content: center; padding: 1.25rem; z-index: 2000; }
.image-lightbox-overlay.is-open { display: flex; }
.image-lightbox-overlay .image-lightbox-content { max-width: 96vw; max-height: 90vh; text-align: center; color: #e5e7eb; }
.image-lightbox-overlay img { max-width: 96vw; max-height: 84vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 18px 48px rgba(0,0,0,.5); }
.image-lightbox-overlay .image-lightbox-caption { margin-top: .5rem; font-size: .95rem; }
.image-lightbox-overlay .image-lightbox-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(15,23,42,.6); color: #fff; cursor: pointer; font-size: 24px; line-height: 1; display: grid; place-items: center; }
.image-lightbox-overlay .image-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.image-lightbox-overlay { cursor: zoom-out; }


/* Clickable card links — make full card act as a link */
.cardLink { display: block; text-decoration: none; color: inherit; }
/* Stronger focus outline for keyboard users on card links */
.cardLink:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }


/* Icon links (mobile-friendly) */
.with-icon { display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle; }
.with-icon .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.site-header .with-icon { color: #fff; text-decoration: none; }
.site-header .with-icon .icon { stroke: currentColor; }

/* Improve touch targets on small screens */
@media (max-width: 900px) {
  .nav-toggle { width: 44px; height: 44px; }
  nav.primary a.with-icon,
  nav.primary summary.with-icon { min-height: 44px; }
}