/* ===== Star Weigh — styles (updated) ===== */
/* Replace or merge with your existing assets/styles.css */

/* palette and base */
:root{
  --brand:#0f4c81;
  --accent:#f9b233;
  --muted:#667085;
  --surface:#ffffff;
  --radius:12px;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#f5f7fb;
  color:#0b1220;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}

/* container */
.container{max-width:1100px;margin:0 auto;padding:18px}

/* ===== header / nav ===== */
/* Make header always have the dark gradient so white nav text is readable */
header{
  background:linear-gradient(90deg,var(--brand),#093856);
  color:white;
  padding:14px 0;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

/* nav layout */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px;color:white}
.logo{width:44px;height:44px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#08303e;font-weight:800}
.subtitle{font-size:12px;color:rgba(255,255,255,0.95)}
.logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}


/* nav list and links — ensure consistent look across all pages */
nav ul{display:flex;gap:12px;list-style:none;margin:0;padding:0}
nav a{
  color:rgba(255,255,255,0.95);
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  font-weight:700;
  text-transform:uppercase;       /* make HOME ABOUT US PRODUCTS CONTACT */
  letter-spacing:0.6px;
  font-size:13px;
}
nav a:hover{background:rgba(255,255,255,0.06)}

/* mobile menu toggle */
.mobile-toggle{display:none;background:transparent;border:none;color:white;font-size:22px}

/* ===== hero / layout ===== */
/* keep hero responsive and readable */
.hero{display:flex;gap:20px;align-items:center;padding:28px 0;flex-direction:column}
.hero-left{width:100%}
.hero h1{margin:0;font-size:28px;color:var(--surface); /* ensure strong contrast when placed on dark media card */}
/* If hero-left appears on light background, fallback to dark text */
.hero-left .lead{color:#1a1a1a;margin:12px 0 0}
.hero h1,
.hero-left h1,
.hero-left .lead {
  color: #0b1220 !important;   /* strong dark color */
}
.hero-left p {
  color: #0b1220 !important;
}

/* call-to-action buttons */
.cta{margin-top:14px;display:flex;gap:10px}
.btn{
  background:var(--accent);
  border:none;
  padding:10px 16px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  color:#08303e;
  display:inline-block;
}
.btn.secondary{background:#ffffff;color:var(--brand);border:1px solid var(--brand)}

/* cards and surfaces */
.card{
  background:var(--surface);
  border-radius:14px;
  padding:14px;
  box-shadow:0 6px 18px rgba(12,24,60,0.06);
  overflow:hidden;
}

/* ===== products grid & images (fixed) ===== */
/* Grid layout for products */
.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:820px){.products-grid{grid-template-columns:repeat(3,1fr)}}

/* Product / media images: constrain size so they don't grow too large */
.product-card img,
.media-card img {
  width:100%;
  height:200px;          /* slightly taller for better visuals */
  max-height:220px;
  object-fit:cover;
  border-radius:10px;
  display:block;
}

/* product-card container tweaks */
.product-card{display:flex;flex-direction:column;gap:10px}
.product-card h3{margin:0;font-size:16px}
.product-card .meta{margin-top:auto}

/* modal image responsiveness */
.modal-content img,
#modalImage {
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:contain;
  border-radius:8px;
}

/* ===== typography / muted ===== */
.muted{color:var(--muted)}

/* two-column helper */
.two-col{display:grid;gap:18px}
@media(min-width:700px){.two-col{grid-template-columns:1fr 360px} .hero{flex-direction:row}}

/* footer row */
/* --- FOOTER: dark background + white bold text (recommended) --- */
footer {
  background: linear-gradient(90deg,#07263d,#0f4c81); /* dark blue gradient */
  color: #ffffff !important;
  padding: 20px 18px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

footer, 
footer .footer-row,
footer p,
footer a,
footer span {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px;
}

/* center & spacing */
footer .container { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }



/* whatsapp float */
.whatsapp-float{position:fixed;bottom:20px;right:20px;z-index:1100}

/* modal styling */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(6,12,24,0.55);padding:18px;z-index:1200}
.modal.open{display:flex}
.modal-content{width:100%;max-width:900px;background:white;border-radius:12px;padding:16px;box-shadow:0 10px 40px rgba(2,8,23,0.35);max-height:90vh;overflow:auto}

/* form grid helper used in some pages */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ===== CONTACT form: inputs + alignment (fixed) ===== */
/* ensure labels and controls are neat and full-width */
.card form{display:block}
.card label{display:block;font-weight:600;margin-top:8px;margin-bottom:6px}
.card input,
.card textarea,
.card select {
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #d6d9df;
  font-size:15px;
  background: #fff;
  box-shadow:none;
  outline:none;
  transition:box-shadow .12s, border-color .12s;
}
.card input:focus,
.card textarea:focus,
.card select:focus {
  border-color:var(--brand);
  box-shadow:0 4px 14px rgba(15,76,129,0.06);
}

/* single column on small screens for contact form */
@media(max-width:700px){
  .mobile-toggle{display:inline-flex}
  nav ul{display:none}
  nav ul.show{display:flex;flex-direction:column}
  .form-grid{grid-template-columns:1fr}
}

/* small utilities */
.hidden{display:none}
.center{text-align:center}
/* ===== Mobile sidebar (off-canvas) nav ===== */

/* overlay that darkens the page when menu is open */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,12,24,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
  z-index: 1198;
}

/* off-canvas sidebar */
.offcanvas-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 280px;                  /* sidebar width */
  max-width: 85vw;
  background: linear-gradient(180deg, #07263d, #0f4c81);
  transform: translateX(-100%);  /* hidden by default */
  transition: transform .28s cubic-bezier(.2,.9,.2,1);
  z-index: 1199;
  padding: 20px 16px;
  box-shadow: 8px 0 28px rgba(3,12,30,0.28);
}

/* container inside the sidebar (logo + links) */
.offcanvas-nav .brand { color: #fff; margin-bottom: 12px; }
.offcanvas-nav .logo img { width:40px; height:40px; object-fit:contain; border-radius:8px; }

/* vertical stacked menu */
.offcanvas-nav ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.offcanvas-nav a {
  color: #ffffff;
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
}

/* hover focus */
.offcanvas-nav a:hover,
.offcanvas-nav a:focus {
  background: rgba(255,255,255,0.06);
  outline: none;
}

/* Show the overlay and slide the sidebar in when body has .sidebar-open */
body.sidebar-open .nav-overlay {
  opacity: 1;
  visibility: visible;
}
body.sidebar-open .offcanvas-nav {
  transform: translateX(0);
}

/* Hide default horizontal nav on small screens and show mobile toggle */
@media (max-width: 820px) {
  nav ul { display:none !important; } /* hide old inline menu */
  .mobile-toggle { display:inline-flex !important; } 
  /* ensure header visuals remain */
  header { position:relative; z-index:1200; }
}

/* On larger screens, remove offcanvas display (no change) */
@media (min-width: 821px) {
  .nav-overlay, .offcanvas-nav { display: none; }
}
/* ===== Fix: show & style menu inside off-canvas sidebar ===== */

/* Ensure the cloned nav inside the offcanvas is visible and vertical */
.offcanvas-nav nav ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
}

/* Make each list item simply a block (removes inline layout) */
.offcanvas-nav nav li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Style the anchor links as large tappable buttons */
.offcanvas-nav nav a {
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #ffffff !important;            /* white on blue sidebar */
  background: transparent !important;   /* default transparent */
}

/* Hover / active state */
.offcanvas-nav nav a:hover,
.offcanvas-nav nav a:focus {
  background: rgba(255,255,255,0.08) !important;
  outline: none !important;
}

/* If your nav had small subtitle text, make sure it's visible */
.offcanvas-nav .subtitle { color: rgba(255,255,255,0.9) !important; }

/* Make sure the sidebar has some inner scroll if very tall */
.offcanvas-nav { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Ensure mobile default hide of global nav doesn't affect offcanvas clone */
/* (this is redundant but safe) */
@media (max-width: 820px) {
  .offcanvas-nav nav ul { display: flex !important; }
}
/* ===== Fix: ensure offcanvas sidebar and overlay sit above header ===== */

/* make sure header isn't above the sidebar */
header {
  z-index: 1200; /* keep header above normal page, but below sidebar */
  position: relative; /* ensure z-index applies */
}

/* overlay slightly below the sidebar but above header/content */
.nav-overlay {
  z-index: 1499 !important;
}

/* sidebar must be highest so it fully covers the header */
.offcanvas-nav {
  z-index: 1500 !important;
  position: fixed; /* ensure it sits above header */
}
/* ===== active/current menu item highlight ===== */
/* Desktop nav and mobile offcanvas both use .is-current */

nav a.is-current,
.offcanvas-nav nav a.is-current {
  background: rgba(255,255,255,0.08); /* subtle highlight on dark header */
  color: #ffffff !important;
  position: relative;
}

/* left accent bar for off-canvas (and desktop when desired) */
nav a.is-current::before,
.offcanvas-nav nav a.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 6px;
  background: var(--accent); /* uses your --accent color */
}

/* make sure the inline desktop nav highlight is subtle and readable on light backgrounds */
@media (min-width: 821px) {
  /* if header is dark, above works; if header is light, use a dark accent */
  header nav a.is-current {
    background: rgba(15,76,129,0.08);
    color: #07263d !important;
  }
  header nav a.is-current::before {
    background: var(--brand);
  }
}

/* small animation */
nav a.is-current,
.offcanvas-nav nav a.is-current {
  transition: background .18s ease, color .12s ease;
}

/* ensure focus states remain visible */
nav a:focus.is-current,
.offcanvas-nav nav a:focus.is-current {
  outline: 2px solid rgba(15,76,129,0.18);
  outline-offset: 2px;
}
/* don't show ugly focus styles on click/tap; keep for keyboard users */
nav a:focus,
.offcanvas-nav a:focus {
  outline: none;
  box-shadow: none;
}

/* show a subtle outline only for keyboard users */
nav a:focus-visible,
.offcanvas-nav a:focus-visible {
  outline: 3px solid rgba(15,76,129,0.18);
  outline-offset: 3px;
}

/* if you previously had a background applied to :focus, remove it */
nav a.is-current,
.offcanvas-nav nav a.is-current { /* keep current highlight style as you have it */ }

/* ensure offcanvas container can receive focus without visual change */
.offcanvas-nav[tabindex="-1"]:focus { outline: none; }
.site-footer {
  background: linear-gradient(180deg, rgba(4,40,65,0.95), rgba(7,86,125,0.95));
  color: rgba(255,255,255,0.92);
  padding: 44px 0 26px;
  font-family: inherit;
}

/* container inside footer uses same .container as site */
.site-footer .container { display: block; max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* Top row: three columns */
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 28px;
  align-items: start;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Brand column */
.footer-brand .brand-row { display:flex; gap:14px; align-items:center; }
.footer-logo img { width:48px; height:48px; object-fit:contain; border-radius:8px; background:rgba(255,255,255,0.02); padding:6px; }
.brand-text h3 { margin:0; font-size:20px; color:#ffda5b; } /* yellow-ish for brand title */
.brand-text .small-muted { margin:6px 0 0; color:rgba(255,255,255,0.85); font-size:14px; }

/* Quick links */
.footer-links h4,
.footer-office h4 { margin:0 0 10px; color:#f2c94c; font-size:16px; font-weight:800; }
.footer-links ul { list-style:none; padding:0; margin:6px 0 0; display:flex; flex-direction:column; gap:8px; }
.footer-links a { color:rgba(255,255,255,0.85); text-decoration:none; font-weight:600; }
.footer-links a:hover { text-decoration:underline; color:#fff; }

/* Office column */
.footer-office h5 { margin:0 0 8px; color:#ffd36a; font-size:15px; }
.footer-office address { font-style:normal; color:rgba(255,255,255,0.8); line-height:1.5; font-size:14px; }
.footer-office .phone { margin-top:10px; color:rgba(255,255,255,0.95); font-weight:700; }
.footer-office .phone a { color:inherit; text-decoration:none; }

/* Bottom row */
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:18px;
  gap:10px;
}
.footer-bottom .copyright { color:rgba(255,255,255,0.72); font-size:13px; }
.footer-bottom .socials { display:flex; gap:12px; align-items:center; }
.footer-bottom .social { color:#0b63a5; background: rgba(255,255,255,0.12); padding:6px 8px; border-radius:6px; text-decoration:none; font-weight:700; font-size:13px; }

/* small screens: stack columns vertically */
@media (max-width: 880px) {
  .footer-top { grid-template-columns: 1fr; gap:18px; padding-bottom:16px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:8px; padding-top:12px; }
  .footer-logo img { width:44px; height:44px; }
}

/* tiny screens: center bottom items */
@media (max-width: 420px) {
  .site-footer .container { padding: 0 12px; }
  .footer-bottom { align-items:center; text-align:center; }
  .footer-bottom .socials { justify-content:center; width:100%; }
}
/* ==========================================================================
   FIX: restore footer 3-column layout on desktop and keep stacked on mobile
   Paste this at the VERY END of assets/styles.css
   ========================================================================== */

/* Ensure footer container layout baseline */
.site-footer .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Desktop / tablet: force three columns */
@media (min-width: 881px) {
  .footer-top {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1.2fr !important;
    gap: 28px !important;
    align-items: start !important;
    padding-bottom: 26px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }

  .footer-bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 18px !important;
    gap: 10px !important;
  }

  /* Make sure each footer column is a block (not flex stack) */
  .footer-col {
    display: block !important;
  }

  /* Links list must be vertical in desktop footer */
  .footer-links ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 6px 0 0 !important;
  }

  /* Make social and copyright inline on desktop */
  .footer-bottom .copyright,
  .footer-bottom .socials {
    display: inline-block !important;
  }
}

/* Mobile: single-column stacking (keep this) */
@media (max-width: 880px) {
  .footer-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-bottom: 16px !important;
  }
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-top: 12px !important;
  }
  .footer-bottom .socials {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 12px;
  }
}

/* Ensure address and phone appear normally (not each char stacked) */
.address-line,
.footer-office address {
  display: block !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
}

/* Ensure footer logo keeps its size */
.footer-logo img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
}

/* Make sure offcanvas or other nav CSS don't unexpectedly affect footer */
.site-footer,
.site-footer * {
  box-sizing: border-box !important;
}

/* final safety: if something earlier set .site-footer .container display:flex, reset it */
.site-footer .container { display: block !important; }
/* FORCE FOOTER BACK TO 3 COLUMNS ON DESKTOP */
@media (min-width: 881px) {
  .footer-top {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1.2fr !important;
    gap: 28px !important;
    align-items: start !important;
  }
}
/* ---------- FORCE footer 3-column (append at VERY END) ---------- */
.site-footer .footer-top {
  /* if .container was on the same element, this will still win */
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1.2fr !important;
  gap: 28px !important;
  align-items: start !important;
  padding-bottom: 26px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

/* ensure each direct child behaves like a block column */
.site-footer .footer-top > * {
  display: block !important;
  min-width: 0 !important;    /* prevents flex-basis/overflow issues */
  width: auto !important;
}

/* preserve the mobile stacked behaviour */
@media (max-width: 880px) {
  .site-footer .footer-top {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-bottom: 16px !important;
  }
}
/* ===== Desktop nav current-item fix =====
   Makes the highlighted item readable on dark header
   Paste at the END of assets/styles.css
*/

@media (min-width: 821px) {
  /* make the active desktop nav item clearly visible */
  header nav a.is-current {
    background: rgba(255,255,255,0.08) !important; /* subtle light pill */
    color: #ffffff !important;                      /* white text for contrast */
    position: relative !important;
    padding-left: 14px !important;                  /* give room so left accent doesn't overlap text */
    padding-right: 14px !important;
  }

  /* left accent bar (keeps the yellow accent) */
  header nav a.is-current::before {
    content: "";
    position: absolute;
    left: 4px;              /* small inset so pill has margin on the left */
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 6px;
    background: var(--accent) !important;
  }

  /* ensure hover still works and doesn't hide the accent */
  header nav a.is-current:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
  }
}