/* style.css - WESTMED GLOBAL
   Responsive layout, hero video, nav dropdown, product tables
*/

/* Reset & root */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #0b5cff;
  --accent: #ffb800;
  --bg: #f7f8fb;
  --text: #0f1724;
  --muted: #6b7280;
  --card: #ffffff;
  --radius: 12px;
  --container: 1200px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue";
}

/* Layout */
.container { max-width: var(--container); margin: 0 auto; padding: 24px; }

/* Header */
.site-header { background: #fff; border-bottom: 1px solid #e6eef7; position: sticky; top: 0; z-index: 60; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.logo { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; }
.brand-text { font-weight: 700; font-size: 15px; letter-spacing: 0.3px; }

/* Nav */
.nav { display:flex; }
.nav-list { display:flex; gap: 10px; list-style:none; align-items:center; }
.nav-list a { text-decoration:none; color:var(--text); padding:10px 12px; border-radius:8px; display:inline-block; }
.nav-list a:hover { background: rgba(11,92,255,0.06); color:var(--primary); }
.nav-toggle { display:none; background:none; border:0; font-size:20px; cursor:pointer; }

/* Dropdown */
.has-dropdown { position:relative; }
.dropdown { position:absolute; left:0; top:100%; min-width:220px; background:var(--card); box-shadow: 0 12px 30px rgba(2,6,23,0.08); border-radius:10px; padding:10px; display:none; flex-direction:column; }
.has-dropdown:hover .dropdown { display:flex; }
.dropdown a { padding:8px 10px; color:var(--text); }

/* Hero */
.hero { position:relative; height:64vh; min-height:420px; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(2,6,23,0.32), rgba(2,6,23,0.6)); z-index:1; }
.hero-content { position:relative; z-index:2; max-width:900px; padding: 40px 24px; }
.hero h1 { font-size:36px; margin-bottom:12px; line-height:1.05; }
.lead { font-size:16px; color: rgba(255,255,255,0.92); margin-bottom:18px; }
.hero-cta .btn { margin-right: 10px; }

/* Intro */
.intro { background:var(--bg); border-radius:14px; margin-top:-36px; box-shadow:0 12px 40px rgba(10,20,30,0.05); padding:28px; display:flex; gap:20px; align-items:stretch; }
.intro-grid { display:flex; gap:24px; width:100%; }
.intro-text { flex:2; }
.intro-stats { flex:1; display:flex; gap:12px; justify-content:space-between; align-items:center; }
.stat h3 { color:var(--primary); font-size:28px; }
.bullets { margin:12px 0 16px 18px; color:var(--text); }

/* Product cards */
.product-cards { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:18px; }
.card { background:var(--card); border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(10,20,30,0.04); display:flex; flex-direction:column; }
.card img { width:100%; height:190px; object-fit:cover; }
.card-body { padding:16px; }

/* Countries */
.countries-grid { display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; }
.countries-grid figure { width:120px; text-align:center; }
.countries-grid img { width:100%; height:70px; object-fit:contain; }

/* product layout */
.product-section { padding:28px 0; }
.product-grid { display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start; }
.product-detail { display:flex; gap:12px; align-items:flex-start; }
.product-detail img { width:320px; height:200px; object-fit:cover; border-radius:8px; }

/* tables */
table { width:100%; border-collapse:collapse; border-radius:10px; overflow:hidden; box-shadow:0 8px 20px rgba(10,20,30,0.03); }
table thead { background:#f1f5f9; }
table th, table td { padding:12px 14px; text-align:left; border-bottom:1px solid #eef2f6; }

/* terms & grids */
.terms-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:12px; }

/* contact */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:18px; }
.contact-card { background:var(--card); padding:18px; border-radius:10px; box-shadow:0 10px 24px rgba(10,20,30,0.04); }
.contact-links a { display:block; color:var(--primary); text-decoration:none; margin-bottom:6px; }

/* forms */
input, select, textarea { width:100%; padding:10px 12px; border:1px solid #e6eef7; border-radius:8px; margin-top:8px; }
.form-row { display:flex; gap:12px; align-items:center; }

/* footer */
.site-footer { background:#031127; color:#fff; padding:28px 0; margin-top:28px; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }

/* small utilities */
.btn { display:inline-block; padding:10px 14px; border-radius:8px; text-decoration:none; border:2px solid transparent; cursor:pointer; }
.btn.small { padding:8px 10px; }
.btn.primary { background:var(--primary); color:#fff; }
.btn.ghost { background:transparent; border:2px solid rgba(255,255,255,0.14); color:#fff; }

/* responsive */
@media (max-width:1100px) {
  .product-cards { grid-template-columns: repeat(2,1fr); }
  .intro-grid { flex-direction:column; }
}

@media (max-width:760px) {
  .nav { display:none; flex-direction:column; }
  .nav.open { 
    display:flex; 
    position:absolute; 
    left:0; 
    right:0; 
    top:72px; 
    background:var(--card); 
    padding:12px; 
    box-shadow:0 12px 30px rgba(2,6,23,0.08); 
    z-index:100;
  }
  .nav-list { flex-direction:column; gap:6px; }
  .nav-toggle { display:block; background:none; border:0; font-size:22px; cursor:pointer; }
  .product-cards { grid-template-columns:1fr; }
  .product-grid { grid-template-columns:1fr; }
  .terms-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .hero { height:46vh; min-height:300px; }
  .hero h1 { font-size:24px; }
}

/* accessibility & small text */
.muted { color: var(--muted); }
.small { font-size: 13px; }
.responsive-hero { width:100%; height:100%; object-fit:cover; border-radius:10px; }