/* ============================================================
   The CV Squad — legacy site modernisation overlay (CONSOLIDATED)
   Load LAST, after custom.css. Namespaced so nothing leaks.
   Palette (from logo): navy #1e437a / deep #152d5d, mid blue #295393,
   orange #f68027, white background, light grey #f5f6f7.
   Sections: header/nav, mobile, cookie banner, header-flow fixes,
   mega-menu cards, homepage typography + sections.
   ============================================================ */

/* ---------- Typography ---------- */
#header,
#header a,
#header p,
#header span,
#header li,
#header button {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

#header .cvsq-ico,
#divCookie .cvsq-ico {
    display: inline-block;
    vertical-align: -2px;
}

/* ---------- Header shell ---------- */
#header {
    background: #ffffff;
}

#menu-tab .tabs {
    background: #ffffff;
    border: 0;
}

/* ---------- Header row: single line on desktop, never wraps ---------- */
#menu-tab .tabs > .container > .row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

#menu-tab .logo {
    float: none !important;
    flex: 0 0 auto;
    padding: 12px 16px 12px 0;
}

#menu-tab .col-md-9-tabs {
    float: none !important;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#menu-tab .col-md-9-tabs .row {
    display: block;
    margin: 0;
}

#menu-tab .col-md-3-tabs {
    float: none !important;
    flex: 0 0 auto;
    flex-shrink: 0;
    width: auto !important;
    margin-left: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ---------- Top nav tabs ---------- */
#menu-tab .nav-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    border-bottom: 0;
    min-width: 0;
}

#menu-tab .nav-tabs > li {
    float: none;
    min-width: 0;
}

#menu-tab .nav-tabs > li > a {
    white-space: nowrap;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    background: transparent !important;
    margin: 0;
    padding: 16px 14px 12px;
    transition: color .15s ease, border-color .15s ease;
}

#menu-tab .nav-tabs > li > a p {
    color: #1e437a;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
}

#menu-tab .nav-tabs > li > a:hover,
#menu-tab .nav-tabs > li.active > a {
    border-bottom-color: #f68027 !important;
}

#menu-tab .nav-tabs > li > a:hover p,
#menu-tab .nav-tabs > li.active > a p {
    color: #152d5d;
}

#menu-tab .blockState {
    display: none;
}

/* ---------- Top-right utility row ---------- */
#menu-tab .cvsq-utils {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 0;
    white-space: nowrap;
}

#menu-tab .cvsq-util-link {
    color: #1e437a !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}

#menu-tab .cvsq-util-link:hover {
    color: #f68027 !important;
}

#menu-tab .cvsq-util-link .cvsq-ico {
    color: #f68027;
    vertical-align: -2px;
}

#menu-tab .cvsq-btn-pricing {
    background: #f68027;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 8px 18px;
    border-radius: 8px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .15s ease;
}

#menu-tab .cvsq-btn-pricing:hover {
    background: #e0701a;
}

/* Tighten spacing a notch on middling desktop widths */
@media (max-width: 1300px) {
    #menu-tab .nav-tabs > li > a {
        padding: 16px 10px 12px;
    }
    #menu-tab .cvsq-utils {
        gap: 10px;
    }
}

/* Tablet and below: stack — logo/tabs row, utilities centred underneath */
@media (max-width: 991px) {
    #menu-tab .tabs > .container > .row {
        flex-wrap: wrap;
    }
    #menu-tab .col-md-3-tabs {
        flex: 1 1 100%;
        margin-left: 0;
    }
    #menu-tab .cvsq-utils {
        justify-content: center;
        padding: 4px 0 12px;
    }
}

/* ---------- Mobile menu ---------- */
#mobilemenu .header-body {
    background: #ffffff;
    border-top: 3px solid #f68027;
    box-shadow: 0 6px 16px -12px rgba(21, 45, 93, 0.35);
}

#mobilemenu .header-logo {
    padding: 10px 0 6px;
}

#mobilemenu .header-btn-collapse-nav {
    background: #1e437a;
    border: 0;
    border-radius: 8px;
    color: #ffffff !important;
    width: 44px;
    height: 40px;
    font-size: 16px;
    transition: background-color .15s ease;
}

#mobilemenu .header-btn-collapse-nav:hover,
#mobilemenu .header-btn-collapse-nav:focus {
    background: #152d5d;
    color: #ffffff !important;
}

#mobilemenu #mainNav > li {
    border-bottom: 1px solid rgba(30, 67, 122, 0.08);
}

#mobilemenu #mainNav > li > a {
    display: block;
    color: #1e437a !important;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 14px !important;
    background: transparent !important;
    border-radius: 0;
}

#mobilemenu #mainNav > li.active > a,
#mobilemenu #mainNav > li > a:hover {
    color: #f68027 !important;
}

#mobilemenu #mainNav > li > a .cvsq-chev {
    float: right;
    margin-top: 3px;
    color: #f68027;
    transition: transform .15s ease;
}

#mobilemenu #mainNav > li.open > a .cvsq-chev {
    transform: rotate(180deg);
}

#mobilemenu #mainNav .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    border: 0;
    border-left: 3px solid rgba(246, 128, 39, 0.35);
    border-radius: 0;
    box-shadow: none;
    background: rgba(30, 67, 122, 0.03);
    margin: 0 0 8px;
    padding: 4px 0;
}

#mobilemenu #mainNav .dropdown-menu a {
    color: #1e437a !important;
    font-size: 14px;
    padding: 11px 22px !important;
}

#mobilemenu #mainNav .dropdown-menu a:hover {
    background: rgba(30, 67, 122, 0.06);
    color: #152d5d !important;
}

/* ---------- Cookie banner (bottom-fixed, navy) ---------- */
#divCookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 9999;
    height: auto !important;
    background: #1e437a !important;
    color: #ffffff !important;
    padding: 12px 0 !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    box-shadow: 0 -6px 18px -10px rgba(21, 45, 93, 0.5);
}

#divCookie a {
    color: #8fb0d9;
    text-decoration: underline;
}

#divCookie a:hover {
    color: #ffffff;
}

#divCookie .cvsq-cookie-accept {
    background: #f68027 !important;
    color: #ffffff !important;
    border: 0;
    border-radius: 6px;
    padding: 6px 18px !important;
    font-weight: 600;
    font-size: 13px;
    transition: background-color .15s ease;
}

#divCookie .cvsq-cookie-accept:hover {
    background: #e0701a !important;
}

#divCookie .cvsq-cookie-close {
    color: #8fb0d9 !important;
    text-decoration: none !important;
    font-size: 13px;
}

#divCookie .cvsq-cookie-close:hover {
    color: #ffffff !important;
}

#divCookie .cvsq-cookie-close .cvsq-ico {
    vertical-align: -3px;
}

@media (max-width: 767px) {
    #divCookie .row > div {
        width: 100%;
        float: none;
        text-align: left !important;
    }
    #divCookie .cvsq-cookie-accept {
        padding: 8px 22px !important;
    }
    #divCookie .col-xs-3 {
        margin-top: 6px;
    }
}

/* ---------- Fix: theme positions header columns absolutely; force normal flow ---------- */
#menu-tab .tabs > .container {
    width: 100% !important;
    max-width: 1360px;
}

#menu-tab .logo,
#menu-tab .col-md-9-tabs,
#menu-tab .col-md-3-tabs {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
}

#menu-tab .col-md-3-tabs {
    margin-left: auto !important;
}

#menu-tab .col-md-9-tabs .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#menu-tab .nav-tabs {
    justify-content: flex-start;
    padding-left: 24px;
}

/* ---------- Fix: no stray lines when closed; square card items in panes ---------- */
#menu-tab .tab-content {
    border: 0 !important;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

#menu-tab .tab-pane {
    background: #ffffff;
    border-top: 1px solid rgba(30, 67, 122, 0.10);
    border-bottom: 1px solid rgba(30, 67, 122, 0.10);
    box-shadow: 0 10px 24px -18px rgba(21, 45, 93, 0.35);
    padding: 16px 0;
}

#menu-tab .tab-pane .row {
    display: flex;
    flex-wrap: nowrap;
}

#menu-tab .tab-pane .cvsq-mega-item {
    float: none;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    text-align: center;
    border: 0 !important;
    padding: 5px;
}

#menu-tab .mega-menu-sub-title a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    background: #ffffff;
    color: #1e437a !important;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45 !important;
    border: 1px solid rgba(30, 67, 122, 0.16) !important;
    border-radius: 10px;
    padding: 10px 8px;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

#menu-tab .mega-menu-sub-title a:hover {
    background: rgba(246, 128, 39, 0.06);
    border-color: #f68027 !important;
    color: #152d5d !important;
    text-decoration: none;
}

/* ============================================================
   Homepage / content sections tidy-up (CSS-only)
   ============================================================ */

/* Typography: modern font + sane heading rhythm in page content */
.main h1,
.main h2,
.main h3,
.main h4 {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Arial, sans-serif !important;
    line-height: 1.35;
}

.main h1 strong,
.main h2 strong,
.main h4 strong,
.main h4 b {
    font-weight: 700;
}

/* The 20px h4s are really body copy: make them read like it */
.main h4[style*="20px"] {
    font-size: 17px !important;
    line-height: 1.7 !important;
    font-weight: 400;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    color: #33475c !important;
}

/* Section headings (the inline 35px ones): consistent size + navy */
.main h1[style*="35px"],
.main h4[style*="35px"] {
    font-size: 30px !important;
    color: #152d5d !important;
    letter-spacing: -0.01em;
}

.main h2[style*="24px"] {
    font-size: 19px !important;
    color: #f68027 !important;
    font-weight: 600;
}

/* Background bands: light grey, consistent */
.main div[style*="#f9fcfc"],
.main div[style*="#f4f4f4"],
.main section[style*="#f9fcfc"],
.main section[style*="#f4f4f4"] {
    background-color: #f5f6f7 !important;
}

/* Black band -> logo deep navy */
.main div[style*="#000000"],
.main section[style*="#000000"] {
    background-color: #152d5d !important;
}

.main div[style*="#000000"] h4,
.main section[style*="#000000"] h4 {
    color: #ffffff !important;
}

/* Theme's orange sections -> light grey (no tint anywhere) */
.main section.orange {
    background-color: #f5f6f7 !important;
    border: 0;
}

/* Explicit section colour classes for the rebuilt homepage */
.main .cvsq-sec-white {
    background-color: #ffffff;
}

.main .cvsq-sec-grey {
    background-color: #f5f6f7;
}

/* Three icon tabs: card treatment */
.home-intro {
    background: #ffffff !important;
    padding: 10px 0 26px;
}

.home-intro .tabs-middle {
    border: 0 !important;
    padding: 8px;
}

.home-intro .tabs-middle a {
    display: block;
    background: #ffffff;
    border: 1px solid rgba(30, 67, 122, 0.16);
    border-radius: 12px;
    padding: 20px 12px;
    transition: border-color .15s ease, background-color .15s ease;
}

.home-intro .tabs-middle a:hover {
    border-color: #f68027;
    background: rgba(246, 128, 39, 0.05);
    text-decoration: none;
}

.home-intro .tabs-middle h4 {
    color: #1e437a !important;
    font-size: 15px !important;
    font-weight: 600;
    text-transform: none;
    margin-top: 10px;
}

.home-intro .tabs-middle img {
    max-height: 44px;
    width: auto !important;
}

/* Video embed: rounded, contained */
.main .embed-container {
    border-radius: 14px;
    box-shadow: 0 18px 40px -24px rgba(21, 45, 93, 0.45);
}

/* Section rhythm (used by the rebuilt Index.aspx) */
.main .cvsq-sec {
    padding: 44px 0;
}

.main .cvsq-sec-tight {
    padding: 20px 0;
}

.main .cvsq-sec h1,
.main .cvsq-sec h2,
.main .cvsq-sec h4 {
    text-align: center;
}

.main .cvsq-sec h1[style*="35px"] {
    margin-bottom: 4px;
}

.main .cvsq-sec h2[style*="24px"] {
    margin-bottom: 18px;
}

.main .cvsq-sec h4[style*="35px"] {
    margin-bottom: 18px;
}

.main .cvsq-sec h4[style*="20px"] {
    margin-bottom: 16px;
}

/* Video inset inside the More Than a CV Writer section */
.main .cvsq-video-inset {
    max-width: 760px;
    margin: 26px auto 6px;
}


/* ---------- Widgets on grey sections: blend white-background images into the grey ---------- */
.main .cvsq-sec-grey div[class*="elfsight-app-"] img {
    mix-blend-mode: multiply;
}

/* ---------- Three CTA cards: assertive, Pricing featured ---------- */
.home-intro .tabs-middle a {
    border: 1.5px solid rgba(30, 67, 122, 0.22);
    padding: 28px 14px 24px;
    box-shadow: 0 8px 22px -18px rgba(21, 45, 93, 0.35);
    transition: border-color .15s ease, background-color .15s ease,
        transform .15s ease, box-shadow .15s ease;
}

.home-intro .tabs-middle h4 {
    font-size: 17px !important;
    font-weight: 700;
}

.home-intro .tabs-middle a:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -18px rgba(21, 45, 93, 0.45);
    border-color: #f68027;
}

.home-intro .tabs-middle:nth-child(2) a {
    background: #f68027;
    border-color: #f68027;
}

.home-intro .tabs-middle:nth-child(2) a svg {
    stroke: #ffffff;
}

.home-intro .tabs-middle:nth-child(2) a h4 {
    color: #ffffff !important;
}

.home-intro .tabs-middle:nth-child(2) a:hover {
    background: #e0701a;
    border-color: #e0701a;
}