/*
 * 一枝红杏 2026 (yzhx2026) - brand layer for Lagom 2, style "yzhx2026".
 * Loaded by includes/hooks/yzhx_style_assets.php (ClientAreaHeadOutput, only while this style is active or
 * ?rsstyle-previewed) right after includes/head.tpl, i.e. after theme.css (+ site.css) and custom.css, so it wins
 * over the stock CSS and over anything the Style Manager injects. The hook links yzhx-fonts.css first, then this
 * file, each with ?v=<md5 of the file content>, so every edit gets a new URL (no CDN purge needed).
 * Colours/radii/fonts that Lagom exposes as variables live in
 * assets/css/vars/** (generated by tools/yzhx/build_style.py); this file only holds what variables cannot
 * express. Everything is scoped to body.lagom-yzhx (bodyClass from style.php) so switching the style back to
 * "Default" in RS Themes removes it completely. Dark mode is not styled (keep the mode switcher disabled).
 * Design basis: /workspace/yzhx-home-redesign/mockup.html (approved), PLAN section 2.3; loading: round 3 PLAN.
 */

/* 1. Fonts (self-hosted yzhx-fonts.css, generated by tools/yzhx/build_fonts.py, linked by the hook) + variable guard */
:root {
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    --yz-head: "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "STSong", serif;
    --yz-label: "Inter", var(--font-family-base);
    --yz-primary: #b7102a;
    --yz-primary-2: #db313f;
    --yz-primary-dark: #960e23;
    --yz-surface: #fcf9f8;
    --yz-surface-low: #f6f3f2;
    --yz-ink: #1c1b1b;
    --yz-ink-2: #5b403f;
    --yz-muted: #736c6f;
    --yz-line: #ece6e5;
    --yz-line-2: #e4bebc;
    --yz-save: #2c694e;
    --yz-save-bg: #e8f2ec;
}

body.lagom-yzhx {
    background: var(--body-bg);
    -webkit-font-smoothing: antialiased;
}

/* 2. Headings: serif (h4-h6 stay sans for tables/forms) */
body.lagom-yzhx h1,
body.lagom-yzhx h2,
body.lagom-yzhx h3,
body.lagom-yzhx .h1,
body.lagom-yzhx .h2,
body.lagom-yzhx .h3,
body.lagom-yzhx .main-header-title,
body.lagom-yzhx .section-title,
body.lagom-yzhx .panel-title,
body.lagom-yzhx .package-title,
body.lagom-yzhx .banner-title,
body.lagom-yzhx .login-title,
body.lagom-yzhx .modal-title,
body.lagom-yzhx .tile-title,
body.lagom-yzhx .app-nav-menu .menu-primary > li > a {
    font-family: var(--yz-head);
    letter-spacing: .02em;
}

/* 3. Header: warm translucent bar, serif primary links, Login as ghost pill */
body.lagom-yzhx .app-nav {
    box-shadow: none;
}
body.lagom-yzhx .app-nav .app-nav-header,
body.lagom-yzhx .app-nav .app-nav-menu {
    background: var(--yz-surface);
}
@media (min-width: 992px) {
    /* backdrop-filter only on desktop: on mobile it would become the containing block of the off-canvas menu */
    body.lagom-yzhx .app-nav .app-nav-header,
    body.lagom-yzhx .app-nav .app-nav-menu {
        background: rgba(252, 249, 248, .85);
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
    }
}
body.lagom-yzhx .app-nav-menu .menu-primary > li > a {
    font-size: 15px;
    color: var(--yz-ink);
}
body.lagom-yzhx .app-nav-menu .menu-primary > li > a:hover,
body.lagom-yzhx .app-nav-menu .menu-primary > li > a:focus,
body.lagom-yzhx .app-nav-menu .menu-primary > li.active > a {
    color: var(--yz-primary);
}
body.lagom-yzhx .top-nav > li[menuitemname="Login"] > a {
    border: 1.5px solid rgba(228, 190, 188, .7);
    border-radius: 999px;
    padding: 6px 16px;
    font-family: var(--yz-label);
    font-weight: 600;
    color: var(--yz-ink);
    background: transparent;
}
body.lagom-yzhx .top-nav > li[menuitemname="Register"] > a {
    border-radius: 999px;
    padding: 6px 16px;
    font-family: var(--yz-label);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, var(--yz-primary), var(--yz-primary-2));
}

/* 4. Buttons: pills (radius via vars), label font, red gradient primary */
body.lagom-yzhx .btn {
    font-family: var(--yz-label);
    font-weight: 600;
}
body.lagom-yzhx .btn.btn-primary:not(.btn-primary-outline):not(.btn-primary-faded) {
    background: linear-gradient(90deg, var(--yz-primary), var(--yz-primary-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(183, 16, 42, .45);
    transition: transform .15s, box-shadow .15s, background .15s;
}
body.lagom-yzhx .btn.btn-primary:not(.btn-primary-outline):not(.btn-primary-faded):hover,
body.lagom-yzhx .btn.btn-primary:not(.btn-primary-outline):not(.btn-primary-faded):focus {
    background: linear-gradient(90deg, var(--yz-primary-dark), var(--yz-primary));
    border-color: transparent;
    color: #fff;
}
body.lagom-yzhx .btn.btn-primary:not(.btn-primary-outline):not(.btn-primary-faded):not(.disabled):not([disabled]):hover {
    transform: translateY(-1px);
}
body.lagom-yzhx .btn.btn-default,
body.lagom-yzhx .btn.btn-light-outline,
body.lagom-yzhx .btn.btn-primary-outline {
    border: 1.5px solid var(--yz-line-2);
    background: transparent;
    color: var(--yz-ink);
}
body.lagom-yzhx .btn.btn-primary-outline {
    color: var(--yz-primary);
}
body.lagom-yzhx .btn.btn-default:hover,
body.lagom-yzhx .btn.btn-light-outline:hover,
body.lagom-yzhx .btn.btn-primary-outline:hover {
    border-color: var(--yz-primary);
    background: transparent;
    color: var(--yz-primary);
}
body.lagom-yzhx .btn.btn-primary-faded {
    background: #fdf1f2;
    border-color: transparent;
    color: var(--yz-primary);
}
body.lagom-yzhx .btn.btn-primary-faded:hover {
    background: #fbe4e6;
    color: var(--yz-primary-dark);
}

/* 5. Blocks: hairline borders, featured package, green pills */
body.lagom-yzhx .panel,
body.lagom-yzhx .package,
body.lagom-yzhx .tile,
body.lagom-yzhx .login-wrapper .login-body,
body.lagom-yzhx .list-group,
body.lagom-yzhx .table-container {
    border-color: var(--yz-line);
}
body.lagom-yzhx .package.package-featured {
    border-color: var(--yz-primary);
}
body.lagom-yzhx .label-corner.label-primary {
    background: var(--yz-primary);
    color: #fff;
}
body.lagom-yzhx .label-success,
body.lagom-yzhx .label-save,
body.lagom-yzhx .label-savings {
    border-radius: 999px;
    font-family: var(--yz-label);
}
body.lagom-yzhx .label-save,
body.lagom-yzhx .label-savings {
    background: var(--yz-save-bg);
    color: var(--yz-save);
}

/* 6. Site banners outside the homepage (MarketConnect store pages): drop Lagom's blue isometric art */
body.lagom-yzhx:not(.page-homepage) .main-banner .banner-svg,
body.lagom-yzhx:not(.page-homepage) .banner-background .banner-shape {
    display: none;
}
body.lagom-yzhx:not(.page-homepage) .main-banner {
    background: var(--gray-faded);
}

/* 7. Login page (kept clean: no hero image) */
body.lagom-yzhx .login-title {
    font-weight: 700;
}
body.lagom-yzhx .login .btn-block {
    border-radius: 999px;
}

/* 8. Cart / store */
body.lagom-yzhx .package .price .price-amount {
    font-family: var(--yz-label);
    font-weight: 800;
    letter-spacing: -.02em;
}
body.lagom-yzhx .package .price .price-cycle {
    font-family: var(--yz-label);
    color: var(--yz-muted);
}
body.lagom-yzhx .package-footer .btn {
    border-radius: 999px;
}
/* configureproduct: stock tpl prints a placeholder "-" under the cheapest cycle; hide it, keep the row height
   (round 2 PLAN §3; without :has() support the "-" simply stays) */
body.lagom-yzhx.page-order #sectionCycles .check-cycle .check-subtitle:not(:has(.label-save)) {
    visibility: hidden;
}

/* 9. Footer bottom bar (Lagom .main-footer). With the brand block (.yz-footer, core/layouts/footer/default/
      footer.tpl) present, the WHMCS copyright line is replaced by the brand line - never hidden otherwise. */
body.lagom-yzhx .main-footer {
    background: var(--yz-surface);
    border-top: 0;
}
body.lagom-yzhx .main-footer .footer-bottom {
    background: var(--yz-surface);
    font-size: 13px;
    color: var(--yz-muted);
}
body.lagom-yzhx .yz-footer ~ .main-footer .footer-copyright {
    display: none;
}
body.lagom-yzhx .yz-footer ~ .main-footer .footer-bottom .container {
    justify-content: center;
}

/* 10. Brand footer block (markup: core/layouts/footer/default/footer.tpl, rendered only while this style is active;
       rules from mockup footer{...}) */
body.lagom-yzhx .yz-footer {
    margin-top: 96px;
    border-top: 1px solid rgba(28, 27, 27, .05);
    background: var(--yz-surface);
}
body.lagom-yzhx .yz-footer > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-top: 44px;
    padding-bottom: 44px;
}
body.lagom-yzhx .yz-footer > .container:before,
body.lagom-yzhx .yz-footer > .container:after {
    /* Bootstrap clearfix pseudo-elements would become flex items and break space-between */
    display: none;
}
body.lagom-yzhx .yz-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.lagom-yzhx .yz-footer-brand img {
    width: 28px;
    height: 28px;
}
body.lagom-yzhx .yz-footer-brand b {
    font-family: var(--yz-head);
    color: var(--yz-primary);
    font-size: 20px;
    letter-spacing: .1em;
}
body.lagom-yzhx .yz-footer p {
    font-size: 13.5px;
    color: var(--yz-ink-2);
    margin: 10px 0 0;
}
body.lagom-yzhx .yz-footer small {
    display: block;
    font-family: var(--yz-label);
    font-size: 12px;
    opacity: .45;
    margin-top: 4px;
}
body.lagom-yzhx .yz-footer nav {
    display: flex;
    gap: 36px;
    align-items: center;
    font-family: var(--yz-label);
    font-size: 14px;
}
body.lagom-yzhx .yz-footer nav a {
    color: rgba(28, 27, 27, .6);
}
body.lagom-yzhx .yz-footer nav a:hover {
    color: var(--yz-primary);
    text-decoration: none;
}

/* 11. Anchor offset for the sticky nav (homepage sections) */
#plans,
#faq {
    scroll-margin-top: 96px;
}

/* Mobile */
@media (max-width: 767px) {
    body.lagom-yzhx .top-nav > li[menuitemname="Login"] > a,
    body.lagom-yzhx .top-nav > li[menuitemname="Register"] > a {
        padding: 4px 12px;
        font-size: 13px;
    }
    body.lagom-yzhx .yz-footer {
        margin-top: 60px;
    }
    body.lagom-yzhx .yz-footer > .container {
        flex-direction: column;
        text-align: center;
    }
    body.lagom-yzhx .yz-footer-brand {
        justify-content: center;
    }
    body.lagom-yzhx .yz-footer nav {
        gap: 24px;
    }
}