/* ============================================================
   Trinico brand skin for every WHMCS vendor store landing page.
   Added 2026-08-09 by the Website Design Team.

   ONE file for all of them, deliberately. Each vendor page ships
   its own brand: SiteLock navy and pale yellow, 360 Monitoring
   purple and periwinkle, NordVPN, SocialBee, Symantec and the
   rest. Ten separate stylesheets would drift within a month.

   SCOPE IS SAFE, CHECKED BEFORE WRITING. `.landing-page` appears
   on the vendor store pages only. The home page, /website-design,
   /website-builder, /contact.php, /store/cpanel-hosting and
   /store/microsoft-365 all carry none of it, so nothing we
   designed ourselves is touched. SocialBee is the one exception:
   it wraps in `.social-bee`, so both selectors are carried
   throughout.

   The page markup and its styling live in the PARENT theme
   (templates/nexus/css/store.css), which is never edited (Law 1).
   This is a child-theme override loaded after it.

   Brand tokens only: sky #44A8DA, cobalt #1B77C9, green #ABC441,
   orange #FF6600, ink #10314b. No purple, no purple-to-blue.
   ============================================================ */

/* ---------- 1. typography ---------- */
.landing-page, .landing-page h1, .landing-page h2, .landing-page h3,
.landing-page h4, .landing-page h5, .landing-page h6, .landing-page p,
.landing-page a, .landing-page span, .landing-page li, .landing-page td,
.landing-page th, .landing-page label, .landing-page .btn,
.social-bee, .social-bee h1, .social-bee h2, .social-bee h3,
.social-bee h4, .social-bee p, .social-bee a, .social-bee span,
.social-bee li, .social-bee .btn {
    font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
}

.landing-page h1, .landing-page h2,
.social-bee h1, .social-bee h2 {
    color: #10314b !important;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.18;
}
.landing-page h3, .landing-page h4,
.social-bee h3, .social-bee h4 {
    color: #10314b !important;
    font-weight: 600;
    line-height: 1.3;
}
.landing-page p, .social-bee p {
    color: #44566b;
    line-height: 1.65;
}

/* Vendors shout. We do not. */
.landing-page .btn, .landing-page .nav-link, .landing-page .text-uppercase,
.landing-page .p-eyebrow, .landing-page h1, .landing-page h2, .landing-page h3,
.social-bee .btn, .social-bee h1, .social-bee h2, .social-bee h3 {
    text-transform: none !important;
}

/* ---------- 2. buttons ---------- */
/* shape and weight for every button on these pages */
.landing-page .btn, .social-bee .btn {
    font-weight: 600;
    letter-spacing: 0;
    border-radius: 30px;
    padding: 12px 26px;
    border-width: 2px;
    transition: background-color .16s ease, border-color .16s ease,
                color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.landing-page .btn:focus-visible, .social-bee .btn:focus-visible {
    outline: 3px solid #44A8DA;
    outline-offset: 3px;
}

/* the action button, whatever each vendor happens to call it */
.landing-page .btn-primary, .landing-page .btn-success, .landing-page .btn-buy,
.landing-page .btn-signup, .landing-page .btn-order-now, .landing-page .order-btn,
.landing-page .btn-get-nord, .landing-page .btn-get-monthly,
.landing-page .btn-get-annually, .landing-page .btn-get-deal,
.landing-page .highlight1, .landing-page .highlight2,
.landing-page .btn-purple, .landing-page .btn-dark,
.social-bee .btn-primary, .social-bee .btn-signup {
    background-color: #1B77C9 !important;
    border-color: #1B77C9 !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(27, 119, 201, .18);
}
.landing-page .btn-primary:hover, .landing-page .btn-success:hover,
.landing-page .btn-buy:hover, .landing-page .btn-signup:hover,
.landing-page .btn-order-now:hover, .landing-page .order-btn:hover,
.landing-page .btn-get-nord:hover, .landing-page .btn-get-monthly:hover,
.landing-page .btn-get-annually:hover, .landing-page .btn-get-deal:hover,
.landing-page .highlight1:hover, .landing-page .highlight2:hover,
.social-bee .btn-primary:hover, .social-bee .btn-signup:hover {
    background-color: #15619f !important;
    border-color: #15619f !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(27, 119, 201, .28);
}

/* the quieter action, so two buttons never compete */
.landing-page .btn-default, .landing-page .btn-secondary,
.landing-page .btn-learn-more, .landing-page .btn-outline,
.social-bee .btn-default {
    background-color: transparent !important;
    border-color: #1B77C9 !important;
    color: #1B77C9 !important;
    box-shadow: none;
}
.landing-page .btn-default:hover, .landing-page .btn-secondary:hover,
.landing-page .btn-learn-more:hover, .landing-page .btn-outline:hover,
.social-bee .btn-default:hover {
    background-color: #1B77C9 !important;
    color: #fff !important;
}
/* a btn-default that is also the real action stays solid */
.landing-page .btn-default.order-btn, .landing-page .btn-default.btn-get-nord,
.landing-page .btn-default.btn-get-monthly, .landing-page .btn-default.btn-get-annually,
.landing-page .btn-default.btn-signup, .landing-page .btn-default.btn-buy {
    background-color: #1B77C9 !important;
    color: #fff !important;
}
/* link-style buttons keep their shape */
.landing-page .btn-link, .social-bee .btn-link {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: #1B77C9 !important;
}

/* ---------- 3. cards and panels ---------- */
.landing-page .card, .landing-page .panel, .social-bee .card {
    background: #fff;
    border: 1px solid #e3ecf4 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(16, 49, 75, .06);
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.landing-page .card:hover, .social-bee .card:hover {
    transform: translateY(-3px);
    border-color: #bcdcf0;
    box-shadow: 0 10px 26px rgba(16, 49, 75, .12);
}
.landing-page .card-header, .landing-page .panel-heading {
    background: #fff !important;
    border-bottom: 1px solid #eef4f9 !important;
    padding: 18px 20px !important;
}
.landing-page .card-body, .landing-page .panel-body {
    padding: 18px 20px !important;
}

/* ---------- 4. pricing ---------- */
.landing-page .price, .landing-page .plan-price, .landing-page .pricing-price,
.landing-page [class*="-price"] {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    color: #10314b;
    letter-spacing: -0.02em;
}
.landing-page table th {
    background: #10314b;
    color: #fff;
    font-weight: 600;
    border: 0;
    padding: 13px 14px;
}
.landing-page table td {
    padding: 12px 14px;
    border-color: #eef4f9;
}
.landing-page table tbody tr:nth-child(odd) td {
    background: #f7fbfd;
}

/* ---------- 5. rhythm and containers ---------- */
.landing-page .container, .social-bee .lp-container {
    max-width: 1140px;
}
.landing-page section, .social-bee section {
    padding-top: 56px;
    padding-bottom: 56px;
}

/* ---------- 6. small screens ---------- */
@media (max-width: 767px) {
    .landing-page h1, .social-bee h1 { font-size: 30px !important; }
    .landing-page h2, .social-bee h2 { font-size: 24px !important; }
    .landing-page .btn, .social-bee .btn { width: 100%; max-width: 340px; }
    .landing-page section, .social-bee section {
        padding-top: 38px;
        padding-bottom: 38px;
    }
}

/* ---------- 7. the three vendor CTAs the class list above missed ----------
   Found by sweeping all ten pages for surviving off-brand button colours, not
   by guessing: SiteLock navy #2B5580 on .btn-block, SocialBee yellow #F3C500 on
   .small-btn, and a bare .btn in Symantec blue #327BA7 on the SSL page. Each is
   the primary action on its page. The :not() guards keep the quiet buttons
   quiet. */
.landing-page .btn-block:not(.btn-default):not(.btn-link):not(.btn-secondary),
.social-bee .small-btn,
.landing-page.ssl .btn:not(.btn-default):not(.btn-link):not(.btn-secondary):not(.btn-block) {
    background-color: #1B77C9 !important;
    border-color: #1B77C9 !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(27, 119, 201, .18);
}
.landing-page .btn-block:not(.btn-default):not(.btn-link):not(.btn-secondary):hover,
.social-bee .small-btn:hover,
.landing-page.ssl .btn:not(.btn-default):not(.btn-link):not(.btn-secondary):not(.btn-block):hover {
    background-color: #15619f !important;
    border-color: #15619f !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(27, 119, 201, .28);
}

/* ---------- 8. one FAQ per page ----------
   CEO rule, 9 Aug 2026: a page carries one FAQ, in our format. Several vendor
   templates ship their own alongside ours, under a handful of different class
   names (.feature.faq, .content-block.faq, .faqs, .faq-block). Ours is the one
   that stays: it is written in our voice, answers the buying questions rather
   than defining features, and it is what drives the FAQPage schema from
   mod_trinico_seo.faq_json.
   Any vendor question worth keeping is merged into faq_json first, so nothing
   is lost and the schema still matches what a visitor can see (SEO Rule 9). */
.landing-page .feature.faq,
.landing-page .content-block.faq,
.landing-page .content-block.faqs,
.landing-page .faqs,
.landing-page .faq,
.landing-page .faq-block,
.social-bee .content-block.faq {
    display: none !important;
}