/*
Theme Name: Brocom IT Services
Theme URI: https://www.brocom.nl/
Author: Brocom
Description: Zakelijk WordPress-thema voor consultancy, hardware en licenties.
Version: 1.0.17
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: brocom
*/
:root{--navy:#071b33;--blue:#1479d1;--ink:#122033;--muted:#617084;--line:#dce5ee;--soft:#f4f8fb}
*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;color:var(--ink);line-height:1.65}a{color:var(--blue);text-decoration:none}.container{width:min(1180px,calc(100% - 40px));margin:auto}
.topbar{background:#041425;color:#d8e8f7;padding:8px 0;font-size:13px}.topbar .container{display:flex;justify-content:space-between}.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}.navrow{min-height:86px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;flex:0 0 auto}.brand img{display:block;width:auto;height:68px;max-width:300px;object-fit:contain}.main-nav{margin-left:auto}.main-nav ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}.main-nav li{list-style:none;margin:0;padding:0}.main-nav a{display:block;padding:12px 10px;font-weight:700;color:var(--navy);white-space:nowrap;border-radius:7px;transition:.2s ease}.main-nav a:hover,.main-nav a:focus,.main-nav .current-menu-item>a{color:var(--blue);background:#eef7ff}.btn{display:inline-block;padding:11px 18px;border-radius:9px;font-weight:800}.btn-primary{background:var(--blue);color:#fff}.btn-outline{border:1px solid #8fb3d2;color:#fff}.menu-toggle{display:none}
.hero{background:linear-gradient(120deg,#06172b,#0a3158 70%,#0e5685);color:#fff;padding:90px 0}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}.eyebrow{text-transform:uppercase;letter-spacing:2px;color:#71c7ef;font-size:13px;font-weight:900}.hero h1{font-size:clamp(42px,5vw,68px);line-height:1.04;letter-spacing:-2px;margin:12px 0 20px}.hero p{font-size:19px;color:#d7e7f4}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.tech{padding:28px;border:1px solid #ffffff25;background:#ffffff0e;border-radius:20px}.tech div{padding:14px 0;border-top:1px solid #ffffff22}.section{padding:76px 0}.soft{background:var(--soft)}.section h2{font-size:38px;color:var(--navy);margin:8px 0 12px}.lead{max-width:720px;color:var(--muted);font-size:17px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:35px}.card{padding:30px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 5px 20px #071b330a}.card h3{font-size:23px;color:var(--navy)}.icon{font-size:28px}.split{display:grid;grid-template-columns:1fr 1fr;gap:50px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.check{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;font-weight:700}.cta{background:var(--navy);color:#fff;border-radius:22px;padding:42px;display:flex;justify-content:space-between;align-items:center;gap:20px}.page-hero{background:var(--navy);color:#fff;padding:55px 0}.page-hero h1{font-size:44px;margin:5px 0}.content{padding:55px 0;max-width:900px}.site-footer{background:#041425;color:#bdd0e1;padding:50px 0 25px;margin-top:60px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}.site-footer h3{color:#fff}.site-footer a{color:#d9e8f4}.footer-bottom{border-top:1px solid #18344d;margin-top:30px;padding-top:20px;font-size:13px}
@media(max-width:1050px){.brand img{height:58px;max-width:245px}.main-nav a{padding:10px 6px;font-size:14px}.navrow{gap:14px}}
@media(max-width:850px){.brand img{height:50px;max-width:230px}.hero-grid,.cards,.split,.footer-grid{grid-template-columns:1fr}.tech{display:none}.menu-toggle{display:block;margin-left:auto;background:var(--navy);color:#fff;border:0;border-radius:8px;padding:10px 13px}.main-nav{display:none;position:absolute;top:78px;left:20px;right:20px;background:#fff;padding:16px;box-shadow:0 15px 35px #0002;border-radius:12px}.main-nav.open{display:block}.main-nav ul{display:flex;align-items:stretch;flex-direction:column;gap:2px}.main-nav a{padding:12px}.navrow>.btn{display:none}.checks{grid-template-columns:1fr}.cta{align-items:flex-start;flex-direction:column}}

/* Brocom 1.0.3 refinements */
.navrow{height:76px;gap:24px}
.brand-logo img,.custom-logo{max-height:58px;width:auto}
.site-header .btn-primary{padding:10px 17px}
.hero .container{width:min(1180px,calc(100% - 64px));margin-left:auto;margin-right:auto}
@media (min-width:1200px){
  .hero{padding:82px 0}
}
@media (max-width:850px){
  .hero .container{width:min(100% - 32px,1180px)}
  .brand-logo img,.custom-logo{max-height:48px}
  .navrow{height:70px}
}

/* Brocom 1.0.4 */
.brand-logo{display:flex;align-items:center;flex:0 0 auto}
.brand-logo img,.custom-logo{max-height:66px;width:auto}
.main-nav{margin-left:18px}
.site-header .btn-primary{white-space:nowrap;padding:10px 16px}
.hero-specialisms{margin-top:18px;color:#8ed8ff;font-size:13px;font-weight:800;letter-spacing:.5px}
.services-4{grid-template-columns:repeat(4,1fr)}
.service-link{display:inline-block;margin-top:10px;font-weight:800}
.m365-band{background:#071b33;color:#fff}
.m365-band h2{color:#fff}
.m365-band .lead{color:#d4e4f2}
.m365-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.m365-points{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m365-point{padding:16px;border:1px solid #ffffff26;background:#ffffff0b;border-radius:12px}
.tech-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:28px}
.tech-item{border:1px solid var(--line);border-radius:12px;padding:17px;text-align:center;font-weight:800;background:#fff;color:var(--navy)}
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;align-items:start}
.why-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.why-item{padding:20px;background:#fff;border:1px solid var(--line);border-radius:14px}
.why-item strong{display:block;color:var(--navy);margin-bottom:5px}
@media(max-width:1050px){.services-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){
 .brand-logo img,.custom-logo{max-height:54px}
 .main-nav{margin-left:0}
 .m365-grid,.why-grid{grid-template-columns:1fr}
 .tech-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
 .services-4,.m365-points,.why-list{grid-template-columns:1fr}
 .tech-strip{grid-template-columns:1fr 1fr}
}


/* Brocom 1.0.15 - desktop hero/header polish */
@media (min-width:1051px){
  /* Keep the navigation bar compact while giving the logo more presence. */
  .navrow{height:76px;min-height:76px}
  .brand img{height:78px;max-width:330px}
  .site-header .btn-primary{min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding:9px 18px}

  /* Show more of the services section on a 1080p desktop viewport. */
  .hero{padding:48px 0}
  .hero-grid{gap:54px}

  /* Slightly denser information panel. */
  .tech{padding:22px 26px}
  .tech h3{margin-top:0;margin-bottom:6px}
  .tech div{padding:10px 0}
}


/* Brocom 1.0.15 - commerciële diensten */
.services-4 .card{
    position:relative;
    overflow:hidden;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.services-4 .card:before{
    content:"";
    position:absolute;
    left:0;top:0;right:0;
    height:4px;
    background:linear-gradient(90deg,var(--blue),#67d4ff);
}
.services-4 .card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 34px rgba(5,31,56,.10);
    border-color:#b8d9ee;
}
.services-4 .icon{
    width:48px;height:48px;
    display:flex;align-items:center;justify-content:center;
    border-radius:12px;
    background:#eaf6ff;
    color:var(--blue);
    font-size:23px;
    margin-bottom:16px;
}
.services-4 .card h3{margin-bottom:8px}
.services-4 .card p{min-height:88px}
.service-link{color:var(--blue);text-decoration:none}
.service-link:hover{text-decoration:underline}
.m365-band{
    position:relative;
    overflow:hidden;
}
.m365-band:after{
    content:"365";
    position:absolute;
    right:-20px;
    bottom:-85px;
    font-size:260px;
    font-weight:900;
    line-height:1;
    color:rgba(255,255,255,.025);
    pointer-events:none;
}
.m365-grid{position:relative;z-index:1}
@media(max-width:1050px){
    .services-4 .card p{min-height:0}
}


/* Brocom 1.0.15 - compacte navigatie + Diensten dropdown */
.main-nav .menu,
.main-nav ul.menu{
    display:flex;
    align-items:center;
}
.main-nav .menu-item{
    position:relative;
}
.main-nav .menu-item-has-children > a:after{
    content:"";
    display:inline-block;
    width:7px;height:7px;
    margin-left:7px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
}
.main-nav .sub-menu{
    display:none;
    position:absolute;
    z-index:9999;
    left:0;
    top:100%;
    min-width:220px;
    margin:0;
    padding:8px;
    list-style:none;
    background:#fff;
    border:1px solid #d9e5ee;
    border-radius:10px;
    box-shadow:0 14px 35px rgba(4,31,55,.16);
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu{
    display:block;
}
.main-nav .sub-menu li{
    display:block;
    width:100%;
}
.main-nav .sub-menu a{
    display:block;
    padding:11px 13px;
    border-radius:7px;
    white-space:nowrap;
    color:var(--navy);
}
.main-nav .sub-menu a:hover,
.main-nav .sub-menu a:focus{
    background:#eaf6ff;
    color:var(--blue);
}

/* Consistente diensticonen */
.services-4 .card:nth-child(1) .icon,
.services-4 .card:nth-child(2) .icon,
.services-4 .card:nth-child(3) .icon,
.services-4 .card:nth-child(4) .icon{
    font-size:0;
}
.services-4 .card .icon:before{
    display:block;
    font-size:23px;
    line-height:1;
    color:var(--blue);
}
.services-4 .card:nth-child(1) .icon:before{content:"◈";}
.services-4 .card:nth-child(2) .icon:before{content:"▦";}
.services-4 .card:nth-child(3) .icon:before{content:"◇";}
.services-4 .card:nth-child(4) .icon:before{content:"☁";font-size:21px}

/* Op compactere desktopbreedtes blijft de header ruim. */
@media (min-width:851px) and (max-width:1200px){
    .main-nav a{padding-left:8px;padding-right:8px}
    .site-header .btn-primary{padding-left:13px;padding-right:13px}
}

/* Mobiel: submenu gewoon in de geopende navigatie tonen. */
@media(max-width:850px){
    .main-nav .sub-menu{
        position:static;
        display:block;
        min-width:0;
        margin:4px 0 8px 12px;
        padding:3px 0 3px 10px;
        border:0;
        border-left:2px solid #cfe7f7;
        border-radius:0;
        box-shadow:none;
        background:transparent;
    }
    .main-nav .sub-menu a{padding:8px 10px}
}

/* Brocom 1.0.15 - Diensten dropdown fix */
.main-nav, .main-nav ul, .main-nav li,
.site-header, .site-header .navrow { overflow: visible; }

.main-nav > ul > li.menu-item-has-children { position: relative; }

@media (min-width: 851px) {
  .main-nav > ul > li.menu-item-has-children > .sub-menu {
    position: absolute;
    left: 0;
    top: calc(100% - 1px);
    z-index: 99999;
  }
  .main-nav > ul > li.menu-item-has-children:hover > .sub-menu,
  .main-nav > ul > li.menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }
}


/* =========================================================
   Brocom IT Services 1.0.15
   Professionele opmaak voor diensten- en informatiepagina's
   ========================================================= */
.brocom-service-page {
    background:#fff;
}
.brocom-service-hero {
    background:linear-gradient(115deg,#061f39 0%,#0d3e68 58%,#11608b 100%);
    color:#fff;
    padding:72px 24px;
}
.brocom-service-hero__inner,
.brocom-service-content {
    width:min(1120px, calc(100% - 40px));
    margin:0 auto;
}
.brocom-service-kicker {
    display:block;
    margin-bottom:12px;
    font-size:13px;
    line-height:1.4;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#63c9ff;
}
.brocom-service-hero h1 {
    margin:0 0 18px;
    max-width:780px;
    color:#fff;
    font-size:clamp(38px,5vw,62px);
    line-height:1.04;
    letter-spacing:-.025em;
}
.brocom-service-hero p {
    max-width:760px;
    margin:0;
    color:#eef8ff;
    font-size:19px;
    line-height:1.65;
}
.brocom-service-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}
.brocom-service-actions a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 20px;
    border:1px solid #58bff6;
    border-radius:8px;
    font-weight:800;
    text-decoration:none;
}
.brocom-service-actions .primary {
    background:#1187e8;
    border-color:#1187e8;
    color:#fff;
}
.brocom-service-actions .secondary {
    color:#fff;
    background:transparent;
}
.brocom-service-content {
    padding:62px 0 72px;
}
.brocom-service-intro {
    max-width:800px;
    margin-bottom:34px;
}
.brocom-service-intro h2,
.brocom-service-cta h2 {
    margin:0 0 12px;
    color:#082e51;
    font-size:clamp(28px,3vw,38px);
    line-height:1.15;
}
.brocom-service-intro p,
.brocom-service-card p,
.brocom-service-cta p {
    color:#496078;
    line-height:1.7;
}
.brocom-service-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin:32px 0 48px;
}
.brocom-service-card {
    padding:26px;
    border:1px solid #dbe6ef;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 26px rgba(7,43,74,.06);
}
.brocom-service-card h3 {
    margin:0 0 10px;
    color:#082e51;
    font-size:20px;
}
.brocom-service-card p {
    margin:0;
}
.brocom-service-card__icon {
    display:flex;
    width:46px;
    height:46px;
    margin-bottom:18px;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:#eaf6ff;
    color:#087ed2;
    font-size:21px;
    font-weight:800;
}
.brocom-service-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    padding:30px 34px;
    border-radius:16px;
    background:#f2f8fc;
    border:1px solid #d7e7f2;
}
.brocom-service-cta p {
    margin:0;
}
.brocom-service-cta .brocom-service-actions {
    flex:0 0 auto;
    margin:0;
}
.brocom-service-cta .secondary {
    color:#0a5485;
    border-color:#8ebedb;
}

@media (max-width:900px) {
    .brocom-service-grid { grid-template-columns:1fr 1fr; }
    .brocom-service-cta { align-items:flex-start; flex-direction:column; }
}
@media (max-width:620px) {
    .brocom-service-hero { padding:48px 0; }
    .brocom-service-hero__inner,
    .brocom-service-content { width:min(100% - 28px,1120px); }
    .brocom-service-hero p { font-size:17px; }
    .brocom-service-content { padding-top:42px; }
    .brocom-service-grid { grid-template-columns:1fr; }
    .brocom-service-card { padding:22px; }
    .brocom-service-cta { padding:24px; }
    .brocom-service-actions { width:100%; }
    .brocom-service-actions a { width:100%; }
}


/* Brocom 1.0.15 - uitgebreidere dienstenpagina's */
.brocom-service-closing {
    max-width:860px;
    margin:0 0 42px;
    padding:28px 30px;
    border-left:4px solid #1187e8;
    background:#f6fafD;
    border-radius:0 12px 12px 0;
}
.brocom-service-closing h2 {
    margin:0 0 10px;
    color:#082e51;
    font-size:26px;
}
.brocom-service-closing p {
    margin:0;
    color:#496078;
    line-height:1.7;
}
.brocom-service-grid {
    align-items:stretch;
}
.brocom-service-card {
    height:100%;
}
@media (max-width:620px) {
    .brocom-service-closing {
        padding:22px;
    }
}


/* Brocom 1.0.15 - Privacyverklaring */
.brocom-privacy-meta {
    display:inline-block;
    margin-bottom:28px;
    padding:9px 13px;
    border-radius:8px;
    background:#eaf6ff;
    color:#0a5485;
    font-size:14px;
}
.brocom-privacy-content {
    max-width:900px;
}
.brocom-privacy-content h2 {
    margin:38px 0 12px;
    color:#082e51;
    font-size:25px;
    line-height:1.25;
}
.brocom-privacy-content p,
.brocom-privacy-content li {
    color:#425a70;
    line-height:1.75;
}
.brocom-privacy-content ul {
    padding-left:22px;
}
.brocom-privacy-content a {
    color:#087ed2;
    text-decoration:underline;
    text-underline-offset:2px;
}
.brocom-privacy-note {
    margin-top:44px;
    padding:25px 28px;
    border:1px solid #d7e7f2;
    border-left:4px solid #1187e8;
    border-radius:0 12px 12px 0;
    background:#f3f9fd;
}
.brocom-privacy-note strong {
    display:block;
    margin-bottom:4px;
    color:#082e51;
    font-size:19px;
}
.brocom-privacy-note p {
    margin:0;
}


/* Brocom 1.0.15 - Algemene Voorwaarden */
.brocom-legal-page .brocom-privacy-content { max-width:940px; }
.brocom-legal-page .brocom-privacy-content h2 {
    padding-top:4px;
    border-bottom:1px solid #e3edf4;
    padding-bottom:10px;
}
.brocom-legal-note {
    margin-top:44px;
    padding:25px 28px;
    border:1px solid #d7e7f2;
    border-left:4px solid #1187e8;
    border-radius:0 12px 12px 0;
    background:#f3f9fd;
}
.brocom-legal-note strong {
    display:block;
    margin-bottom:4px;
    color:#082e51;
    font-size:19px;
}
.brocom-legal-note p { margin:0; }


/* =========================================================
   Brocom 1.0.15 - Over Brocom
   ========================================================= */
.brocom-about-page{background:#fff}
.brocom-about-inner,
.brocom-about-layout{
    width:min(1120px,calc(100% - 40px));
    margin:0 auto;
}
.brocom-about-intro{padding:70px 0}
.brocom-about-layout{
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:70px;
    align-items:start;
}
.brocom-section-label{
    display:block;
    margin-bottom:10px;
    color:#087ed2;
    font-size:13px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.brocom-about-story h2,
.brocom-about-values h2,
.brocom-about-services h2{
    margin:0 0 20px;
    color:#082e51;
    font-size:clamp(30px,3.4vw,42px);
    line-height:1.12;
}
.brocom-about-story p,
.brocom-about-values p,
.brocom-about-services p{
    color:#496078;
    font-size:17px;
    line-height:1.75;
}
.brocom-about-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.brocom-stat{
    min-height:145px;
    padding:23px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid #dce8f1;
    border-radius:14px;
    background:#f7fbfe;
}
.brocom-stat strong{
    display:block;
    margin-bottom:6px;
    color:#087ed2;
    font-size:35px;
    line-height:1;
}
.brocom-stat span{
    color:#183d5b;
    font-weight:700;
    line-height:1.35;
}
.brocom-about-values{
    padding:70px 0;
    background:#f4f8fb;
}
.brocom-about-lead{max-width:780px}
.brocom-about-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:34px;
}
.brocom-about-cards article{
    padding:25px;
    border:1px solid #dce7ef;
    border-radius:14px;
    background:#fff;
}
.brocom-about-cards h3{
    margin:0 0 8px;
    color:#082e51;
    font-size:19px;
}
.brocom-about-cards p{
    margin:0;
    font-size:15px;
}
.brocom-about-icon{
    display:flex;
    width:45px;height:45px;
    margin-bottom:18px;
    align-items:center;justify-content:center;
    border-radius:11px;
    background:#e9f6ff;
    color:#087ed2;
    font-weight:900;
    font-size:20px;
}
.brocom-about-services{padding:75px 0}
.brocom-about-services-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start;
}
.brocom-about-service-list{
    border-top:1px solid #dce7ef;
}
.brocom-about-service-list a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:17px 5px;
    border-bottom:1px solid #dce7ef;
    color:#0b4c79;
    font-weight:800;
    text-decoration:none;
}
.brocom-about-service-list a:hover{color:#087ed2}
.brocom-about-service-list span{font-size:20px}
.brocom-about-quote{
    padding:60px 0;
    background:#071f38;
}
.brocom-about-quote blockquote{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}
.brocom-about-quote p{
    margin:0;
    color:#d9e9f5;
    font-size:clamp(24px,3vw,36px);
    line-height:1.45;
}
.brocom-about-quote strong{color:#fff}
.brocom-about-contact{padding:70px 0}

@media(max-width:900px){
    .brocom-about-layout,
    .brocom-about-services-grid{grid-template-columns:1fr;gap:38px}
    .brocom-about-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
    .brocom-about-inner,
    .brocom-about-layout{width:min(100% - 28px,1120px)}
    .brocom-about-intro,
    .brocom-about-values,
    .brocom-about-services,
    .brocom-about-contact{padding:48px 0}
    .brocom-about-stats,
    .brocom-about-cards{grid-template-columns:1fr}
    .brocom-stat{min-height:110px}
    .brocom-about-quote{padding:45px 0}
}


/* =========================================================
   Brocom 1.0.17 - WordPress hoofdmenu en dropdowns
   Over Brocom: Privacyverklaring, Algemene Voorwaarden, Contact
   Diensten: Consultancy, Hardware, Licenties, Webhosting
   ========================================================= */

/* WordPress nested menu dropdowns */
.site-header .menu,
.site-header .menu ul,
.main-navigation .menu,
.main-navigation .menu ul {
    list-style:none;
    margin:0;
    padding:0;
}
.site-header .menu > li,
.main-navigation .menu > li {
    position:relative;
}
.site-header .menu-item-has-children > a,
.main-navigation .menu-item-has-children > a {
    display:flex;
    align-items:center;
    gap:7px;
}
.site-header .menu-item-has-children > a::after,
.main-navigation .menu-item-has-children > a::after {
    content:"▾";
    font-size:.72em;
    opacity:.7;
    transition:transform .18s ease;
}
.site-header .sub-menu,
.main-navigation .sub-menu {
    position:absolute;
    z-index:9999;
    top:calc(100% + 0px);
    left:0;
    min-width:230px;
    padding:8px !important;
    background:#fff;
    border:1px solid #dbe6ef;
    border-radius:0 0 12px 12px;
    box-shadow:0 14px 30px rgba(4,35,61,.14);
    opacity:0;
    visibility:hidden;
    transform:translateY(7px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.site-header .sub-menu li,
.main-navigation .sub-menu li {
    display:block !important;
    width:100%;
}
.site-header .sub-menu a,
.main-navigation .sub-menu a {
    display:block !important;
    width:100%;
    padding:11px 13px !important;
    border-radius:7px;
    color:#092c4c !important;
    white-space:nowrap;
    text-decoration:none;
}
.site-header .sub-menu a:hover,
.site-header .sub-menu a:focus,
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus {
    background:#edf7ff;
    color:#087ed2 !important;
}
.site-header .menu-item-has-children:hover > .sub-menu,
.site-header .menu-item-has-children:focus-within > .sub-menu,
.site-header .menu-item-has-children.brocom-submenu-open > .sub-menu,
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu,
.main-navigation .menu-item-has-children.brocom-submenu-open > .sub-menu {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.site-header .menu-item-has-children.brocom-submenu-open > a::after,
.main-navigation .menu-item-has-children.brocom-submenu-open > a::after {
    transform:rotate(180deg);
}

/* Make the header less crowded on desktop */
@media (min-width: 901px) {
    .site-header .menu,
    .main-navigation .menu {
        display:flex;
        align-items:center;
        gap:4px;
    }
    .site-header .menu > li > a,
    .main-navigation .menu > li > a {
        white-space:nowrap;
    }
}

/* Mobile: dropdowns become collapsible blocks instead of flyouts */
@media (max-width: 900px) {
    .site-header .menu,
    .main-navigation .menu {
        width:100%;
    }
    .site-header .menu > li,
    .main-navigation .menu > li {
        width:100%;
    }
    .site-header .menu > li > a,
    .main-navigation .menu > li > a {
        width:100%;
        justify-content:space-between;
    }
    .site-header .sub-menu,
    .main-navigation .sub-menu {
        position:static;
        min-width:0;
        width:100%;
        margin:4px 0 8px !important;
        padding:5px !important;
        border-radius:9px;
        box-shadow:none;
        display:none;
        opacity:1;
        visibility:visible;
        transform:none;
        background:#f5f9fc;
    }
    .site-header .menu-item-has-children:hover > .sub-menu,
    .main-navigation .menu-item-has-children:hover > .sub-menu {
        display:none;
    }
    .site-header .menu-item-has-children.brocom-submenu-open > .sub-menu,
    .site-header .menu-item-has-children:focus-within > .sub-menu,
    .main-navigation .menu-item-has-children.brocom-submenu-open > .sub-menu,
    .main-navigation .menu-item-has-children:focus-within > .sub-menu {
        display:block;
    }
    .site-header .sub-menu a,
    .main-navigation .sub-menu a {
        padding:11px 14px !important;
        white-space:normal;
    }
}