/*
 * Site chrome styles that lived OUTSIDE style.css on the WordPress site:
 *  1. Customizer "Additional CSS" (mega menu, chevron, footer-bottom row)
 *  2. The inline icon helper CSS printed by inc-qsc-icons.php
 *  3. Small additions for the static build (logo image sizing, mobile nav)
 */

/* ===== 1. Customizer additional CSS (verbatim) ===== */
/* ===== MEGA MENU (Calculators) — fixed & centered ===== */
.site-nav .has-mega{ position:relative; }

/* bridge the gap so hover doesn't drop when moving down to the panel */
.site-nav .has-mega::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:20px;
}

.site-nav .nav-mega{
  position:fixed; top:72px; left:50%; transform:translateX(-50%);
  width:min(1100px, 94vw); max-width:94vw;
  display:none;
  background:#fff; border:1px solid #e6ecf5; border-top:3px solid #E8561A;
  border-radius:12px;
  box-shadow:0 16px 40px rgba(13,43,94,.16);
  padding:24px 28px;
  grid-template-columns:repeat(3,1fr);
  gap:4px 28px;
  z-index:1000;
}
.site-nav .has-mega:hover > .nav-mega,
.site-nav .has-mega:focus-within > .nav-mega{ display:grid; }

.site-nav .nav-mega .mega-col{ display:flex; flex-direction:column; }
.site-nav .nav-mega .mega-head{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:#0D2B5E; margin:6px 0 8px; padding-bottom:7px;
  border-bottom:1px solid #ECECEC; text-decoration:none;
}
.site-nav .nav-mega .mega-head:hover{ color:#1B4FA8; }
.site-nav .nav-mega .mega-col a:not(.mega-head){
  font-size:13px; color:#3a3a38; text-decoration:none; padding:5px 0; line-height:1.3;
}
.site-nav .nav-mega .mega-col a:not(.mega-head):hover{ color:#1B4FA8; }
.site-nav .nav-mega .mega-foot{
  grid-column:1 / -1; margin-top:10px; padding-top:12px;
  border-top:1px solid #EEE; text-align:right;
}
.site-nav .nav-mega .mega-foot a{ font-size:13px; font-weight:700; color:#E8561A; text-decoration:none; }
.site-nav .nav-mega .mega-foot a:hover{ text-decoration:underline; }

/* mobile: stack inside the mobile menu, expand on tap */
@media(max-width:782px){
  .site-nav .has-mega::after{ display:none; }
  .site-nav .nav-mega{
    position:static; top:auto; left:auto; transform:none;
    width:auto; max-width:none; grid-template-columns:1fr; gap:0;
    box-shadow:none; border:none; padding:4px 0 4px 14px; display:none;
  }
  .site-nav .has-mega:hover > .nav-mega{ display:none; }
  .site-nav .has-mega.open > .nav-mega{ display:block; }
}


/* Chevron arrow — bigger + navy, flips on open */
.site-nav .arrow{
  font-size:0; line-height:0;
  width:10px; height:10px; display:inline-block; position:relative; top:-2px;
  border-right:2.5px solid #0D2B5E;
  border-bottom:2.5px solid #0D2B5E;
  transform:rotate(45deg);
  transition:transform .25s ease, border-color .25s ease;
}
.site-nav .nav-item:hover .arrow{
  transform:rotate(-135deg); top:2px;
  border-color:#E8561A;            /* turns orange when open */
}


/* force the whole footer-bottom row onto one aligned line */
.site-footer .footer-bottom{
    display:flex !important;
    flex-wrap:wrap;
    align-items:center !important;   /* vertically centers all 3 items */
    justify-content:space-between;
    gap:6px 18px;
}
.site-footer .footer-bottom > p{
    margin:0 !important;             /* kills the default <p> margin that drops the line */
}

/* the credit */
.site-footer .footer-bottom .qbc-credit{
    font-size:13px;
    color:rgba(255,255,255,0.5);
}
.site-footer .footer-bottom .qbc-credit a{
    color:#E8561A;                   /* theme button/accent color */
    font-weight:700;
    font-style:italic;              /* italic "WP Developer Hub" */
    text-decoration:none;
}
.site-footer .footer-bottom .qbc-credit a:hover{
    text-decoration:underline;
}


/* brighten the copyright + center line to match the credit */
.site-footer .footer-bottom > p{
    color:rgba(255,255,255,0.85) !important;   /* brighter than the dull default */
    font-size:13px;
}
.site-footer .footer-bottom > p a{
    color:#E8561A;             /* theme button/accent color (QSCivilCalc, Sitemap, Privacy) */
    font-weight:700;
    text-decoration:none;
}
.site-footer .footer-bottom > p a:hover{
    text-decoration:underline;
}

/* ===== 2. Icon helper CSS (verbatim) ===== */
.qsc-ibox{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;flex-shrink:0}.calc-icon .qsc-ibox,.sgl-ico .qsc-ibox{width:100%;height:100%;border-radius:inherit;background:transparent!important}.qsc-inline{display:inline-flex;align-items:center;gap:8px}.section-tag svg,.hero-badge svg,.btn svg,.calc-link svg{vertical-align:-0.18em}

/* ===== 3. Static-build additions ===== */
.site-logo img{height:62px;width:auto;max-width:300px;display:block}
.footer-logo-img{height:56px;width:auto;margin-bottom:6px}
@media(max-width:768px){
  .site-logo img{height:44px}
  .site-nav.mobile-open{max-height:calc(100vh - 68px);overflow-y:auto}
  .site-nav.mobile-open .nav-item{width:100%}
  .site-nav.mobile-open .nav-link{width:100%;justify-content:space-between}
}

/* Elementor boxed-container equivalent for pages ported from HTML widgets */
/* One box for every ported page: 1100px wide, 20px side padding (the width the
   Calculators directory and Unit Converter already used). */
.qsc-page{max-width:1100px;margin:0 auto;padding:24px 20px 0}
/* pages that carried their own 1100px wrapper: let the outer box do the job */
.qsc-page .qbc-uc,.qsc-page .qbc-calc-page>.wrap,.qsc-page .qbc-cv{max-width:none;padding-left:0;padding-right:0}
@media(max-width:768px){.qsc-page{padding:16px 16px 0}}

/* Emoji → SVG icons (build-time transform). Size follows the surrounding font-size. */
.qsc-ei{display:inline-block;vertical-align:-0.15em;color:#1B4FA8;flex-shrink:0}
h1 .qsc-ei,h2 .qsc-ei,h3 .qsc-ei,h4 .qsc-ei{vertical-align:-0.12em}
/* white on dark surfaces */
.hero .qsc-ei,.hero-tag .qsc-ei,.calc-head .qsc-ei,.calc-head-icon .qsc-ei,.card-head-icon .qsc-ei,.card-icon-wrap .qsc-ei,.srv-icon .qsc-ei,
.mission-quote .qsc-ei,.cta .qsc-ei,.cta-banner .qsc-ei,.formula-section .qsc-ei,.formula-note .qsc-ei,.btn-primary .qsc-ei,.btn-accent .qsc-ei,.submit-btn .qsc-ei,.calc-btn .qsc-ei,
.sgl-page .qsc-ei,.hero-section .qsc-ei,.site-footer .qsc-ei,[class*="dark"] .qsc-ei,.price-table th .qsc-ei,.ref-table th .qsc-ei{color:currentColor}
/* accent contexts keep their own colour */
.callout-warn .qsc-ei,.warn .qsc-ei,.alert-err .qsc-ei,.alert-warning .qsc-ei,.callout.warn .qsc-ei,.badge .qsc-ei,.chip .qsc-ei,.res-badge .qsc-ei,.alert-success .qsc-ei,.alert-ok .qsc-ei{color:currentColor}
.qsc-flag{display:inline-block;vertical-align:-0.15em;border-radius:2px;width:1.25em;height:auto}

/* Wide data tables scroll inside their own box on phones instead of pushing the page sideways */
@media(max-width:640px){
  .qsc-page table,.sgl-page table,.art-body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .qsc-page table thead,.qsc-page table tbody{display:table;width:100%;min-width:max-content}
}

/* Accessibility: contrast + link affordance */
.section-desc{color:#5C5C58}
.qsc-page .hint,.qsc-page .form-hint,.qsc-page .note,.qsc-page .form-note,.qsc-page .method-sub,.qsc-page .price-note{color:#6C6C68}
.qsc-flagbar .fb-title b,.sf-badge{color:#fff}
.qsc-page p a,.feature-item p a,.footer-desc a,.art-body p a,.qsc-page li a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.qsc-page .btn,.qsc-page a.calc-card,.qsc-page a.related-card,.qsc-page .chip{text-decoration:none}
.footer-col .footer-heading{color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:0 0 16px;font-family:var(--font-heading)}

/* When the dark reviews band is the last thing on a page, remove the footer's top gap */
main:has(> .qsc-reviews:last-child) + .site-footer{margin-top:0}