/* ==========================================================================
   Netpoa - additions for the marketing landing pages
   Everything else on the page uses stock Lagom components.
   Paste into Lagom > Settings > Custom CSS, or include this file from the tpl.
   ========================================================================== */

/* --- Hero: domain search ------------------------------------------------ */
.banner-search {
    max-width: 520px;
    margin-top: 28px;
}
.banner-search .form-control {
    height: 52px;
}
.banner-search .btn {
    height: 52px;
}
.banner-search-note {
    margin-top: 10px;
    font-size: var(--font-size-sm);
    color: var(--text-lighter-color);
}
.banner-search-note i {
    color: var(--brand-primary);
    margin-right: 4px;
}

/* --- Hero: payment methods ---------------------------------------------- */
.banner-payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 0;
    list-style: none;
}
.banner-payments li {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-heading-color);
    background: #fff;
    border: 1px solid var(--gray-lighter-3);
    border-radius: var(--border-radius-base);
    padding: 6px 12px;
    line-height: 1.2;
}
.banner-payments .banner-payments-label {
    background: none;
    border: none;
    padding: 6px 0;
    color: var(--text-lighter-color);
    font-weight: 400;
}

/* --- Trust strip -------------------------------------------------------- */
.netpoa-stats {
    border-top: 1px solid var(--gray-lighter-3);
    border-bottom: 1px solid var(--gray-lighter-3);
    padding: 28px 0;
}
.netpoa-stat {
    text-align: center;
    padding: 8px 4px;
}
.netpoa-stat-value {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--text-heading-color);
    font-variant-numeric: tabular-nums;
}
.netpoa-stat-label {
    margin-top: 4px;
    font-size: var(--font-size-sm);
    color: var(--text-lighter-color);
}

/* --- Comparison table --------------------------------------------------- */
.netpoa-compare {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.netpoa-compare th,
.netpoa-compare td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--gray-lighter-4);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.netpoa-compare thead th {
    border-bottom: 1px solid var(--gray-lighter-3);
    color: var(--text-heading-color);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}
.netpoa-compare tbody th {
    text-align: left;
    font-weight: 400;
    color: var(--text-body-color);
    white-space: nowrap;
}
.netpoa-compare .is-featured {
    background: var(--gray-faded);
}
.netpoa-compare .yes {
    color: var(--brand-primary);
}
.netpoa-compare .no {
    color: var(--gray-lighter-2);
}
.netpoa-compare tfoot td {
    border-bottom: none;
    padding-top: 18px;
}

/* --- Testimonials ------------------------------------------------------- */
.netpoa-quote {
    height: 100%;
}
.netpoa-quote-text {
    color: var(--text-heading-color);
    font-size: 16px;
    line-height: 1.6;
}
.netpoa-quote-author {
    margin-top: 14px;
    font-size: var(--font-size-sm);
    color: var(--text-lighter-color);
}
.netpoa-quote-author b {
    display: block;
    color: var(--text-heading-color);
    font-weight: var(--font-weight-medium);
}

/* --- Small helpers ------------------------------------------------------ */
.netpoa-note {
    margin-top: 18px;
    font-size: var(--font-size-sm);
    color: var(--text-lighter-color);
}
.package-desc-who {
    min-height: 42px;
}

/* --- Text on Lagom's dark bands ----------------------------------------- *
 * Lagom only recolours .section-title, .section-subtitle, .section-desc and
 * .feature-* inside .section-primary / .section-secondary. Anything else
 * keeps the dark body colour and disappears. These are our own elements.   */
.site .site-section.section-primary .netpoa-note,
.site .site-section.section-secondary .netpoa-note {
    color: var(--primary-block-text-color);
}
.site .site-section.section-primary .netpoa-note a,
.site .site-section.section-secondary .netpoa-note a {
    color: var(--primary-block-link-color);
    text-decoration: underline;
}
.site .site-section.section-primary .netpoa-note a:hover,
.site .site-section.section-secondary .netpoa-note a:hover {
    color: var(--primary-block-link-hover-color);
}

/* Migration band: keep the illustration from overflowing its half */
.site .site-section .section-sides .section-graphic .graphic > img {
    max-width: 100%;
}

/* Solid CTA on the dark bands. Lagom's .btn-light is a ghost button (8% white),
   which is too quiet for a band whose only job is the call to action. */
.site .site-section.section-primary .section-actions .btn-light,
.site .site-section.section-secondary .section-actions .btn-light {
    background: #fff;
    border-color: #fff;
    color: var(--brand-secondary);
}
.site .site-section.section-primary .section-actions .btn-light:hover,
.site .site-section.section-secondary .section-actions .btn-light:hover,
.site .site-section.section-primary .section-actions .btn-light:focus,
.site .site-section.section-secondary .section-actions .btn-light:focus {
    background: hsla(0, 0%, 100%, .88);
    border-color: hsla(0, 0%, 100%, .88);
    color: var(--brand-secondary);
}

/* ==========================================================================
   Full-bleed layout for the landing pages
   --------------------------------------------------------------------------
   A WHMCS custom page renders inside the client-area chrome:
       .main-body > .container > .main-grid > .main-content > .site
   Lagom's own site pages sit directly in .app-main, so their coloured bands
   run edge to edge. Nested inside .main-content they are capped at the
   container width and the band backgrounds stop short.

   Lagom's header.tpl adds `page-<templatefile>` to <body> only when the
   template name has no slash - hence templates/lagom2/web-hosting.tpl rather
   than a subfolder. That gives us body.page-web-hosting to key off.
   ========================================================================== */
/* Every landing page needs this, so the selector lists them all. Adding a new
   page? Add its body class here too. The :has() rule below catches it anyway on
   current browsers - the list is what keeps older ones working. */
body.page-web-hosting .main-body,
body.page-reseller-hosting .main-body,
body.page-vps .main-body,
body.page-business-email .main-body,
body.page-website-design .main-body,
body.page-domain-reseller .main-body,
body.page-tos .main-body,
body.page-tz-domains .main-body,
body:has(.app-main .site[class*="site-"]) .main-body {
    padding: 0;
}
body.page-web-hosting .main-body > .container,
body.page-reseller-hosting .main-body > .container,
body.page-vps .main-body > .container,
body.page-business-email .main-body > .container,
body.page-website-design .main-body > .container,
body.page-domain-reseller .main-body > .container,
body.page-tos .main-body > .container,
body.page-tz-domains .main-body > .container,
body:has(.app-main .site[class*="site-"]) .main-body > .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
body.page-web-hosting .main-grid,
body.page-reseller-hosting .main-grid,
body.page-vps .main-grid,
body.page-business-email .main-grid,
body.page-website-design .main-grid,
body.page-domain-reseller .main-grid,
body.page-tos .main-grid,
body.page-tz-domains .main-grid,
body:has(.app-main .site[class*="site-"]) .main-grid {
    display: block;
    margin: 0;
}
body.page-web-hosting .main-content,
body.page-reseller-hosting .main-content,
body.page-vps .main-content,
body.page-business-email .main-content,
body.page-website-design .main-content,
body.page-domain-reseller .main-content,
body.page-tos .main-content,
body.page-tz-domains .main-content,
body:has(.app-main .site[class*="site-"]) .main-content {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}
/* The hero is the page's opening statement - the breadcrumb bar above it
   belongs on account pages, not here. */
body.page-web-hosting .main-header,
body.page-reseller-hosting .main-header,
body.page-vps .main-header,
body.page-business-email .main-header,
body.page-website-design .main-header,
body.page-domain-reseller .main-header,
body.page-tos .main-header,
body.page-tz-domains .main-header,
body:has(.app-main .site[class*="site-"]) .main-header {
    display: none;
}

/* ==========================================================================
   Stand-in graphics
   Used only while assets/img/netpoa/*.png are absent - the template swaps to
   the real artwork the moment those files exist.
   ========================================================================== */
.netpoa-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.netpoa-graphic i {
    line-height: 1;
}

/* Hero: a brand-blue disc inside a lighter ring */
.netpoa-graphic-hero {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, var(--brand-primary-lighter, #5d97ff), var(--brand-primary) 58%, var(--brand-secondary) 100%);
    box-shadow: 0 0 0 14px rgba(16, 98, 254, .12), 0 0 0 28px rgba(16, 98, 254, .06);
}
.netpoa-graphic-hero i {
    font-size: clamp(72px, 13vw, 128px);
    opacity: .92;
}
@media (max-width: 991.98px) {
    .netpoa-graphic-hero {
        margin: 0 auto;
        max-width: 260px;
    }
}

/* Migration: old host, arrow, Netpoa */
.netpoa-graphic-migration {
    gap: clamp(14px, 3vw, 32px);
    min-height: 240px;
    padding: 32px;
    border-radius: 10px;
    background: hsla(0, 0%, 100%, .07);
    border: 1px solid hsla(0, 0%, 100%, .14);
}
.netpoa-graphic-migration i {
    font-size: clamp(36px, 6vw, 60px);
}
.netpoa-graphic-migration .netpoa-graphic-arrow {
    font-size: clamp(20px, 3vw, 32px);
    opacity: .6;
}

/* ==========================================================================
   Plan cards
   ========================================================================== */
/* Lagom centres .package. Centred prose is fine for the title and price, but a
   spec list has to be left-aligned or the eye cannot scan down it. */
.site[class*="site-"] .package-features {
    text-align: left;
}

/* ==========================================================================
   FAQ accordion indicator
   --------------------------------------------------------------------------
   Lagom positions an <i> inside .panel-title as the open/close indicator, but
   its open state swaps the glyph to \e955 from Lagom's own icon font - which is
   not the font our chevron uses. Keep the Font Awesome glyph and rotate it.
   ========================================================================== */
.site[class*="site-"] .panel-faq .panel-heading {
    cursor: pointer;
}
.site[class*="site-"] .panel-faq .panel-title > i {
    font-size: 14px;
    transition: transform var(--transition-base, .2s) ease;
}
.site[class*="site-"] .panel-faq .panel-accordion.is-open .panel-title > i {
    transform: rotate(180deg);
}
.site[class*="site-"] .panel-faq .panel-accordion.is-open .panel-title > i:before {
    content: var(--fa);
}
@media (prefers-reduced-motion: reduce) {
    .site[class*="site-"] .panel-faq .panel-title > i {
        transition: none;
    }
}

/* ==========================================================================
   Domain reseller page
   ========================================================================== */
/* Lagom has no m-t-* utility, and the plan card needs air under the tier cards */
.netpoa-m-t {
    margin-top: var(--ui-block-spacing-lg, 32px);
}

/* The tier cards state a fact, they are not something you buy - so they carry
   less weight than the plan card below them. */
.netpoa-tier .package-body {
    padding-top: 0;
}
.netpoa-tier .package-desc {
    margin-bottom: 0;
}
.netpoa-tier .price-amount {
    font-size: var(--font-size-h1, 40px);
}

/* Numbered steps: Lagom draws the connector arrows, we just centre the circle */
.features-steps .feature-number-circled {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Portfolio cards
   ========================================================================== */
.netpoa-work-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}
.netpoa-work-link i {
    font-size: 11px;
}

/* ==========================================================================
   Terms of Service page
   ========================================================================== */
.netpoa-legal-notice {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 24px;
    border: 1px solid var(--gray-lighter-3);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--border-radius-base);
    background: var(--gray-faded);
}
.netpoa-legal-notice-icon {
    color: var(--brand-primary);
    font-size: 20px;
    line-height: 1.4;
}
.netpoa-legal-notice h4 {
    margin: 0 0 6px;
    color: var(--text-heading-color);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
}
.netpoa-legal-notice p {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* Section index: a list of links, numbered because the document is numbered */
.netpoa-toc {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    counter-reset: toc;
    list-style: none;
    border-top: 1px solid var(--gray-lighter-4);
}
@media (min-width: 768px) {
    .netpoa-toc { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
}
@media (min-width: 1200px) {
    .netpoa-toc { grid-template-columns: repeat(3, 1fr); }
}
.netpoa-toc > li {
    counter-increment: toc;
    border-bottom: 1px solid var(--gray-lighter-4);
}
.netpoa-toc > li > a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 13px 4px;
    color: var(--text-body-color);
    text-decoration: none;
}
.netpoa-toc > li > a:before {
    content: counter(toc) ".";
    min-width: 26px;
    color: var(--text-lighter-color);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-sm);
}
.netpoa-toc > li > a:hover,
.netpoa-toc > li > a:focus-visible {
    color: var(--brand-primary);
}
.netpoa-toc-title {
    flex: 1;
}
.netpoa-toc i {
    font-size: 11px;
    color: var(--gray-lighter-2);
}
.netpoa-toc > li > a:hover i {
    color: var(--brand-primary);
}

/* ==========================================================================
   Boxed features on a coloured band
   --------------------------------------------------------------------------
   Lagom assumes a .feature on .section-primary / .section-secondary sits
   directly on the band, so it paints the title and description white. A
   .feature-boxed card is white itself, which leaves white text on white. Put
   the normal ink back - the same way .package cards already work on the
   pricing band.
   ========================================================================== */
.site[class*="site-"] .site-section.section-primary .feature-boxed .feature-title,
.site[class*="site-"] .site-section.section-secondary .feature-boxed .feature-title,
.site[class*="site-"] .site-section.section-primary .feature-boxed .feature-content .feature-title,
.site[class*="site-"] .site-section.section-secondary .feature-boxed .feature-content .feature-title {
    color: var(--text-heading-color);
}
.site[class*="site-"] .site-section.section-primary .feature-boxed .feature-content .feature-desc,
.site[class*="site-"] .site-section.section-secondary .feature-boxed .feature-content .feature-desc,
.site[class*="site-"] .site-section.section-primary .feature-boxed .feature-content p,
.site[class*="site-"] .site-section.section-secondary .feature-boxed .feature-content p {
    color: var(--text-body-color);
}

/* ==========================================================================
   .tz domain rules page
   ========================================================================== */
.netpoa-checker .form-control,
.netpoa-checker .btn { height: 52px; }
.netpoa-checker-hint {
    margin: 10px 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-lighter-color);
}

/* Result panel - state is carried by colour AND by the icon, never colour alone */
.netpoa-result {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 22px;
    padding: 20px 22px;
    border: 1px solid var(--gray-lighter-3);
    border-left: 3px solid var(--gray-lighter-2);
    border-radius: var(--border-radius-base);
    background: var(--gray-faded);
}
.netpoa-result-icon { font-size: 20px; line-height: 1.4; color: var(--gray-lighter-2); }
.netpoa-result h4 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--text-heading-color);
}
.netpoa-result p { margin: 0; font-size: var(--font-size-sm); }
.netpoa-result-actions:not(:empty) { margin-top: 14px; }
.netpoa-result.is-blocked { border-left-color: var(--brand-danger, #e5484d); }
.netpoa-result.is-blocked .netpoa-result-icon { color: var(--brand-danger, #e5484d); }
.netpoa-result.is-clear { border-left-color: var(--brand-success, #30a46c); }
.netpoa-result.is-clear .netpoa-result-icon { color: var(--brand-success, #30a46c); }
.netpoa-result.is-info { border-left-color: var(--brand-primary); }
.netpoa-result.is-info .netpoa-result-icon { color: var(--brand-primary); }

/* Extension table reads as prose, so left-align it and let it wrap rather than
   forcing a horizontal scroll on a phone. */
.netpoa-compare-left {
    min-width: 520px;
}
.netpoa-compare-left th,
.netpoa-compare-left td {
    text-align: left;
    white-space: normal;
}
.netpoa-compare-left thead th { white-space: nowrap; }
.netpoa-compare-left tbody th code {
    padding: 3px 8px;
    border-radius: var(--border-radius-base);
    background: var(--gray-faded);
    border: 1px solid var(--gray-lighter-3);
    color: var(--text-heading-color);
    font-size: 13px;
}
.netpoa-tld-state { display: block; margin-bottom: 6px; }
.netpoa-tld-need { display: block; color: var(--text-body-color); }

/* Browsable reserved list */
.netpoa-list-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}
.netpoa-list-controls .form-control { flex: 1 1 220px; }
.netpoa-list-tabs { display: flex; gap: 8px; }
.netpoa-list-tabs .btn.is-active {
    background: var(--brand-primary);
    color: #fff;
}
.netpoa-list-count {
    margin: 16px 0 10px;
    font-size: var(--font-size-sm);
    color: var(--text-lighter-color);
    text-align: center;
}
.netpoa-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--gray-lighter-3);
    border-radius: var(--border-radius-base);
    background: var(--gray-faded);
}
.netpoa-list-item {
    padding: 4px 10px;
    border: 1px solid var(--gray-lighter-3);
    border-radius: var(--border-radius-base);
    background: #fff;
    font-family: var(--font-family-monospace, monospace);
    font-size: 12.5px;
    color: var(--text-body-color);
}
.netpoa-list-empty {
    margin: 0;
    color: var(--text-lighter-color);
    font-size: var(--font-size-sm);
}

/* Lagom title-cases section headings, which turns ".tz" into ".Tz". The only
   <strong> we put inside a heading is an extension, so undo it there. */
.site[class*="site-"] .section-title strong,
.site[class*="site-"] .banner-title strong {
    text-transform: lowercase;
    font-weight: inherit;
}

/* The caution appended to every blocked checker result - separated from the
   explanation above it, because it is the part that costs money to ignore. */
.netpoa-caution {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-lighter-3);
}
.netpoa-caution strong { color: var(--text-heading-color); }

/* Name, extension and button on one line - the input-group holds two controls
   in its button slot, which is more than Lagom's default expects. */
.netpoa-checker .input-group { flex-wrap: nowrap; }
.netpoa-checker .input-group-btn {
    display: flex;
    align-items: stretch;
    width: auto;
    white-space: nowrap;
}
.netpoa-checker #tz-ext {
    height: 52px;
    width: auto;
    min-width: 104px;
    border-radius: 0;
    border-left: 0;
    padding-right: 28px;
    color: var(--text-heading-color);
    font-weight: var(--font-weight-medium);
}
.netpoa-checker .input-group-btn .btn { border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; }
.netpoa-tld-len { white-space: nowrap; }

@media (max-width: 575.98px) {
    .netpoa-checker .input-group { flex-wrap: wrap; }
    .netpoa-checker .input-group > .form-control { flex: 1 0 100%; border-radius: var(--border-radius-base); }
    .netpoa-checker .input-group-btn { width: 100%; margin-top: 8px; }
    .netpoa-checker #tz-ext {
        flex: 1 1 auto;
        border-left: 1px solid var(--gray-lighter-3);
        border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
    }
}

/* ==========================================================================
   Hero photography
   --------------------------------------------------------------------------
   A photograph runs the full width of the banner with the subject on the right.
   The text side sits over a blurred, whitened portion of the same image, so the
   page keeps its light palette and the body copy stays readable.

   Two layers rather than one: the veil's backdrop-filter can only blur what is
   painted *behind* it, so the photo has to be a separate element underneath.

   The banner falls back to the CSS graphic when no photograph is present, so
   dropping a file into assets/img/netpoa/ is all that is needed to switch.
   ========================================================================== */
.site-banner.has-hero-photo {
    position: relative;
    overflow: hidden;
    /* The photographs are 3:2. A short banner crops so much off the top and
       bottom that whatever the subject is doing - the laptop, the desk - falls
       outside the frame. A floor on the height keeps the crop sane. */
    min-height: 540px;
    display: flex;
    align-items: center;
}
@media (max-width: 991.98px) {
    .site-banner.has-hero-photo { min-height: 0; display: block; }
}
.site-banner.has-hero-photo > .container {
    position: relative;
    z-index: 2;
}

/* the photograph */
.netpoa-hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: 78% 58%;
    background-repeat: no-repeat;
}

/* blur + whiten, fading out before it reaches the subject */
.netpoa-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, .98) 0%,
        rgba(255, 255, 255, .96) 46%,
        rgba(255, 255, 255, .74) 58%,
        rgba(255, 255, 255, .20) 70%,
        rgba(255, 255, 255, 0) 82%
    );
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 52%, rgba(0, 0, 0, .35) 68%, transparent 82%);
    mask-image: linear-gradient(100deg, #000 0%, #000 52%, rgba(0, 0, 0, .35) 68%, transparent 82%);
}

/* The icon stand-in has nothing to do once there is a photograph. Lagom sets
   the graphic's display from a selector this rule cannot outrank cleanly, so
   this is one of the few places !important earns its keep. */
.site-banner.has-hero-photo .banner-graphic,
.site-banner.has-hero-photo .netpoa-graphic { display: none !important; }
.site-banner.has-hero-photo .banner-background { min-height: 380px; }

/* Below the two-column breakpoint the text sits on top of the subject, so the
   veil becomes almost solid and the photo reads as a tint rather than a scene. */
@media (max-width: 991.98px) {
    .netpoa-hero-photo { background-position: 70% 50%; }
    .netpoa-hero-veil {
        background: rgba(255, 255, 255, .93);
        -webkit-mask-image: none;
        mask-image: none;
    }
    .site-banner.has-hero-photo .banner-background { min-height: 0; }
}

/* Lagom's dark mode inverts the ground, so the scrim has to invert with it */
.lagom-dark-mode .netpoa-hero-veil {
    background: linear-gradient(
        100deg,
        rgba(17, 20, 26, .98) 0%,
        rgba(17, 20, 26, .96) 46%,
        rgba(17, 20, 26, .74) 58%,
        rgba(17, 20, 26, .20) 70%,
        rgba(17, 20, 26, 0) 82%
    );
}
@media (max-width: 991.98px) {
    .lagom-dark-mode .netpoa-hero-veil { background: rgba(17, 20, 26, .93); }
}

@media (prefers-reduced-motion: reduce) {
    .netpoa-hero-photo { background-attachment: scroll; }
}