/* ─── Base ─────────────────────────────────────────────────── */
:root {
    /* Phillips IT's brand navy, used for heading text on light/neutral
       surfaces. Kept as its own token (rather than reusing --wa-color-brand-*,
       which is a different, brighter blue used for the "brand" variant
       elsewhere) so dark mode can swap in a lighter tint without touching
       the exact brand hue used everywhere else. Fixed navy backgrounds
       (CTA strips, footer) stay literal #1a2e4a in both themes. */
    --heading-color: #1a2e4a;

    /* Whitens the header logo in dark mode, the same way the footer logo
       is already whitened against its (always-dark) navy background. */
    --logo-filter: none;
}

html,
body {
    min-height: 100%;
    padding: 0;
    margin: 0;
    background: var(--wa-color-surface-default, #FCFCFC);
}

/* ─── Navigation: top bar (logo + portal CTA) ───────────────── */
#navigationBar {
    padding: 1.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--wa-color-surface-border, #e0e0e0);
}

#navigationImg {
    width: 14em;
}

#navigationPortal {
    display: flex;
    align-items: center;
}

#navigationImg a img {
    height: 5.5em;
    display: block;
    filter: var(--logo-filter);
}

.header-stack {
    gap: 0;
}

.nav-btn-m365 {
    --wa-color-on-quiet: #fd7e14;
}

.nav-btn-support {
    --wa-color-on-quiet: #6f42c1;
}

#breadcrumbBar {
    padding: 0.5em 1.5em;
    border-bottom: 1px solid var(--wa-color-surface-border, #e0e0e0);
    background: var(--wa-color-surface-lowered, #f8f8f8);
}

/* ─── Navigation: links (rendered via wa-page's "navigation" slot) ───
   By default wa-page renders the "navigation" slot as a left-hand
   sidebar on desktop and moves it into its own drawer (with a built-in
   hamburger toggle) below the mobileBreakpoint. We keep the automatic
   mobile drawer behaviour but re-lay the desktop sidebar out as a
   horizontal bar to match the rest of the header. ───────────────── */
wa-page::part(body) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "menu"
        "main";
}

wa-page::part(menu) {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    width: 100%;
    padding: 0;
}

/* aside is unused on this site — wa-page still applies a sticky-sidebar
   height formula to it regardless of grid sizing, which was leaving a
   near-full-viewport blank gap before the footer. Drop it entirely. */
wa-page::part(aside) {
    display: none;
}

wa-page::part(navigation-desktop) {
    width: 100%;
    border-bottom: 1px solid var(--wa-color-surface-border, #e0e0e0);
    background: var(--wa-color-surface-default, #FCFCFC);
}

/* wa-page's own header/toggle-button cell has no background of its own
   (it's excluded from the default slotted-content background rule), so
   the sticky header lets scrolled-past page content show through behind
   the toggle button. Force the whole sticky header to stay opaque. */
wa-page::part(header) {
    background-color: var(--wa-color-surface-default, #FCFCFC);
}

#navigationLinks[slot="navigation"] {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    padding: 0.75em 1.5em;
    box-sizing: border-box;
}

/* Below wa-page's mobileBreakpoint (768px default) the "navigation" slot
   is moved into its drawer instead of the desktop bar — stack the links
   full-width there instead of letting them wrap two-across. */
@media (max-width: 767.98px) {
    #navigationLinks[slot="navigation"] {
        flex-direction: column;
        align-items: stretch;
        width: auto;
        padding: 0;
    }

    #navigationLinks[slot="navigation"] wa-button {
        display: block;
        width: 100%;
    }

    #navigationLinks[slot="navigation"] wa-button::part(base) {
        width: 100%;
        justify-content: flex-start;
    }

    /* Compact sticky header: hamburger and logo share one row instead of
       wrapping onto separate lines (wa-page's header is flex-wrap, and the
       100%-wide bar was forcing the wrap). The Support Portal button is
       hidden here because it's already the last item in the drawer. */
    wa-page::part(header) {
        flex-wrap: nowrap;
        border-bottom: 1px solid var(--wa-color-surface-border, #e0e0e0);
    }

    wa-page::part(navigation-toggle) {
        margin-inline-start: 0.75em;
        font-size: 1.25rem;
    }

    #navigationBar {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding: 0.6em 1em 0.6em 0.5em;
        border-bottom: none;
    }

    #navigationImg {
        width: auto;
    }

    #navigationImg a img {
        height: 2.75em;
    }

    #navigationPortal {
        display: none;
    }

    #breadcrumbBar {
        padding: 0.4em 1em;
        font-size: 0.9em;
    }
}

/* ─── Home: Hero carousel ───────────────────────────────────── */
.hero-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.hero-track {
    display: flex;
    transition: transform 0.5s ease;
}

.hero-slide {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5em 1.5em;
    color: white;
    box-sizing: border-box;
}

.hero-slide--home         { background: linear-gradient(135deg, #1a2e4a 0%, #0d6efd 100%); }
.hero-slide--dev          { background: linear-gradient(135deg, #1a2e4a 0%, #0d6efd 100%); }
.hero-slide--security     { background: linear-gradient(135deg, #6b0a14 0%, #dc3545 100%); }
.hero-slide--m365         { background: linear-gradient(135deg, #7a3b00 0%, #fd7e14 100%); }
.hero-slide--connectivity { background: linear-gradient(135deg, #0a3622 0%, #198754 100%); }
.hero-slide--support      { background: linear-gradient(135deg, #2d1458 0%, #6f42c1 100%); }

.hero-slide-inner {
    display: flex;
    align-items: center;
    gap: 1.5em;
    max-width: 1100px;
    width: 100%;
}

.hero-slide-icon {
    font-size: 3.5rem;
    opacity: 0.9;
    flex-shrink: 0;
}

.hero-slide-text h2 {
    margin: 0 0 0.4em;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: white;
}

.hero-slide-text p {
    margin: 0 0 1.2em;
    opacity: 0.9;
    font-size: 1.05rem;
    max-width: 650px;
}

.hero-dots {
    position: absolute;
    bottom: 0.75em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4em;
    z-index: 10;
}

.hero-dot {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.hero-dot.active {
    background: white;
}

.hero-prev,
.hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.25);
    border: none;
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.3em 0.6em;
    cursor: pointer;
    border-radius: 4px;
    z-index: 10;
    transition: background 0.2s;
}

.hero-prev:hover,
.hero-next:hover {
    background: rgba(0, 0, 0, 0.45);
}

.hero-prev { left: 0.75em; }
.hero-next { right: 0.75em; }

/* ─── Home: Sections ────────────────────────────────────────── */
.section {
    padding: 3em 1.5em;
    max-width: 1100px;
    margin: 0 auto;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-bottom: 1.2em;
    border-bottom: 2px solid var(--wa-color-brand-fill-quiet, #e0eaff);
    padding-bottom: 0.5em;
}

.section-title h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--heading-color, #1a2e4a);
}

.section-title wa-icon {
    font-size: 1.5rem;
}

.home-grid {
    --wa-grid-min: 260px;
    gap: 1.25rem;
}

/* ─── Home: CTA strip ───────────────────────────────────────── */
.cta-strip {
    background: #1a2e4a;
    color: white;
    text-align: center;
    padding: 3em 1.5em;
}

.cta-strip h2 {
    margin: 0 0 0.5em;
    font-size: 1.6rem;
}

.cta-strip p {
    margin: 0 auto 1.5em;
    max-width: 500px;
    opacity: 0.85;
}

/* ─── Shared: Card header ───────────────────────────────────── */
.card-header {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.card-header wa-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.card-title {
    font-size: 1.1rem;
}

/* ─── Shared: Service card body (home) ──────────────────────── */
.service-card-body {
    font-size: 0.92rem;
    color: var(--wa-color-text-quiet, #555);
    margin: 0;
    line-height: 1.5;
}

/* ─── Individual pages: Banner ──────────────────────────────── */
.page-banner {
    color: white;
    padding: 3em 1.5em;
}

.page-banner--dev          { background: linear-gradient(135deg, #1a2e4a 0%, #0d6efd 100%); }
.page-banner--security     { background: linear-gradient(135deg, #6b0a14 0%, #dc3545 100%); }
.page-banner--m365         { background: linear-gradient(135deg, #7a3b00 0%, #fd7e14 100%); }
.page-banner--connectivity { background: linear-gradient(135deg, #0a3622 0%, #198754 100%); }
.page-banner--support      { background: linear-gradient(135deg, #2d1458 0%, #6f42c1 100%); }

.page-banner-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1em;
}

.page-banner-icon {
    font-size: 3rem;
    opacity: 0.9;
    flex-shrink: 0;
}

.page-banner h1 {
    margin: 0 0 0.3em;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
}

.page-banner p {
    margin: 0;
    opacity: 0.9;
    font-size: 1.05rem;
    max-width: 650px;
}

/* ─── Individual pages: Content ─────────────────────────────── */
.page-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3em 1.5em;
}

.page-grid {
    --wa-grid-min: 300px;
    gap: 1.5rem;
}

.card-desc {
    font-size: 0.92rem;
    color: var(--wa-color-text-quiet, #555);
    margin: 0 0 0.5em;
    line-height: 1.55;
}

.card-feature-list {
    list-style: none;
    padding: 0;
    margin: 0.75em 0 0;
}

.card-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    font-size: 0.9rem;
    color: var(--wa-color-text-quiet, #444);
    padding: 0.3em 0;
    border-top: 1px solid var(--wa-color-surface-border, #f0f0f0);
}

.card-feature-list li wa-icon {
    margin-top: 0.1em;
    flex-shrink: 0;
}

/* ─── Individual pages: CTA ─────────────────────────────────── */
.page-cta {
    background: #1a2e4a;
    color: white;
    text-align: center;
    padding: 3em 1.5em;
}

.page-cta h2 {
    margin: 0 0 0.5em;
    font-size: 1.5rem;
}

.page-cta p {
    margin: 0 auto 1.5em;
    max-width: 500px;
    opacity: 0.85;
}

/* ─── Pre-footer ────────────────────────────────────────────── */
[slot="footer"] {
    width: 100%;
}

#preFooter {
    background: var(--wa-color-surface-lowered, #f8f8f8);
    border-top: 1px solid var(--wa-color-surface-border, #e0e0e0);
    border-bottom: 1px solid var(--wa-color-surface-border, #e0e0e0);
    width: 100%;
}

#preFooterInner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5em 1.5em;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5em;
    align-items: start;
}

.pf-heading {
    color: var(--heading-color, #1a2e4a);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.9em;
}

.pf-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.pf-links li {
    margin: 0;
}

.pf-links a {
    color: var(--wa-color-text-quiet, #555);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s;
}

.pf-links a:hover {
    color: var(--heading-color, #1a2e4a);
}

.pf-desc {
    color: var(--wa-color-text-quiet, #666);
    font-size: 0.88rem;
    margin: 0 0 0.9em;
    line-height: 1.5;
}

.pf-newsletter-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.pf-newsletter-success {
    color: #198754;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
}

.pf-newsletter-error {
    color: #dc3545;
    font-size: 0.82rem;
    margin: 0.3em 0 0;
}

.pf-col--logo {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.pf-logo {
    height: 3em;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.pf-logo:hover {
    opacity: 1;
}

/* ─── Footer ────────────────────────────────────────────────── */
#siteFooter {
    background: #1a2e4a;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

#footerInner {
    padding: 1.25em 1.5em;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1em;
    width: 100%;
    box-sizing: border-box;
}

.footer-logo-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    justify-self: stretch;
}

.footer-spacer {
    /* intentionally empty — mirrors logo column for balance */
}

.footer-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3em;
}

.footer-row {
    display: flex;
    align-items: center;
    gap: 0.45em;
    white-space: nowrap;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-sep {
    opacity: 0.35;
}

#siteFooter a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

#siteFooter a:hover {
    color: white;
}

/* Stack the pre-footer columns and footer rows on narrow screens — the
   fixed three-column grid and nowrap address line were wider than a
   phone viewport and caused horizontal scrolling. */
@media (max-width: 767.98px) {
    /* wa-page pads every slotted element; the inner wrappers already
       have their own padding, so drop the outer layer on phones. */
    #preFooter,
    #siteFooter {
        padding: 0;
    }

    #preFooterInner {
        grid-template-columns: 1fr;
        gap: 1.75em;
        padding: 2em 1.5em;
    }

    #footerInner {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .footer-spacer {
        display: none;
    }

    .footer-row {
        white-space: normal;
    }

    .footer-logo-col {
        justify-content: center;
    }
}

/* ─── Legal pages ───────────────────────────────────────────── */
.legal-doc {
    max-width: 780px;
    margin: 0 auto;
}

.legal-section {
    margin-bottom: 2.5em;
}

.legal-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--heading-color, #1a2e4a);
    margin: 0 0 0.6em;
    padding-bottom: 0.4em;
    border-bottom: 2px solid var(--wa-color-brand-fill-quiet, #e0eaff);
}

.legal-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-color, #1a2e4a);
    margin: 1.2em 0 0.4em;
}

.legal-section p,
.legal-section ul,
.legal-section li {
    font-size: 0.95rem;
    color: var(--wa-color-text-quiet, #444);
    line-height: 1.7;
}

.legal-section ul {
    padding-left: 1.4em;
    margin: 0.4em 0;
}

.legal-section li {
    margin-bottom: 0.3em;
}

.legal-section a {
    color: #0d6efd;
    text-decoration: none;
}

.legal-section a:hover {
    text-decoration: underline;
}

.legal-contact {
    list-style: none;
    padding: 0;
}

.legal-contact li {
    padding: 0.25em 0;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: 0.75em 0;
}

.legal-table th {
    background: var(--wa-color-brand-fill-quiet, #f0f4ff);
    color: var(--heading-color, #1a2e4a);
    font-weight: 600;
    text-align: left;
    padding: 0.6em 0.8em;
    border: 1px solid var(--wa-color-surface-border, #dde4f5);
}

.legal-table td {
    padding: 0.55em 0.8em;
    border: 1px solid var(--wa-color-surface-border, #e8ecf5);
    color: var(--wa-color-text-quiet, #444);
    vertical-align: top;
}

.legal-table tr:nth-child(even) td {
    background: var(--wa-color-surface-lowered, #f8faff);
}

/* ─── Colour utilities ───────────────────────────────────────── */
.color-dev          { color: #0d6efd; }
.color-security     { color: #dc3545; }
.color-m365         { color: #fd7e14; }
.color-connectivity { color: #198754; }
.color-support      { color: #6f42c1; }