/* ==========================================================================
   MAILOZA — TOOLS STYLES  (page-scoped, W8)
   Loaded ONLY on the tools hub (tools.php) and the 8 tool-*.php pages via
   $page_styles = ['pages/tools.css'] (see app/includes/head.php).

   These styles are the page-scoped layer for the tools hub and the SHARED
   tool-page template (app/includes/tool-page-template.php). They style ONLY the
   bespoke blocks those files emit — the standard component primitives (.hero,
   .card-grid, .feature-card, .faq, .cta-banner, .section-header, .alert,
   .breadcrumbs, .eyebrow, .badge, .btn) are already styled in style.css /
   components.css and are NOT re-declared here.

   Rules: consumes the design tokens from style.css — NO raw hex, no magic
   numbers, no duplication of base/component CSS. Mobile-first. Status colours
   come from the status tokens so they stay accessible and theme-able.

   Table of contents
     1. Section rhythm + alternating washes
     2. Breadcrumbs spacing + "coming soon" banner spacing
     3. Hub: tools grid (8 cards)
     4. Hub: when-to-ask-expert list
     5. Tool page: what-this-checks grid
     6. Tool page: common problems list
     7. Tool page: placeholder input UI (static form)
     8. Tool page: manual-audit block
     9. Tool page: related services grid
     10. FAQ wrapper width
     11. Responsive tuning
   ========================================================================== */


/* ==========================================================================
   1. SECTION RHYTHM  (tools-only wrappers; base sections live in style.css)
   ========================================================================== */
.tools-section,
.tool-section {
    padding-block: var(--space-9);
}

@media (min-width: 768px) {
    .tools-section,
    .tool-section { padding-block: var(--space-10); }
}

/* Alternating washes give calm, premium separation between bands. */
.tools-section--why,
.tools-section--faq,
.tool-section--matters,
.tool-section--manual,
.tool-section--faq {
    background-color: var(--bg-surface-subtle);
}


/* ==========================================================================
   2. BREADCRUMBS + "COMING SOON" BANNER SPACING
   ========================================================================== */
.tool-page__crumbs {
    padding-top: var(--space-6);
}

/* The honesty banner sits directly under the hero on both hub + tool pages. */
.tool-soon {
    padding-top: var(--space-7);
}


/* ==========================================================================
   3. HUB — TOOLS GRID  (8 routing cards)
   Built on the .card surface language (border + radius) from components.css,
   but composed here because each card carries an icon, title link, blurb and a
   decorative "open" affordance.
   ========================================================================== */
.tools-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-grid);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.tools-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
}

.tools-card:hover,
.tools-card:focus-within {
    border-color: var(--teal-400);
    box-shadow: var(--elevation-1);
    transform: translateY(-2px);
}

.tools-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-9);
    height: var(--space-9);
    border-radius: var(--radius-md);
    background-color: var(--teal-50);
    color: var(--teal-700);
}
.tools-card__icon .mailoza-icon { width: var(--icon-lg); height: var(--icon-lg); }

.tools-card__title {
    margin: 0;
    font-size: var(--text-h4);
    line-height: var(--leading-snug);
}

/* Stretched link: the whole card is clickable, link text stays the a11y target. */
.tools-card__link {
    color: var(--text-primary);
    text-decoration: none;
}
.tools-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.tools-card { position: relative; }
.tools-card__link:hover { color: var(--text-link-hover); }

.tools-card__desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.tools-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    color: var(--text-link);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
.tools-card__cta-icon { display: inline-flex; }
.tools-card__cta-icon .mailoza-icon { width: var(--icon-sm); height: var(--icon-sm); }
.tools-card:hover .tools-card__cta { color: var(--text-link-hover); }


/* ==========================================================================
   4. HUB — WHEN TO REQUEST EXPERT HELP
   ========================================================================== */
.tools-expert-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-grid);
    margin: var(--space-8) 0 var(--space-8);
    padding: 0;
    list-style: none;
}

.tools-expert {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}

.tools-expert--urgent {
    border-color: var(--emergency-border);
    background-color: var(--emergency-wash);
}

.tools-expert__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--teal-700);
}
.tools-expert--urgent .tools-expert__icon { color: var(--emergency-text); }
.tools-expert__icon .mailoza-icon { width: var(--icon-lg); height: var(--icon-lg); }

.tools-expert__title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
}

.tools-expert__desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}
.tools-expert__link {
    color: var(--text-link);
    font-weight: var(--weight-semibold);
}
.tools-expert--urgent .tools-expert__link { color: var(--emergency-text); }


/* ==========================================================================
   5. TOOL PAGE — WHAT THIS TOOL CHECKS  (icon + title + desc cards)
   ========================================================================== */
.tool-checks-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-grid);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.tool-check-card {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}

.tool-check-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-md);
    background-color: var(--teal-50);
    color: var(--teal-700);
}
.tool-check-card__icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }

.tool-check-card__title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
}

.tool-check-card__desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}


/* ==========================================================================
   6. TOOL PAGE — COMMON PROBLEMS  (warning-led list)
   ========================================================================== */
.tool-problems-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-grid);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.tool-problem {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--warning-600);
    border-radius: var(--radius-md);
}

.tool-problem__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--warning-700);
}
.tool-problem__icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }

.tool-problem__title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

.tool-problem__desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}


/* ==========================================================================
   7. TOOL PAGE — PLACEHOLDER INPUT UI  (static, decorative form)
   The submit button is disabled and styled by .btn[disabled] in style.css; this
   layer styles the card, labels, inputs and the "coming soon" affordances.
   ========================================================================== */
.tool-form-card {
    max-width: var(--container-form);
    margin: var(--space-8) auto 0;
    padding: var(--space-7);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-1);
}

.tool-form__field {
    margin-bottom: var(--space-5);
}

.tool-form__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.tool-form__input {
    display: block;
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--text-body);
    background-color: var(--bg-page);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}

.tool-form__input::placeholder { color: var(--text-secondary); opacity: 1; }

.tool-form__input:focus {
    outline: none;
    border-color: var(--teal-500);
    box-shadow: var(--focus-ring);
}

.tool-form__textarea {
    min-height: calc(var(--space-11) + var(--space-9));
    resize: vertical;
    line-height: var(--leading-relaxed);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.tool-form__help {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.tool-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-top: var(--space-6);
}

/* The disabled submit keeps its block look; cursor/colour come from .btn[disabled]. */
.tool-form__submit { pointer-events: none; }

.tool-form__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--info-700);
    background-color: var(--info-50);
    border: 1px solid var(--info-100);
    border-radius: var(--radius-pill);
}
.tool-form__badge-icon { display: inline-flex; }
.tool-form__badge-icon .mailoza-icon { width: var(--icon-sm); height: var(--icon-sm); }

.tool-form__note {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}


/* ==========================================================================
   8. TOOL PAGE — MANUAL AUDIT BLOCK
   ========================================================================== */
.tool-manual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
    text-align: left;
}

.tool-manual__points {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: var(--measure);
}

.tool-manual__point {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    color: var(--text-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.tool-manual__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--teal-600);
}
.tool-manual__icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }

.tool-manual__cta { align-self: center; }


/* ==========================================================================
   9. TOOL PAGE — RELATED SERVICES GRID
   ========================================================================== */
.tool-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-grid);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.tool-related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
}

.tool-related-card:hover,
.tool-related-card:focus-within {
    border-color: var(--teal-400);
    box-shadow: var(--elevation-1);
    transform: translateY(-2px);
}

.tool-related-card__icon {
    display: inline-flex;
    color: var(--teal-700);
}
.tool-related-card__icon .mailoza-icon { width: var(--icon-lg); height: var(--icon-lg); }

.tool-related-card__title {
    margin: 0;
    font-size: var(--text-h4);
    line-height: var(--leading-snug);
}
.tool-related-card__link {
    color: var(--text-primary);
    text-decoration: none;
}
.tool-related-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.tool-related-card__link:hover { color: var(--text-link-hover); }

.tool-related-card__desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}


/* ==========================================================================
   10. FAQ WRAPPER WIDTH  (keep the disclosure list readable)
   ========================================================================== */
.tools-faq,
.tool-faq {
    max-width: var(--container-narrow);
    margin: var(--space-8) auto 0;
}


/* ==========================================================================
   11. RESPONSIVE TUNING
   ========================================================================== */
@media (min-width: 640px) {
    .tool-checks-grid,
    .tool-problems-list,
    .tools-expert-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .tools-cards { grid-template-columns: repeat(2, 1fr); }
    .tool-related-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .tools-cards { grid-template-columns: repeat(4, 1fr); }
    .tool-checks-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   HERO VISUAL COMPOSITION  (W16 — texture + glow + framed illustration)
   --------------------------------------------------------------------------
   Wraps the hero in a depth band (faint grid + soft glow) and sets a framed
   illustration beside the hero text on wide viewports. Wrapper owns layout;
   the shared hero-basic component is untouched. Tokens only.
   ========================================================================== */
.tools-hero-band {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(180deg,
        var(--visual-gradient-from),
        var(--bg-surface) 78%);
}

.tools-hero-band .accent-glow { z-index: 0; }

/* The hero now uses the shared .hero-split 2-column pattern (visual.css):
   hero text in the left column, framed illustration in the right. The band
   above only supplies the gradient + glow depth. */