/* ================================================
   SITE.CSS — Samvad Teleprompters
   Scope: Header · Nav · Dropdown · Footer ONLY
   ================================================ */

/* ------------------------------------------------
   1. RESET & BASE
   ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    overflow-x: hidden;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;          /* restores original Bootstrap base — fixes "zoomed" feel */
    line-height: 1.42857143;
    color: #333;
}
/* Headings render REGULAR, not bold. The old site loaded only Open Sans 400;
   Bootstrap asked for 500, browsers fell back to 400. Replicate that here so
   nothing looks unnecessarily bold. */
h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; }
a { color: #337ab7; text-decoration: none; }
a:hover { color: #23527c; text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ------------------------------------------------
   2. LAYOUT UTILITIES
   ------------------------------------------------ */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.container-fluid { width: 100%; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; }
.col-sm-4  { width: 33.333%; }
.col-sm-6  { width: 50%; }
.col-sm-8  { width: 66.667%; }
.col-sm-12 { width: 100%; }
@media (min-width: 992px) {
    .col-md-2        { width: 16.667%; }
    .col-md-offset-1 { margin-left: 8.333%; }
}
.img-responsive { max-width: 100%; height: auto; }

/* ------------------------------------------------
   3. HEADER
   ------------------------------------------------ */
header { position: relative; z-index: 10; width: 100%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.navbar { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 clamp(20px, 4vw, 60px); height: 62px; }

/* ------------------------------------------------
   4. LOGO
   ------------------------------------------------ */
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 52px; width: auto; }

/* ------------------------------------------------
   5. NAVIGATION — Desktop
   ------------------------------------------------ */
.nav-collapse { display: flex; align-items: center; }
.nav-collapse > ul { display: flex; list-style: none; }
.nav-collapse li { position: relative; }
.nav-collapse a { display: block; padding: 0.75em 1.2em; font-size: 14px; font-weight: 400; color: #23527c; transition: color 0.2s; }
.nav-collapse a:hover, .nav-collapse .active a { color: #b93331; }

/* ------------------------------------------------
   6. HAMBURGER — mobile only
   ------------------------------------------------ */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: #23527c; border-radius: 2px; transition: all 0.3s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------
   7. MOBILE NAV
   ------------------------------------------------ */
@media (max-width: 767px) {
    .nav-toggle { display: flex; }
    .nav-collapse { display: none; position: absolute; top: 62px; left: 0; right: 0; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 100; padding: 10px 0; }
    .nav-collapse.open { display: block; }
    .nav-collapse > ul { flex-direction: column; }
    .nav-collapse li { width: 100%; border-bottom: 1px solid #f0f0f0; }
    .nav-collapse a { padding: 12px 20px; font-size: 14px; }

    /* Kill all desktop dropdown panels on mobile — accordion handles navigation */
    .drop, .drop2, .drop3, .drop4 { display: none !important; }
}

/* ------------------------------------------------
   8. MEGA DROPDOWN — hidden by default
   ------------------------------------------------ */
.drop, .drop2, .drop3, .drop4 { display: none; }

/* --- Main container --- */
.drop {
    background-color: white;
    position: absolute;
    left: 0; right: 0;
    z-index: 200;
    width: 95%;
    max-width: 1300px;
    margin: 0 auto;
    border-top: 15px solid white;
    border-bottom: 15px solid white;
    border-left: 0;
    border-right: 0;
}

/* --- Override global col widths inside dropdown --- */
.drop .col-sm-4,
.drop .col-sm-6,
.drop .col-sm-8 { width: auto; padding: 0; }

/* --- Outer row: Broadcast (1/3) + Right column (2/3) --- */
.drop > .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}
.drop > .row > .col-sm-4.first { flex: 0 0 33.333%; }
.drop > .row > .col-sm-8       { flex: 0 0 66.667%; display: flex; flex-direction: column; }

/* --- Shared text --- */
.drop h4 {
    color: #1a1a1a; font-family: 'Open Sans', sans-serif;
    text-align: center; margin: 0; padding: 15px 10px; font-size: 18px;
}
.drop p {
    color: #1a1a1a; font-family: 'Open Sans', sans-serif;
    text-align: center; font-size: 13px; margin-top: 4px;
}
.drop a { display: block; text-align: center; }
.drop .com_prod a { font-size: 14px; text-decoration: underline; color: #005ab9; display: inline; }

/* --- Shared image sizing: FIXED box so every tile is equal height regardless
       of the product render's natural aspect ratio (fixes uneven/big tiles).
       Box is generous so simple line-art icons read at a good size. --- */
.drop .content img,
.drop .second_con img,
.drop .tablet img,
.drop .third_con img {
    width: 100%; max-width: 150px; height: 130px;
    object-fit: contain;
    margin: 0 auto; display: block;
}

/* --- BROADCAST (left column, 4 products in 2×2) --- */
.drop .first {
    background-color: #99b4c7;
    border-right: 5px solid white;
    padding: 0 10px;
    position: relative;
    display: block;
}
/* GRID ALIGNMENT — why these rows are absolutely positioned:
   The right column is two stacked bands (Stage/Tablet on top, Content Creators
   below). This left panel is a 2x2 grid. To make all icons line up across both
   columns — as if drawn on one shared invisible grid — the two product rows here
   are pinned to the SAME horizontal lines the right column's rows sit on.
   Each icon+label block is 177px tall; its center must land at 165px (top band)
   and 395px (bottom band) panel-relative, so the row tops are 77px and 307px.
   NOTE: these numbers are tied to the fixed panel height (496) and image box
   (130). If either changes, re-derive: rowTop = bandCenter - (blockHeight / 2). */
.drop .first > .row:nth-child(1) {   /* heading — normal flow at top */
    padding-top: 8px;
}
.drop .first > .row:nth-child(2) {   /* products row 1 — pinned to top band */
    position: absolute; left: 10px; right: 10px; top: 77px;
    display: flex; justify-content: space-evenly;
}
.drop .first > .row:nth-child(3) {   /* products row 2 — pinned to bottom band */
    position: absolute; left: 10px; right: 10px; top: 307px;
    display: flex; justify-content: space-evenly;
}
.drop .first > .row {
    display: flex; flex-wrap: nowrap;
    justify-content: space-evenly;
}
.drop .first .col-sm-6 {
    flex: 1 1 50%; text-align: center; padding: 4px;
}
.drop .first .content {
    padding: 10px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.drop .first .content p { margin-top: 8px; position: static; left: auto; }
.drop .first h4 { padding: 10px 10px 5px; }

/* --- Stage + Tablet row --- */
.drop .col-sm-8 > .row:first-child {
    display: flex; flex-wrap: nowrap; align-items: stretch;
    flex: 0 0 auto;
}

/* --- STAGE (2 products side by side) --- */
.drop .second {
    flex: 1 1 66.667%;
    background-color: #bfbfbf;
    padding: 12px 10px;
    display: flex; flex-direction: column; align-items: center;
}
.drop .second h4 { padding: 10px 10px 5px; }
.drop .second > .row {
    display: flex; flex-wrap: nowrap;
    justify-content: space-evenly;
    width: 100%; flex: 1;
    align-items: center;
}
.drop .second_con {
    flex: 1; text-align: center; padding: 10px;
    display: flex; flex-direction: column; align-items: center;
}
.drop .second_con p { margin-top: 8px; position: static; left: auto; top: auto; }

/* --- TABLET (1 product, centered) --- */
.drop .tablet {
    flex: 1 1 33.333%;
    background-color: #535f80;
    border-left: 5px solid white;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 15px 10px; text-align: center;
}
.drop .tablet h4 { color: #1a1a1a; padding: 10px 10px 5px; }
.drop .tablet img { margin: 10px auto; }
.drop .tablet p { margin-top: 8px; position: static; left: auto; top: auto; }

/* --- CONTENT CREATORS (3 products, full width of right column) --- */
.drop .third {
    background-color: #6b7a8f;
    border-top: 5px solid white;
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: flex-start;
    padding: 12px 10px;
    flex: 1 1 auto;
}
.drop .third h4 { width: 100%; color: #1a1a1a; padding: 10px 10px 5px; }
.drop .third .col-sm-4 {
    flex: 1 1 0; min-width: 0;
    text-align: center; padding: 10px;
    display: flex; flex-direction: column; align-items: center;
}
.drop .third_con p { margin-top: 8px; position: static; left: auto; top: auto; }

/* --- Software / Accessories / Support dropdowns --- */
.drop2, .drop3, .drop4 {
    background-color: rgb(240, 249, 255); opacity: 0.9; color: #23527c;
    text-align: center; font-family: 'Open Sans', sans-serif;
    position: absolute; left: 0; right: 0; z-index: 200; margin: 0 auto;
}
.drop2 ul, .drop3 ul, .drop4 ul { list-style: none; }
.drop2 ul li, .drop3 ul li, .drop4 ul li { display: inline-block; padding: 20px 50px; font-size: 17px; }
.drop2 li a, .drop3 li a, .drop4 li a { text-decoration: none; }

/* ------------------------------------------------
   9. DROPDOWN — RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 768px) {
    .drop { width: 100%; top: 60px; padding: 0; border: 0; }
    .drop > .row { flex-wrap: wrap; }
    .drop > .row > .col-sm-4.first { flex: 0 0 100%; }
    .drop > .row > .col-sm-8       { flex: 0 0 100%; }
    .drop img { display: none; }
    .drop p { text-align: center; }
    .drop h4 { font-size: 14px; padding: 10px 5px; }
    .drop .first { border-right: 0; border-bottom: 1px solid #ddd; padding: 10px 0; }
    .drop .col-sm-8 > .row:first-child { flex-wrap: wrap; }
    .drop .second { flex: 0 0 100%; padding: 10px 0; border-bottom: 1px solid #ddd; }
    .drop .tablet { flex: 0 0 100%; border-left: 0; border-bottom: 1px solid #ddd; padding: 10px 0; }
    .drop .third { border-top: 0; padding: 10px 0; }
    .drop .first .content { padding: 5px 10px; }
    .drop2 ul li, .drop3 ul li, .drop4 ul li { display: block; padding: 8px 0; font-size: 12px; }
}
@media (min-width: 768px) and (max-width: 1000px) {
    .drop { width: 98%; }
    .drop h4 { font-size: 15px; }
    .drop .content img, .drop .second_con img, .drop .tablet img, .drop .third_con img { max-width: 80px; }
    .drop2 ul li, .drop3 ul li, .drop4 ul li { padding: 15px 30px; font-size: 14px; }
}
@media (min-width: 1000px) and (max-width: 1200px) {
    .drop2 ul li, .drop3 ul li, .drop4 ul li { padding: 18px 40px; font-size: 15px; }
}

/* ------------------------------------------------
   10. FOOTER
   ------------------------------------------------ */
.footer { background-color: #023047; margin-top: 100px; overflow-x: hidden; padding: 0; }
#footer .sitemap { display: none !important; }
#footer > .row { display: flex; flex-wrap: nowrap; align-items: stretch; }
#footer > .row > div:nth-child(2) { flex: 0 0 66.667%; max-width: 66.667%; padding-top: 35px; padding-bottom: 35px; }
#footer > .row > div:nth-child(3) { flex: 0 0 33.333%; max-width: 33.333%; padding-top: 35px; padding-bottom: 35px; }
#footer > .row > div:nth-child(2) > .row { display: flex; flex-wrap: nowrap; align-items: flex-start; }
#footer .links { flex: 0 0 41.667%; max-width: 41.667%; padding-left: 40px; }
#footer .about { flex: 0 0 58.333%; max-width: 58.333%; padding-right: 30px; color: white; text-align: justify; font-family: 'Open Sans', sans-serif; font-size: 14px; }
/* One heading style for ALL five footer columns (was: h3 20px + inline-styled
   <li>s at 18px/14px — three different sizes for the same kind of heading). */
#footer h3 { font-size: 18px; font-weight: 600; font-family: 'Open Sans', sans-serif; color: #f89f3f; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; padding-top: 10px; }
#footer .contact h3:not(:first-child) { margin-top: 25px; }
#footer .links ul { list-style: none; padding: 0; margin-top: 15px; }
#footer .links li { margin-bottom: 6px; }
#footer .links li a { color: #7ec8e3; font-size: 14px; }
#footer .links li a:hover { color: #f89f3f; }
#footer .contact { color: white; padding-left: 20px; padding-top: 35px; padding-bottom: 35px; }
#footer .contact ul { list-style: none; padding: 0; margin-bottom: 25px; }
#footer .contact li { color: white; font-size: 14px; line-height: 1.9; }
#footer .contact a { color: #7ec8e3; }
#footer .contact a:hover { color: #f89f3f; }

/* ------------------------------------------------
   11. FOOTER — RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 768px) {
    #footer > .row { flex-wrap: wrap !important; }
    #footer > .row > div:nth-child(2), #footer > .row > div:nth-child(3) { flex: 0 0 100% !important; max-width: 100% !important; padding: 20px 15px; }
    #footer > .row > div:nth-child(2) > .row { flex-wrap: wrap; }
    #footer .links, #footer .about { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 0; padding-right: 0; padding-top: 15px; }
    #footer .contact { padding-left: 0; padding-top: 0; }
    #footer h3 { font-size: 16px; }          /* headings step down together */
}
@media (max-width: 480px) {
    #footer h3 { font-size: 14px; }
    #footer .about, #footer .links li a, #footer .contact li { font-size: 13px; }
}

/* ------------------------------------------------
   12. MOBILE ACCORDION SUB-MENU
   ------------------------------------------------ */
.mobile-sub { display: none; list-style: none; padding: 0; margin: 0; }
@media (max-width: 767px) {
    .has-sub > a::after { content: ' \25BE'; font-size: 11px; }
    .has-sub.open > a::after { content: ' \25B4'; }
    .has-sub.open > .mobile-sub { display: block; background: #f7f9fb; border-top: 1px solid #e0e0e0; }
    .mobile-sub li { width: 100%; border-bottom: 1px solid #eee; }
    .mobile-sub li a { display: block; padding: 10px 35px; font-size: 13px; color: #444; font-weight: normal; letter-spacing: 0; }
    .mobile-sub li a:hover { color: #b93331; }
}

/* ------------------------------------------------
   FONTS — Self-hosted Open Sans
   ------------------------------------------------ */
@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap; src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap; src: url('../fonts/open-sans-v44-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-display: swap; src: url('../fonts/open-sans-v44-latin-700.woff2') format('woff2'); }