/* ═══════════════════════════════════════════════════════════════════════════
   Site parity — shared chrome and page archetypes

   Ported from https://www.whatsserv.com. Where the site's literal equals a
   brand token from tokens.css, the token is used, so this sheet adds no new
   brand colour.

   ── WHY EVERY NUMBER HERE IS MEASURED ──────────────────────────────────────
   The site's markup carries spacing utilities (pt-120, pb-80, pt-110, mb-50)
   that are defined NOWHERE in its stylesheets. They are inert leftovers from
   the original theme. Copying the class names yields zero padding. Every value
   below was read off the rendered page at 1440x900 instead.

   ── MEASURED REFERENCE (whatsserv.com/features, 1440x900) ──────────────────
     .header-section     h 125   bg linear-gradient(269.94deg …)  = --ws-gradient-header
     .topbar             h  52   padding 14px 0
     .topbar-right a            14px / w600 / #ffffff / heading font
     .header-nav         h  73
     .nav-menu           h  73   bg #ffffff   radius 5px   padding-left 15px
     .nav-wrapper li a   h  73   padding 25px 15px   15px / w500 / #001042
     .logo-wrapper img          rendered 160x70
     footer              h 582   padding-top 100px   bg #008069  = --ws-primary
     .widget-title              20px / w700 / #ffffff
     .footer-widget a           16px / w400 / #00a884  ← 1.62:1, NOT copied (see §4)
     .breadcrumb-area    h 326   padding 130px / 90px  bg linear-gradient(278.54deg …)
     .breadcrumb-content h2     42px / w700 / #ffffff
     .breadcrumb-item           16px / w500 / #ffffff

   ── WEIGHT REMAP ───────────────────────────────────────────────────────────
   Droid Arabic Kufi ships only 400 and 700. The site's declared 500 and 600
   are written here as 400 and 700; declaring them literally would make the
   browser synthesize a weight, which smears Arabic Kufi.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── §1  Header ───────────────────────────────────────────────────────────
   Two tiers inside one <header>: a gradient topbar carrying auth links, above
   a WHITE card holding the logo and nav. This inverts the app's previous
   dark-bar-with-white-links navbar.                                         */

.header-section {
    background: var(--ws-gradient-header);
    position: relative;
    z-index: 100;
}

.topbar {
    padding: 14px 0;
}

.topbar-right a {
    font-family: var(--ws-font-head);
    font-size: 14px;
    font-weight: 700;              /* site declares 600 */
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease-in;
}

.topbar-right a + a {
    margin-inline-start: 20px;
}

.topbar-right a:hover {
    color: #fff;
    opacity: 0.85;
}

.header-nav {
    padding-bottom: 0;
}

.nav-menu {
    background-color: #fff;
    border-radius: var(--ws-radius-btn);   /* measured 5px */
    padding-left: 15px;
    padding-right: 15px;
}

.logo-wrapper img.logo {
    width: 160px;
    height: 70px;
    object-fit: contain;
}

.nav-wrapper nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.nav-wrapper nav ul li a {
    display: block;
    padding: 25px 15px;
    font-family: var(--ws-font-head);
    font-size: 15px;
    font-weight: 400;              /* site declares 500 */
    color: var(--ws-heading);
    text-decoration: none;
    transition: all 0.3s ease-in;
}

.nav-wrapper nav ul li a:hover,
.nav-wrapper nav ul li a.active {
    color: var(--ws-primary);
}

/* Below 992px the nav column is hidden and the toggle takes over. The app
   keeps Bootstrap's collapse for the panel itself — see §2. */
@media (max-width: 991.98px) {
    .nav-menu {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .nav-wrapper nav ul {
        display: block;
    }

    .nav-wrapper nav ul li a {
        padding: 12px 4px;
    }
}

/* ─── §2  Header, mobile ───────────────────────────────────────────────────
   The site ships a bespoke off-canvas panel. The app keeps Bootstrap's
   collapse behind the same visual treatment: navigation that works is worth
   more than a menu animation nobody can see side by side (research.md D2,
   pre-approved). The toggle sits inside the white card, so it needs the card's
   foreground colours rather than the navbar-dark defaults. */

.nav-menu .navbar-toggler {
    border-color: var(--ws-border);
    padding: 6px 10px;
}

.nav-menu .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--ws-primary-rgb), 0.2);
}

.nav-menu .navbar-toggler-icon {
    /* Bootstrap's icon is a light SVG for dark bars; darken it for the white card. */
    filter: invert(1) grayscale(1) brightness(0.35);
}

/* ─── §3  Breadcrumb banner ────────────────────────────────────────────────
   Used by 7 of the site's 9 pages. Replaces the app's .page-header.          */

.breadcrumb-area {
    background: var(--ws-gradient-primary);
    padding-top: 130px;
    padding-bottom: 90px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.breadcrumb-content h2 {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
}

.breadcrumb-area .breadcrumb {
    display: flex;
    justify-content: center;
    background: transparent;
    padding: 0;
    /* Bootstrap's default 1rem is KEPT deliberately. On the site this margin
       escapes .breadcrumb-content and adds 16px to the banner's height; zeroing
       it made the banner 14px short of the site's 326px. */
    margin-bottom: 1rem;
}

.breadcrumb-area .breadcrumb-item,
.breadcrumb-area .breadcrumb-item a {
    font-size: 16px;
    font-weight: 400;              /* site declares 500 */
    color: #fff;
    text-decoration: none;
}

.breadcrumb-area .breadcrumb-item.active {
    opacity: 0.8;
}

.breadcrumb-area .breadcrumb-item + .breadcrumb-item::before {
    color: #fff;
    opacity: 0.7;
}

@media (max-width: 991.98px) {
    .breadcrumb-area {
        padding-top: 90px;
        padding-bottom: 60px;
    }

    .breadcrumb-content h2 {
        font-size: calc(1.5rem + 1.3vw);
    }
}

/* ─── §4  Footer ───────────────────────────────────────────────────────────
   Measured: solid --ws-primary (#008069), padding-top 100px.

   DELIBERATE DEVIATION: the site sets footer links to #00a884 on that
   background, which measures 1.62:1 — well under WCAG AA. This is the same
   failure 008 found and fixed for the footer headings. Links are white here
   (4.89:1). Matching the layout does not extend to shipping a contrast bug. */

.footer-parity {
    background-color: var(--ws-primary);
    padding-top: 100px;
    color: #fff;
}

.footer-parity .widget-title {
    font-family: var(--ws-font-head);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px;
}

/* Pure white, no opacity. White on --ws-primary measures 4.89:1 — only just
   above AA — so any transparency drops it below: 0.92 gives 4.39, 0.85 gives
   3.99. There is no headroom for "softening" text on this background. */
.footer-parity .footer-widget p,
.footer-parity .footer-widget li {
    color: #fff;
}

.footer-parity .footer-widget a {
    font-size: 16px;
    font-weight: 400;
    color: #fff;                    /* NOT the site's #00a884 — see note above */
    text-decoration: none;
    transition: all 0.3s ease-in;
}

.footer-parity .footer-widget a:hover {
    color: #fff;
    opacity: 0.8;
}

/* The chip is DARK, measured #075947 on the site (= --ws-primary-deep), not
   white. visa.png is a pure-white logo on transparent, so a white chip renders
   it invisible — which is exactly what happened before this was measured. */
.footer-parity .payment-methods span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ws-primary-deep);
    border-radius: var(--ws-radius-sm);
    padding: 6px 10px;
}

.footer-parity .payment-methods img {
    height: 22px;
    width: auto;
    object-fit: contain;
}

.footer-parity .footer-bottom-parity {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 60px;
    padding: 20px 0;
    color: #fff;
}

.footer-parity .social-links-parity a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ws-radius-circle);
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    margin-inline-end: 8px;
    transition: all 0.3s ease-in;
}

.footer-parity .social-links-parity a:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 991.98px) {
    .footer-parity {
        padding-top: 60px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §5  Page archetypes

   The site composes 8 of its 9 inner pages from a banner plus ONE of these.
   Defined once here; a page may not fork its own copy.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── §5.1  Generic content — the site's .hm2-feature-area ─────────────────
   Used by /features, /faq, /about, /privacypolicy, /useragreement, and by the
   three app pages that have no site counterpart. Only a background wash of its
   own; the cards inside reuse .feature-item from the home page rather than
   defining a parallel component. */

.content-area {
    /* Token-driven, not a hardcoded near-white wash: a literal rgba(246,246,246)
       stays light in dark mode and lifts the whole page. */
    background-color: var(--ws-bg-light);
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    z-index: 1;
}

.content-area .content-card {
    background: var(--ws-surface);
    border-radius: var(--ws-radius-card);
    box-shadow: var(--ws-shadow-deep);
    padding: 30px 30px 25px;
    height: 100%;
    transition: all 0.3s ease-in;
}

.content-area .content-card:hover {
    box-shadow: var(--ws-shadow-primary);
}

.content-area .content-card + .content-card {
    margin-top: 20px;
}

@media (max-width: 991.98px) {
    .content-area {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* ─── §5.2  Card grid — the site's .hm-blog-grids / .blog-card ─────────────
   Used by /accounts. In the app that page lists REAL accounts, so this styles
   the card only; the data binding and empty state are untouched. */

.card-grid-area {
    padding-top: 80px;
    padding-bottom: 80px;
}

.grid-card {
    padding: 30px;
    background: var(--ws-surface);
    border-radius: var(--ws-radius-card);
    box-shadow: var(--ws-shadow-deep);
    height: 100%;
    transition: all 0.3s ease-in;
}

.grid-card:hover {
    transform: translateY(-2px);          /* the site's restrained motion */
    box-shadow: var(--ws-shadow-primary);
}

.grid-card :is(h3, h4, h5) {
    transition: all 0.3s ease-in;
}

.grid-card:hover :is(h3, h4, h5) {
    color: var(--ws-primary);
}

.grid-card .category-btn {
    padding: 8px 30px;
    font-weight: 400;                     /* site declares 500 */
    font-size: 14px;
    background: var(--ws-primary);
    color: #fff;
    border-radius: 0 0 0 var(--ws-radius-btn);
}

/* ─── §5.3  Pricing — the site's .pricing-tab-section ──────────────────────
   The cards ride UP over the banner, the same trick the home page's promo
   strip uses over the hero: negative margin plus compensating padding. */

.pricing-area {
    margin-top: -120px;
    padding-top: 220px;
    padding-bottom: 100px;
    position: relative;
    z-index: 2;
}

@media (max-width: 991.98px) {
    .pricing-area {
        margin-top: -80px;
        padding-top: 150px;
        padding-bottom: 60px;
    }
}

/* ─── §5.4  Contact — the site's .hm-contact-area ──────────────────────────
   The site defines no rules of its own for this; it composes shared
   primitives. /contact is also the one site page that opens with the hero
   rather than the breadcrumb banner. */

.contact-area {
    padding-top: 80px;
    padding-bottom: 80px;
}

.contact-area .contact-card {
    background: var(--ws-surface);
    border-radius: var(--ws-radius-card);
    box-shadow: var(--ws-shadow-deep);
    padding: 30px;
    height: 100%;
}

.contact-area .form-control {
    border-radius: var(--ws-radius-sm);
    padding: 12px 16px;
}

@media (max-width: 991.98px) {
    .contact-area {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}