/* =========================================================
   ISO9001.hk shared site styles (V0.2)
   Used by every ISO 9001 SEO subpage. index.html keeps its own
   inline copy of the base rules (unchanged, already indexed by
   Google) — this file mirrors those values so new pages look
   like part of the same site, plus adds SEO-page-only components.
   ========================================================= */

:root {
    --primary-color: #5D5CDE;
    --light-bg: #FFFFFF;
    --dark-bg: #181818;
    --text-light: #333333;
    --text-dark: #FFFFFF;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--light-bg);
    color: var(--text-light);
    transition: background-color 0.3s, color 0.3s;
}

body.dark {
    background-color: var(--dark-bg);
    color: var(--text-dark);
}

/* Navigation (identical to homepage) */
.navbar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

body.dark .navbar {
    background-color: #1a1a1a !important;
}

.navbar-brand {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color) !important;
}

.navbar-nav .nav-link {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 15px;
    color: #333 !important;
    transition: color 0.3s;
}

body.dark .navbar-nav .nav-link {
    color: #fff !important;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
}

.navbar-nav .nav-link.active {
    color: var(--primary-color) !important;
}

/* Section title / table / FAQ / process-step / footer (identical to homepage) */
.section-title {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.section-subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: #666;
}

body.dark .section-subtitle {
    color: #aaa;
}

.table {
    background: white;
    border-radius: 10px;
    overflow: hidden;
}

body.dark .table {
    background: #2a2a2a;
    color: #fff;
}

.table th {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
}

body.dark .table-striped tbody tr:nth-of-type(odd) {
    background-color: #333;
}

.faq-item {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
}

body.dark .faq-item {
    background: #2a2a2a;
}

.faq-item h5 {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
}

.process-step {
    background: white;
    border-left: 4px solid var(--primary-color);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

body.dark .process-step {
    background: #2a2a2a;
}

.process-step h5 {
    color: var(--primary-color);
    font-weight: 600;
}

.badge-primary {
    background-color: var(--primary-color);
}

.btn-primary {
    background: var(--primary-color);
    border: none;
    padding: 12px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s;
}

.btn-primary:hover {
    background: #4a49c5;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(93, 92, 222, 0.4);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

footer {
    background: #1a1a1a;
    color: white;
    padding: 30px 0;
    text-align: center;
}

/* =========================================================
   Quick Check components (mirrors index.html's V0.1 block)
   ========================================================= */
.qc-topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1040;
    background: linear-gradient(135deg, var(--primary-color), #4a49c5);
    color: #fff;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 0.95rem;
}

.qc-topbar-text {
    font-weight: 600;
}

.qc-topbar-btn {
    background: #fff;
    color: var(--primary-color) !important;
    padding: 6px 18px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s;
    cursor: pointer;
}

.qc-topbar-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
    color: #4a49c5 !important;
}

.qc-card {
    background: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 40px 30px;
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 10px 30px rgba(93, 92, 222, 0.15);
}

body.dark .qc-card {
    background: #2a2a2a;
}

.qc-card .qc-price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 10px 0 0;
}

.qc-card .qc-price-note {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.qc-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 20px 0 25px;
}

.qc-card ul li {
    padding: 6px 0;
    font-size: 1.05rem;
}

.qc-card ul li i {
    color: #28a745;
    margin-right: 10px;
}

.qc-card .btn {
    cursor: pointer;
}

.qc-trust {
    font-size: 0.85rem;
    color: #888;
    margin-top: 12px;
}

body.dark .qc-trust {
    color: #aaa;
}

.qc-disclaimer {
    font-size: 0.8rem;
    color: #999;
    max-width: 650px;
    margin: 20px auto 0;
    line-height: 1.6;
}

body.dark .qc-disclaimer {
    color: #888;
}

.qc-callout {
    background: #f0f0ff;
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 20px 25px;
    margin: 30px 0;
}

body.dark .qc-callout {
    background: #24244a;
}

.qc-callout h5 {
    color: var(--primary-color);
    margin-bottom: 8px;
    font-weight: 600;
}

.qc-callout .btn {
    cursor: pointer;
}

.qc-final-cta {
    background: linear-gradient(135deg, var(--primary-color), #3d3dbe);
    color: #fff;
    padding: 60px 15px;
    text-align: center;
}

.qc-final-cta h2 {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.qc-final-cta p {
    font-size: 1.1rem;
    margin-bottom: 10px;
    opacity: 0.95;
}

.qc-final-cta .qc-price {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 15px 0;
}

.qc-final-cta .btn-qc-white {
    background: #fff;
    color: var(--primary-color);
    font-weight: 700;
    padding: 14px 45px;
    border-radius: 8px;
    border: none;
    font-size: 1.1rem;
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.qc-final-cta .btn-qc-white:hover {
    background: #f0f0f0;
    color: #4a49c5;
    transform: translateY(-2px);
}

/* =========================================================
   SEO page components (new in V0.2)
   ========================================================= */
#pageTop {
    margin-top: 76px;
}

.qc-breadcrumb {
    font-size: 0.9rem;
    color: #888;
    padding: 18px 0 0;
}

.qc-breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
}

.qc-breadcrumb a:hover {
    text-decoration: underline;
}

.qc-breadcrumb span[aria-current] {
    color: #888;
}

.qc-page-hero {
    background: linear-gradient(135deg, var(--primary-color), #3d3dbe);
    color: #fff;
    padding: 20px 15px 55px;
}

.qc-page-hero .qc-breadcrumb {
    color: rgba(255,255,255,0.75);
}

.qc-page-hero .qc-breadcrumb a {
    color: #fff;
}

.qc-page-hero h1 {
    font-size: 2.6rem;
    font-weight: 700;
    margin: 15px 0 15px;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.25);
}

.qc-page-hero .qc-page-hero-sub {
    font-size: 1.2rem;
    max-width: 780px;
    opacity: 0.95;
}

.qc-meta-row {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 18px;
}

.qc-content-section {
    padding: 55px 0;
    background: #fff;
}

body.dark .qc-content-section {
    background: var(--dark-bg);
}

.qc-content-section.qc-alt {
    background: #f8f9fa;
}

body.dark .qc-content-section.qc-alt {
    background: #222;
}

article h2 {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 45px 0 18px;
}

article h2:first-of-type {
    margin-top: 0;
}

article h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 28px 0 12px;
    color: #333;
}

body.dark article h3 {
    color: #eee;
}

article p, article li {
    font-size: 1.08rem;
    line-height: 1.8;
}

.qc-answer-box {
    background: #f0f0ff;
    border: 1px solid #d9d9ff;
    border-radius: 12px;
    padding: 25px 28px;
    font-size: 1.12rem;
    line-height: 1.75;
    margin-bottom: 10px;
}

body.dark .qc-answer-box {
    background: #24244a;
    border-color: #34346a;
}

.qc-checklist {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.qc-checklist li {
    padding: 10px 0 10px 32px;
    position: relative;
    border-bottom: 1px solid #eee;
}

body.dark .qc-checklist li {
    border-bottom-color: #333;
}

.qc-checklist li:last-child {
    border-bottom: none;
}

.qc-checklist li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #28a745;
    position: absolute;
    left: 0;
    top: 10px;
}

.qc-mistakes {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.qc-mistakes li {
    padding: 10px 0 10px 32px;
    position: relative;
    border-bottom: 1px solid #eee;
}

body.dark .qc-mistakes li {
    border-bottom-color: #333;
}

.qc-mistakes li:last-child {
    border-bottom: none;
}

.qc-mistakes li::before {
    content: "\f06a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #e0a800;
    position: absolute;
    left: 0;
    top: 10px;
}

.qc-consultant-note {
    background: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    padding: 25px 28px;
    margin: 30px 0;
    box-shadow: 0 3px 15px rgba(93, 92, 222, 0.1);
}

body.dark .qc-consultant-note {
    background: #2a2a2a;
}

.qc-consultant-note h4 {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.qc-consultant-note h4 i {
    margin-right: 8px;
}

.qc-resource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 20px;
}

@media (max-width: 991px) {
    .qc-resource-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .qc-resource-grid {
        grid-template-columns: 1fr;
    }
}

.qc-resource-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    transition: transform 0.25s, box-shadow 0.25s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.dark .qc-resource-card {
    background: #2a2a2a;
}

.qc-resource-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(93, 92, 222, 0.2);
}

.qc-resource-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.qc-resource-card p {
    color: #666;
    font-size: 0.98rem;
    flex-grow: 1;
}

body.dark .qc-resource-card p {
    color: #aaa;
}

.qc-resource-card a.qc-learn-more {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.qc-resource-card a.qc-learn-more:hover {
    text-decoration: underline;
}

.qc-related-guides {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

body.dark .qc-related-guides {
    border-top-color: #333;
}

.qc-related-guides h2 {
    margin-top: 0;
}

.qc-footer-resources {
    max-width: 700px;
    margin: 25px auto 0;
    padding-top: 20px;
    border-top: 1px solid #333;
}

.qc-footer-resources h5 {
    font-size: 1rem;
    font-weight: 700;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.qc-footer-resources a {
    color: #ddd;
    text-decoration: none;
    font-size: 0.92rem;
    margin: 0 10px 8px;
    display: inline-block;
}

.qc-footer-resources a:hover {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .qc-topbar {
        font-size: 0.85rem;
        padding: 8px 10px;
    }

    .qc-page-hero h1 {
        font-size: 1.9rem;
    }

    .qc-page-hero .qc-page-hero-sub {
        font-size: 1.05rem;
    }

    .qc-card {
        padding: 30px 20px;
    }

    .qc-final-cta h2 {
        font-size: 1.6rem;
    }

    article h2 {
        font-size: 1.5rem;
    }

    .qc-resource-grid {
        gap: 18px;
    }
}

/* =========================================================
   V0.3 — standardized SEO article component names.
   These are the class names new pages should use going forward
   (see section "Create Unified SEO Article Components" in the
   project brief). They alias the existing V0.2 qc-* visual
   treatment so both name sets render identically — the 6 V0.2
   pillar pages keep their original qc-* markup unchanged.
   ========================================================= */
.seo-article, article {
    /* semantic wrapper only; no visual rule needed beyond what
       article h2/h3/p already define above */
}

.seo-breadcrumb { /* see .qc-breadcrumb above — same selector reused */ }

.seo-quick-answer,
.qc-answer-box {
    background: #f0f0ff;
    border: 1px solid #d9d9ff;
    border-radius: 12px;
    padding: 25px 28px;
    font-size: 1.12rem;
    line-height: 1.75;
    margin-bottom: 10px;
}

body.dark .seo-quick-answer {
    background: #24244a;
    border-color: #34346a;
}

.seo-key-points {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.seo-key-points li {
    padding: 10px 0 10px 32px;
    position: relative;
    border-bottom: 1px solid #eee;
}

body.dark .seo-key-points li {
    border-bottom-color: #333;
}

.seo-key-points li:last-child {
    border-bottom: none;
}

.seo-key-points li::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--primary-color);
    position: absolute;
    left: 8px;
    top: 10px;
}

.seo-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}

.seo-note,
.qc-consultant-note {
    background: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    padding: 25px 28px;
    margin: 30px 0;
    box-shadow: 0 3px 15px rgba(93, 92, 222, 0.1);
}

body.dark .seo-note {
    background: #2a2a2a;
}

.seo-note h4 {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.seo-note h4 i {
    margin-right: 8px;
}

.seo-mistakes {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.seo-mistakes li {
    padding: 10px 0 10px 32px;
    position: relative;
    border-bottom: 1px solid #eee;
}

body.dark .seo-mistakes li {
    border-bottom-color: #333;
}

.seo-mistakes li:last-child {
    border-bottom: none;
}

.seo-mistakes li::before {
    content: "\f06a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #e0a800;
    position: absolute;
    left: 0;
    top: 10px;
}

.seo-related {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

body.dark .seo-related {
    border-top-color: #333;
}

.seo-related h2 {
    margin-top: 0;
}

.seo-cta,
.qc-callout {
    background: #f0f0ff;
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 20px 25px;
    margin: 30px 0;
}

body.dark .seo-cta {
    background: #24244a;
}

.seo-cta h5 {
    color: var(--primary-color);
    margin-bottom: 8px;
    font-weight: 600;
}

/* =========================================================
   Resource Hub (/resources/)
   ========================================================= */
.qc-hub-intro {
    max-width: 780px;
    margin: 0 auto 10px;
    text-align: center;
    font-size: 1.1rem;
    color: #555;
}

body.dark .qc-hub-intro {
    color: #bbb;
}

.qc-hub-group {
    margin-top: 50px;
}

.qc-hub-group h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

body.dark .qc-hub-group h2 {
    border-bottom-color: #333;
}

.qc-hub-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 25px;
}

@media (max-width: 575px) {
    .qc-hub-links {
        grid-template-columns: 1fr;
    }
}

.qc-hub-links a {
    display: block;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}

body.dark .qc-hub-links a {
    background: #2a2a2a;
    color: #eee;
}

.qc-hub-links a:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(93, 92, 222, 0.2);
    color: var(--primary-color);
    text-decoration: none;
}

.qc-hub-links a .qc-hub-kw {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    color: #888;
    margin-top: 2px;
}

/* =========================================================
   404 page
   ========================================================= */
.qc-404-wrap {
    padding: 90px 15px;
    text-align: center;
}

.qc-404-wrap .qc-404-code {
    font-size: 5rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.qc-404-wrap h1 {
    font-size: 1.8rem;
    margin: 15px 0 10px;
}

.qc-404-wrap p {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

body.dark .qc-404-wrap p {
    color: #aaa;
}

.qc-404-links a {
    margin: 0 10px 10px;
    display: inline-block;
}

/* =========================================================
   V0.4 — Commercial pages (Services Hub + 8 service pages)
   ========================================================= */
.qc-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin: 18px 0 0;
}

.qc-trust-strip span {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.85rem;
    color: #fff;
    white-space: nowrap;
}

.qc-content-section .qc-trust-strip span {
    background: #f0f0ff;
    border-color: #d9d9ff;
    color: var(--primary-color);
}

body.dark .qc-content-section .qc-trust-strip span {
    background: #24244a;
    border-color: #34346a;
    color: #b8b8ff;
}

.qc-role-disclaimer {
    font-size: 0.85rem;
    color: #888;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 30px 0;
    line-height: 1.6;
}

body.dark .qc-role-disclaimer {
    background: #222;
    color: #999;
}

.qc-service-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), #8584ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 15px;
    font-size: 1.5rem;
    color: white;
}

/* =========================================================
   V0.5 — Evidence, sources, time-sensitive marker
   ========================================================= */
.qc-sources {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

body.dark .qc-sources {
    border-top-color: #333;
}

.qc-sources h2 {
    font-size: 1.3rem !important;
}

.qc-sources ul {
    padding-left: 20px;
    margin-bottom: 12px;
}

.qc-sources li {
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.qc-sources-note {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0;
}

body.dark .qc-sources-note {
    color: #999;
}

.qc-time-sensitive-note {
    background: #fff8e6;
    border: 1px solid #ffe4a6;
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 0.88rem;
    color: #7a5a00;
    margin-bottom: 25px;
}

body.dark .qc-time-sensitive-note {
    background: #332b12;
    border-color: #5a4a1a;
    color: #e0c778;
}