/* ThnkTank UI polish: loaded on every public page after the theme CSS. */

/* ---------- Breadcrumb band ---------- */
/* Compact band: breadcrumb trail on top, page title underneath (pure CSS, works with the existing markup) */
.nb_bredcrumb_wrapper_container {
    height: auto !important;
    max-height: none !important;
    min-height: 200px;
    padding: 40px 0 !important;
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 14px;
}
.nb_bredcrumb .nb_bredcrumb_left,
.nb_bredcrumb .nb_bredcrumb_right { width: 100%; }
.nb_bredcrumb .nb-about-contain .mb_name,
.nb_bredcrumb .nb-about-contain h1,
.nb_bredcrumb .nb-about-contain h4 {
    font-size: clamp(28px, 4vw, 44px) !important;
    line-height: 1.15 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    letter-spacing: .2px;
}
.nb_bredcrumb .nb-about-contain-link {
    font-family: var(--nb-body-font, 'Rubik', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5;
    text-align: left !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .6) !important;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.nb_bredcrumb .nb-about-contain-link a { color: rgba(255, 255, 255, .85) !important; font-weight: 500 !important; }
.nb_bredcrumb .nb-about-contain-link a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }
.nb_bredcrumb .nb-about-contain-link a:last-of-type { color: #6b94d9 !important; font-weight: 700 !important; }
.nb_bredcrumb .nb-about-contain-link span { margin: 0 10px; color: rgba(255, 255, 255, .35); }

/* Compact variant for pages whose H1 sits in the hero right under the band (service + contact pages):
   only the breadcrumb trail is shown in the band. */
.nb_bredcrumb.nb-bc-compact .nb_bredcrumb_wrapper_container { min-height: 120px; padding: 28px 0 !important; }
.nb_bredcrumb.nb-bc-compact .nb_bredcrumb_left { display: none; }

@media (max-width: 767px) {
    .nb_bredcrumb_wrapper_container { min-height: 150px; padding: 28px 0 !important; gap: 10px; }
    .nb_bredcrumb.nb-bc-compact .nb_bredcrumb_wrapper_container { min-height: 90px; padding: 20px 0 !important; }
    .nb_bredcrumb .nb-about-contain-link { font-size: 12px !important; letter-spacing: .5px; }
    .nb_bredcrumb .nb-about-contain-link span { margin: 0 6px; }
}

/* ---------- Page-level safety nets ---------- */
img { max-width: 100%; }
html, body { overflow-x: hidden; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #FFFF00; outline-offset: 3px;
}
.nb-contact-select { background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, .15); padding: 14px 16px; border-radius: 6px; }

/* ---------- Home / About service tabs: equal-height cards with a bottom-aligned button ---------- */
.nb-tabg > [class*="col-"] { display: flex; margin-bottom: 24px; }
.nb-tabg .nbv2_portfolio_content_box { width: 100%; display: flex; flex-direction: column; }
.nb-tabg .nbv2_portfolio_content_box p { flex-grow: 1; }
.nb-tabg .nbv2_portfolio_content_box_icon img { width: 100%; height: 220px; object-fit: cover; }
.nb-tab-btn { margin-top: 22px; align-self: flex-start; }

/* Images: dimension attributes (added by includes/img-optimizer.php) must not distort; any theme rule with a real height still wins (zero specificity) */
:where(img[width][height]) { height: auto; }

/* ---------- Accessibility ---------- */
/* Theme text colour was #4773b8 (about 4:1 on the dark background); a lighter tint passes WCAG AA for body-size text. Button fills keep the original brand blue. */
:root { --White-color: #6b94d9; --white-color: #6b94d9; }
.nb-mcl { color: #6b94d9; }
.nb-skip { position: absolute; left: 12px; top: -60px; z-index: 100000; background: #fff; color: #0E0E0E; padding: 10px 18px; border-radius: 6px; font-weight: 700; transition: top .2s; }
.nb-skip:focus { top: 12px; }
#nb-main { height: 0; outline: none; }

/* Contact page: both cards share the same height; left card spreads its content to match the form */
.nb-contact-split > .row { align-items: stretch; }
.nb-contact-split > .row > [class*="col-"] > div { height: 100%; }
.nb-contact-split > .row > [class*="col-"]:first-child > div { display: flex; flex-direction: column; }
.nb-contact-split > .row > [class*="col-"]:first-child > div > div:last-child { flex: 1; display: flex; }
.nb-contact-split > .row > [class*="col-"]:first-child .nb-contact-contain-ul { display: flex; flex-direction: column; justify-content: space-evenly; width: 100%; margin-bottom: 0; padding-bottom: 0; }
@media (max-width: 767px) { .nb-contact-split > .row > [class*="col-"]:first-child .nb-contact-contain-ul { gap: 24px; } }
@media (max-width: 767px) { .nb-contact-split > .row > [class*="col-"]:first-child { margin-bottom: 24px; } }

/* Form dropdowns: the open list must be readable on the dark theme (browsers draw it with the select background) */
select, select option, select optgroup { color-scheme: dark; }
select option, select optgroup { background-color: #1a1a1a; color: #ffffff; }
select option:checked, select option:hover { background-color: #4773b8; color: #ffffff; }
select option[value=""], select option:disabled { color: #9aa3b2; }

/* Contact form: two fields per row (name | email, phone | service); message, captcha and button stay full width */
.nb-form-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-items: start; }
.nb-form-2col > * { min-width: 0; }
.nb-form-2col > textarea, .nb-form-2col > .g-recaptcha, .nb-form-2col > #g-recaptcha-error, .nb-form-2col > button, .nb-form-2col > p { grid-column: 1 / -1; }
.nb-form-2col > p:empty { display: none; }
@media (max-width: 575px) { .nb-form-2col { grid-template-columns: minmax(0, 1fr); } .nb-contact .nb-bg2 { padding: 34px 20px !important; } .nb-form-2col > textarea { width: 100%; } }