/*
 * Water Leak Hub — Custom Page Styles
 * Theme family: cyan (Tailwind cyan)
 * Version: 1.0.0
 */

/* ─── Design tokens ─────────────────────────────────────── */

:root {
    --wlh-accent: #06b6d4; /* cyan-500 */
    --wlh-accent-deep: #0891b2; /* cyan-600 */
    --wlh-accent-hover: #0e7490; /* cyan-700 */
    --wlh-accent-dark: #155e75; /* cyan-800 */
    --wlh-accent-soft: #cffafe; /* cyan-100 */
    --wlh-accent-glow: #a5f3fc; /* cyan-200 */
    --wlh-accent-mid: #67e8f9; /* cyan-300 */
    --wlh-hero-bg: #ecfeff; /* cyan-50  */
    --wlh-page-bg: #f8feff; /* near-white, cyan-tinted */
    --wlh-surface: #ffffff;
    --wlh-border: #a5f3fc; /* cyan-200 */
    --wlh-border-soft: #cffafe; /* cyan-100 */
    --wlh-heading: #0f172a; /* slate-900 */
    --wlh-heading-accent: #164e63; /* cyan-900 */
    --wlh-subheading: #155e75; /* cyan-800 */
    --wlh-body: #1e293b; /* slate-800 */
    --wlh-body-mid: #334155; /* slate-700 */
    --wlh-muted: #475569; /* slate-600 */
    --wlh-muted-light: #64748b; /* slate-500 */
    --wlh-table-head-bg: #cffafe; /* cyan-100 */
    --wlh-table-head-text: #164e63; /* cyan-900 */
    --wlh-table-row-alt: #f8feff;
    --wlh-callout-bg: #ecfeff; /* cyan-50 */
    --wlh-callout-border: #22d3ee; /* cyan-400 */
    --wlh-badge: #06b6d4;
    --wlh-badge-text: #ffffff;

    /* Layout. The Hostinger AI theme constrains content to 700px, which is a sane
       measure for prose but cramps a six-column comparison table badly — the article
       rendered at 700px inside a 1313px parent, wasting ~600px. The container is
       widened here and running prose is held to a readable measure separately, so the
       extra width goes to tables and cards rather than to 110-character lines. */
    --wlh-container: 1120px;
    /* Text fills the container. Set this to a ch value (~78ch) to reintroduce a
       narrower reading column; at 1120px, body text runs to roughly 110 characters
       per line, which is wider than the classic 50-75 optimum but is a deliberate
       choice here — the container was widened precisely so content could use it. */
    --wlh-measure: 100%;
}

/* ─── Force full-width layout (override theme sidebar) ───── */
/*
 * Most WordPress themes reserve space for a sidebar even on pages with no
 * sidebar content, leaving a blank column on the right. These rules expand
 * the theme's primary content area to fill the full container so our
 * article can center itself correctly.
 */

body.water-leak-hub #primary,
body.water-leak-hub .content-area,
body.water-leak-hub #content,
body.water-leak-hub .site-content,
body.water-leak-hub .content-wrap,
body.water-leak-hub .entry-content-wrap,
body.water-leak-hub .entry-content,
body.water-leak-hub .single-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
}

body.water-leak-hub #secondary,
body.water-leak-hub .widget-area,
body.water-leak-hub .sidebar {
    display: none !important;
}

/* ─── Layout width ───────────────────────────────────────── */
/*
 * The Hostinger AI theme sets --wp--style--global--content-size to 700px, and block
 * themes cap every direct child of an .is-layout-constrained wrapper at that value.
 * Our <article> is such a child, so it rendered at 700px inside a 1313px parent —
 * about 600px of dead space, and a six-column comparison table squeezed into 652px.
 *
 * Measured in-browser at 1440px viewport after this change:
 *   article 1120 · table 1072 · card grid 1072 · prose 835 (~78 characters)
 *
 * !important is needed because the theme's cap comes from the generated global
 * stylesheet at higher specificity.
 */
body.water-leak-hub .entry-content > .page-content,
body.water-leak-hub .entry-content > .pillar-page,
body.water-leak-hub .page-content,
body.water-leak-hub .pillar-page {
    max-width: var(--wlh-container) !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * Prose is LEFT-aligned rather than centred, so headings, body copy and callouts all
 * share one left edge. Centring a narrower column inside the wider container gave them
 * three different left edges, which read as broken alignment.
 *
 * Width is governed by --wlh-measure, currently 100% so text fills the container.
 */
.page-content > h1,
.page-content > p,
.page-content > ul,
.page-content > ol,
.page-content > h2,
.page-content > h3,
.page-content > h4,
.page-content > blockquote,
.page-content > .wlh-callout,
.pillar-page > h1,
.pillar-page > p,
.pillar-page > ul,
.pillar-page > ol,
.pillar-page > h2,
.pillar-page > h3,
.pillar-page > h4,
.pillar-page > blockquote,
.pillar-page > .wlh-callout,
.wlh-faq > h2,
.wlh-faq > h3,
.wlh-faq > p {
    max-width: var(--wlh-measure);
    margin-left: 0;
    margin-right: auto;
}

/* The elements the extra width was reclaimed for. */
.page-content > table,
.pillar-page > table,
.page-content > .wlh-hero,
.pillar-page > .wlh-hero,
.page-content > .wlh-card-grid,
.pillar-page > .wlh-card-grid,
.page-content > nav,
.pillar-page > nav {
    max-width: 100%;
}

/*
 * The theme prints the post title as its own <h1> above our content, which already
 * opens with an <h1>. That is two H1s with near-identical text on every page. Ours is
 * the one to keep — it carries the fuller, keyword-bearing headline ("…Compared: 9
 * Sensors by Hub Compatibility" against the theme's bare page title).
 */
body.water-leak-hub .wp-block-post-title.hostinger-ai-page-title {
    display: none !important;
}

/* Below the container width there is nothing to reclaim — let prose use the room. */
@media (max-width: 1180px) {
    .page-content > h1,
    .page-content > p,
    .page-content > ul,
    .page-content > ol,
    .page-content > h2,
    .page-content > h3,
    .page-content > h4,
    .page-content > blockquote,
    .page-content > .wlh-callout,
    .pillar-page > h1,
    .pillar-page > p,
    .pillar-page > ul,
    .pillar-page > ol,
    .pillar-page > h2,
    .pillar-page > h3,
    .pillar-page > h4,
    .pillar-page > blockquote,
    .pillar-page > .wlh-callout,
    .wlh-faq > h2,
    .wlh-faq > h3,
    .wlh-faq > p {
        max-width: 100%;
    }
}

/* ─── Featured image banner ──────────────────────────────── */
/*
 * The theme's page template shipped with only post-title and post-content — no
 * post-featured-image block at all — so featured images were set in the database and
 * never rendered. The template now includes one; these rules make it a banner rather
 * than a 640px-tall wall of image (the sources are 1344x768, which at container width
 * would otherwise push all content below the fold).
 */
.wlh-page-hero {
    /* Match the content column exactly. The article carries 1.5rem of horizontal
       padding, so the banner has to subtract 3rem from the container or it sits 24px
       proud on each side — close enough to alignment to look like a mistake rather
       than a choice. Measured: banner 1120 at x=153 against content 1072 at x=201. */
    max-width: calc(var(--wlh-container) - 3rem);
    margin-left: auto;
    margin-right: auto;
}

.wlh-page-hero img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* The front page shows its banner above the gradient hero card. An earlier version
   hid it here on the theory that two heroes was one too many — that was the wrong
   call for the site's most important page, which was left as the only page with no
   image at all. */

@media (max-width: 640px) {
    .wlh-page-hero img {
        max-height: 180px;
        border-radius: 8px;
    }
}

/* ─── Base ───────────────────────────────────────────────── */

.page-content,
.pillar-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.78;
    color: var(--wlh-body);
    background-color: var(--wlh-surface);
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem 3.5rem;
    box-sizing: border-box;
}

/* ─── Hero ───────────────────────────────────────────────── */

.wlh-hero {
    background: linear-gradient(140deg, var(--wlh-hero-bg) 0%, var(--wlh-accent-soft) 100%);
    border: 1px solid var(--wlh-accent-glow);
    border-radius: 12px;
    padding: 3rem 2.25rem;
    margin-bottom: 3rem;
    text-align: center;
}

.wlh-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--wlh-heading-accent);
    margin: 0 0 1rem;
    line-height: 1.2;
}

.wlh-hero p {
    font-size: 1.125rem;
    color: var(--wlh-body-mid);
    margin: 0 0 1.75rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
}

.wlh-btn {
    display: inline-block;
    background-color: var(--wlh-accent);
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.8rem 1.875rem;
    border-radius: 6px;
    text-decoration: none !important;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease;
}

.wlh-btn:hover {
    background-color: var(--wlh-accent-hover) !important;
}

/* ─── Typography ─────────────────────────────────────────── */

.page-content h1,
.pillar-page h1 {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--wlh-heading);
    margin: 0 0 0.625rem;
    line-height: 1.28;
}

.page-content h2,
.pillar-page h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--wlh-heading-accent);
    margin: 2.75rem 0 0.875rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--wlh-accent-glow);
    line-height: 1.35;
}

.page-content h3,
.pillar-page h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wlh-subheading);
    margin: 1.875rem 0 0.5rem;
}

.page-content h4,
.pillar-page h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wlh-heading);
    margin: 1.5rem 0 0.375rem;
}

.page-content p,
.pillar-page p {
    margin: 0 0 1.125rem;
}

.wlh-updated {
    font-size: 0.875rem;
    color: var(--wlh-muted-light);
    margin-bottom: 1.625rem;
}

.wlh-lead {
    font-size: 1.125rem;
    color: var(--wlh-body-mid);
    line-height: 1.72;
    margin-bottom: 2rem;
    border-left: 4px solid var(--wlh-accent-mid);
    padding-left: 1rem;
    background: var(--wlh-hero-bg);
    border-radius: 0 6px 6px 0;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

/* ─── Links ──────────────────────────────────────────────── */

.page-content a,
.pillar-page a {
    color: var(--wlh-accent-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color 0.12s;
}

.page-content a:hover,
.pillar-page a:hover {
    color: var(--wlh-accent-hover);
}

/* ─── Lists ──────────────────────────────────────────────── */

.page-content ul,
.pillar-page ul {
    margin: 0.25rem 0 1.25rem 0;
    padding-left: 1.375rem;
}

.page-content ol,
.pillar-page ol {
    margin: 0.25rem 0 1.25rem 0;
    padding-left: 1.5rem;
}

.page-content li,
.pillar-page li {
    margin-bottom: 0.4rem;
}

.page-content ul > li::marker,
.pillar-page ul > li::marker {
    color: var(--wlh-accent);
}

.page-content ol > li::marker,
.pillar-page ol > li::marker {
    color: var(--wlh-accent-deep);
    font-weight: 700;
}

/* ─── Category cards ─────────────────────────────────────── */

.wlh-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.125rem;
    margin: 1.5rem 0 2.25rem;
}

.wlh-card {
    background: var(--wlh-hero-bg);
    border: 1px solid var(--wlh-accent-glow);
    border-radius: 8px;
    padding: 1.25rem 1.25rem 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wlh-card:hover {
    border-color: var(--wlh-accent-mid);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.14);
}

.wlh-card h3 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: var(--wlh-accent-deep);
    font-weight: 700;
}

.wlh-card h3 a {
    text-decoration: none;
    color: inherit;
}

.wlh-card h3 a:hover {
    color: var(--wlh-accent-hover);
}

.wlh-card p {
    font-size: 0.9375rem;
    color: var(--wlh-body-mid);
    margin: 0;
    line-height: 1.6;
}

/* ─── Tables ─────────────────────────────────────────────── */

.page-content table,
.pillar-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: 0.9375rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--wlh-border-soft);
}

.page-content thead,
.pillar-page thead {
    background-color: var(--wlh-table-head-bg);
}

.page-content th,
.pillar-page th {
    color: var(--wlh-table-head-text);
    font-weight: 700;
    text-align: left;
    padding: 0.7rem 1rem;
    border-bottom: 2px solid var(--wlh-accent-mid);
}

.page-content td,
.pillar-page td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--wlh-border-soft);
    color: var(--wlh-body);
    vertical-align: top;
}

.page-content tr:last-child td,
.pillar-page tr:last-child td {
    border-bottom: none;
}

.page-content tbody tr:nth-child(even) td,
.pillar-page tbody tr:nth-child(even) td {
    background-color: var(--wlh-table-row-alt);
}

/* ─── Callouts ───────────────────────────────────────────── */

.wlh-callout,
blockquote {
    background: var(--wlh-callout-bg);
    border-left: 4px solid var(--wlh-callout-border);
    border-radius: 0 6px 6px 0;
    padding: 1rem 1.375rem;
    margin: 1.75rem 0;
    color: var(--wlh-body-mid);
}

.wlh-callout p:last-child,
blockquote p:last-child {
    margin-bottom: 0;
}

blockquote {
    font-style: italic;
}

/* ─── Decision box ───────────────────────────────────────── */

.wlh-decision {
    background: var(--wlh-hero-bg);
    border: 1px solid var(--wlh-accent-mid);
    border-radius: 8px;
    padding: 1.375rem 1.5rem;
    margin: 2rem 0;
}

.wlh-decision h3 {
    margin-top: 0;
    color: var(--wlh-accent-hover);
    font-size: 1.0625rem;
}

.wlh-decision p:last-child,
.wlh-decision ul:last-child {
    margin-bottom: 0;
}

/* ─── FAQ section ────────────────────────────────────────── */

.wlh-faq h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--wlh-heading);
    border-top: 1px solid var(--wlh-border-soft);
    padding-top: 1.125rem;
    margin-top: 1.375rem;
}

/* ─── Related pages nav ──────────────────────────────────── */

.wlh-related {
    background: var(--wlh-hero-bg);
    border: 1px solid var(--wlh-accent-glow);
    border-radius: 8px;
    padding: 1.375rem 1.5rem;
    margin-top: 3rem;
}

.wlh-related h2 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wlh-accent-deep);
    margin: 0 0 0.875rem;
    border: none !important;
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wlh-related ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wlh-related ul li {
    margin: 0;
}

.wlh-related ul li a {
    display: inline-block;
    background: var(--wlh-surface);
    border: 1px solid var(--wlh-accent-mid);
    color: var(--wlh-accent-deep);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.325rem 0.875rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.13s, color 0.13s, border-color 0.13s;
}

.wlh-related ul li a:hover {
    background-color: var(--wlh-accent);
    color: #fff;
    border-color: var(--wlh-accent);
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 640px) {
    .page-content,
    .pillar-page {
        padding: 1.25rem 1rem 2.5rem;
    }

    .wlh-hero {
        padding: 2rem 1.25rem;
    }

    .wlh-hero h1 {
        font-size: 1.5rem;
    }

    .wlh-hero p {
        font-size: 1rem;
    }

    .page-content h1,
    .pillar-page h1 {
        font-size: 1.5rem;
    }

    .page-content h2,
    .pillar-page h2 {
        font-size: 1.25rem;
    }

    .wlh-card-grid {
        grid-template-columns: 1fr;
    }

    .page-content table,
    .pillar-page table {
        font-size: 0.875rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wlh-lead {
        font-size: 1rem;
    }
}