/*
 * Site-wide UI fixes from the October 2026 audit.
 * Loaded on every page after all page-specific CSS (functions.php,
 * priority 100), so these rules win without editing each template.
 * Each block is labelled with its audit issue ID.
 */

/* 12.3 - phones: headline, price and order button first; picture after */
@media (max-width: 767px) {
    body .ast-container [class$="-hero"] > [class$="-hero-left"] {
        order: 1;
    }
    body .ast-container [class$="-hero"] > [class$="-hero-img-col"] {
        order: 2;
        min-height: 0;
        padding-top: 0;
    }
    /* decorative certificate cards (no photo) are hidden on phones */
    body .ast-container [class$="-hero"] > [class$="-hero-img-col"]:not(:has(img)) {
        display: none;
    }
    /* real photos stay, but as a short banner under the text */
    body .ast-container [class$="-hero"] > [class$="-hero-img-col"]:has(img) {
        height: 240px;
        overflow: hidden;
        padding: 0;
    }
    body .ast-container [class$="-hero"] > [class$="-hero-img-col"] img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        border-radius: 12px;
    }
}

/* 13.3 - links inside paragraphs are underlined (not colour-only) */
#content p a:not([class*="btn"]):not([class*="cta"]):not([class*="button"]),
#content dd a:not([class*="btn"]):not([class*="cta"]),
#content td a:not([class*="btn"]):not([class*="cta"]) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
#content p a:not([class*="btn"]):not([class*="cta"]):not([class*="button"]):hover {
    text-decoration-thickness: 2px;
}

/* 12.5 / 13.2 - text colour contrast to WCAG AA (4.5:1) */
/* Blog index hero subtitle (was #7cc7e6 on #f8f9fa, 1.78:1) */
body .blog-hero .hero-content p {
    color: #1f5f8b;
}
/* Blog search button (was white on #6ec1e4, 2.01:1) */
body .search-form .search-submit {
    background-color: #1a6fa0 !important; /* overrides the Astra customizer colour */
    color: #ffffff !important;
}
body .search-form .search-submit:hover {
    background-color: #155a82 !important;
}
/* Contact page "Online now" tag (was white on #16a34a, 3.29:1) */
body .con-highlight-tag {
    background-color: #15803d;
}
/* Policy and FAQ page links (were #3182ce, 4.02:1) */
body .faq-internal-link,
body .privacy-internal-link,
body .refund-internal-link,
body .terms-internal-link {
    color: #1d5fb4;
}
/* Thank-you page email link and sign-off (were #3b82f6, 3.67:1) */
body .custom-thankyou-page .email-link,
body .custom-thankyou-page .signoff p {
    color: #1d4ed8;
}

/* 13.4 - visible focus ring on sideways-scrolling tables */
#content [data-pts-scroll-region]:focus-visible {
    outline: 2px solid #1f6f9e;
    outline-offset: 2px;
}

/* 20.13 - 404 page */
.pts-404 {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px 64px;
    font-family: 'Manrope', sans-serif;
    color: #1f2937;
}
.pts-404-hero {
    text-align: center;
    padding: 32px 0 24px;
}
.pts-404-code {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1f6f9e;
}
.pts-404 h1 {
    margin: 0 0 12px;
    font-size: clamp(28px, 5vw, 40px);
    color: #1a365d;
}
.pts-404-lede {
    margin: 0 auto 24px;
    max-width: 560px;
    font-size: 17px;
    line-height: 1.6;
}
.pts-404-search {
    max-width: 520px;
    margin: 0 auto;
}
.pts-404-section {
    margin-top: 40px;
}
.pts-404-section h2,
.pts-404-cta h2 {
    font-size: 22px;
    color: #1a365d;
    margin: 0 0 16px;
}
.pts-404-hubs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.pts-404-hubs li {
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pts-404-hubs a {
    font-weight: 700;
    font-size: 17px;
    color: #1d5fb4;
    text-decoration: none;
}
.pts-404-hubs a:hover {
    text-decoration: underline;
}
.pts-404-hubs span {
    font-size: 15px;
    line-height: 1.5;
    color: #4b5563;
}
.pts-404-popular {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pts-404-popular a {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #c9d8e8;
    border-radius: 50px;
    font-size: 15px;
    color: #1a365d;
    text-decoration: none;
}
.pts-404-popular a:hover {
    border-color: #1d5fb4;
    color: #1d5fb4;
}
.pts-404-cta {
    margin-top: 48px;
    padding: 28px 24px;
    background: #f1f6fb;
    border-radius: 16px;
    text-align: center;
}
.pts-404-cta p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.6;
}
.pts-404-order {
    display: inline-block;
    background: #FFD700;
    color: #000;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    margin-bottom: 16px;
}
.pts-404-order:hover {
    background: #FFC700;
}
.pts-404-contact a {
    color: #1d5fb4;
}

/* 20.14 - blog breadcrumbs look like the page breadcrumbs ("/" separator) */
.pts-breadcrumbs .pts-breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4a5568;
}
.pts-breadcrumbs .pts-breadcrumb-item {
    margin: 0;
}
body .pts-breadcrumbs a.pts-breadcrumb-link {
    color: #1a56a0;
    font-weight: 500;
    text-decoration: none;
}
body .pts-breadcrumbs a.pts-breadcrumb-link:hover {
    text-decoration: underline;
}
.pts-breadcrumbs .pts-breadcrumb-current {
    font-weight: 500;
}

/* 13.5 - no text smaller than 12px on phones */
@media (max-width: 767px) {
    /* labels, pills, bylines, breadcrumbs, table headers: 12.5px minimum */
    body #content [class*="-hero-pill"],
    body #content [class*="-stat-label"],
    body #content [class*="-breadcrumb-link"],
    body #content [class*="-breadcrumb-current"],
    body #content [class*="-breadcrumb-item"] a,
    body #content [class*="-hd-lab"],
    body #content [class*="-hd-tag"],
    body #content [class$="-role"],
    body #content [class$="-lk"],
    body [class*="-profile-hero-eyebrow"],
    body [class*="-profile-hero-badge"],
    body #content [class*="-profile-tags"] li,
    body #content [class*="-tm-bottom"] b,
    body #content [class*="-byline-label"],
    body #content [class*="-byline-role"],
    body #content [class*="-byline-meta"],
    body #content [class*="-byline-links"] a,
    body #content [class*="-tldr-label"],
    body #content [class*="-hub-tag"],
    body #content [class*="-hub-eyebrow"],
    body #content [class*="-hub-arrow"],
    body #content [class*="-panel-badge"],
    body #content [class*="-persona-tag"],
    body #content [class*="-rv-pair"],
    body #content [class*="-rv-sub"],
    body #content [class*="-tagp"],
    body #content [class*="-doc-region"],
    body #content [class*="-doc-card-link"],
    body #content [class*="-cmp-cell-sub"],
    body #content [class*="-cmp-badge"],
    body #content [class*="-decision-sub"],
    body #content [class*="-scroll-hint"],
    body #content [class*="-req-no"],
    body #content [class*="-req-yes"],
    body #content [class*="-auth-region"],
    body #content [class*="-card-tag"],
    body #content [class*="-tm-pair"],
    body #content [class*="-tm-verified"],
    body #content [class*="-ago"],
    body #content [class$="-cat"],
    body #content [class$="-pill"],
    body #content [class$="-tag"],
    body #content .feature-text,
    body #content small,
    body #content th {
        font-size: 12.5px;
    }
    /* short descriptive text in cards: 14px minimum */
    body #content [class*="-accepted-desc"],
    body #content [class*="-hub-card-desc"],
    body #content [class*="-included-card-desc"],
    body #content [class*="-badge-desc"],
    body #content [class*="-badge-title"],
    body #content [class*="-doc-card-desc"],
    body #content [class*="-auth-desc"],
    body #content [class*="-proc-desc"],
    body #content [class*="-lang-blurb"],
    body #content [class*="-tm-card"] p,
    body #content [class$="-tldr"] p,
    body #content td {
        font-size: 14px;
    }
    /* header mobile menu group labels and footer small print */
    #mainHeader .dropdown-group-label {
        font-size: 12.5px;
    }
    body .footer .footer-legal-link,
    body .footer .footer-tagline,
    body .footer .secure-payments-text,
    body .footer .footer-copy {
        font-size: 13px;
    }
}

/* 20.15 - mobile footer: blocks size to their content (no empty dark space) */
@media (max-width: 767px) {
    body .footer .footer-brand-row > .footer-brand-block,
    body .footer .footer-brand-row > .footer-contact-block,
    body .footer .footer-brand-row > .footer-social-block {
        flex: 0 0 auto;
        min-height: 0;
        height: auto;
    }
    body .footer .footer-brand-row .footer-tagline {
        margin-bottom: 0;
    }
}

/* 20.29 - opened topic panel shows where keyboard focus went */
#content .hp-gcard:focus-visible,
#content .hp-gpanel:focus-visible,
#content [class*="-hub-drawer"]:focus-visible {
    outline: 2px solid #1f6f9e;
    outline-offset: 2px;
}

/* 20.37 - one H1 size across all templates */
@media (max-width: 767px) {
    body #content h1 {
        font-size: 28px;
        line-height: 1.2;
    }
}
@media (min-width: 1024px) {
    body #content h1 {
        font-size: 46px;
        line-height: 1.15;
    }
}

/* 3.1 - blog index intro */
.pts-blog .blog-intro {
    max-width: 760px;
    margin: 32px auto 8px;
    padding: 0 16px;
    font-size: 17px;
    line-height: 1.7;
    color: #2d3748;
}
.pts-blog .blog-intro h2 {
    font-size: 24px;
    color: #1a365d;
    margin: 0 0 12px;
}
.pts-blog .blog-intro p {
    margin: 0 0 14px;
}
.pts-blog .blog-intro a {
    color: #1d5fb4;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Audit 5.5: "Quick answer" is wider than the old "TL;DR" label. On phones
   the label sits above the summary instead of beside it, so the text keeps
   the full width of the box. */
@media (max-width: 600px) {
    [class$="-tldr"]:has(> [class$="-tldr-label"]) {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    [class$="-tldr"] > [class$="-tldr-label"] {
        align-self: flex-start;
        margin-top: 0;
    }
}

/* Audit 20.36 (with 13.5): reading text on phones is at least 15px.
   :where() keeps this rule's weight low, so the 13.5 label and card
   sizes above still apply; hero text keeps its own size. */
@media (max-width: 767px) {
    body #content :where(p, li, dd):not(:where([class*="hero"], [class*="hero"] *, [class*="-tm-"], [class*="-tm-"] *)) {
        font-size: 15px;
    }
}
@media (max-width: 767px) {
    body #content [class*="-tldr"] p,
    body #content [class*="-free-rev"] {
        font-size: 15px;
    }
}

/* Audit 20.32: hint above tables that scroll sideways (added by site-fixes.js) */
.pts-swipe-hint {
    margin: 0 0 6px;
    color: #4a5568;
}

/* Audit 20.36 (desktop part): body text ran to 95-150 characters per line on
   wide screens. Cap reading paragraphs and list items at about 80 characters.
   Callout boxes, cards and FAQ answers keep their full width: they are short,
   and a capped line leaves half of the box empty. Hero text keeps its layout. */
@media (min-width: 1024px) {
    body #content :where(p, li):not(:where([class*="hero"], [class*="hero"] *, [class*="tldr"], [class*="tldr"] *, [class*="guarantee"], [class*="guarantee"] *, [class*="faq"], [class*="faq"] *, [class*="-ans"], [class*="-ans"] *, [class*="takeaway"], [class*="takeaway"] *, [class*="warning"], [class*="warning"] *, [class*="card"], [class*="card"] *)) {
        max-width: 38em;
    }
    /* centred section intros stay centred */
    body #content :where(.iauth-section-intro, .ircc-section-intro, .ukvi-section-intro, .uscis-section-intro) {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Audit M4: 31 templates scrolled sideways at 1024–1240 px. The page wrapper
   is a flex child of Astra's .ast-container and could not shrink below its
   4-column grids; the final CTA's negative margins added 32 px more. */
@media (max-width: 1240px) {
    .ast-container > [class*="-page-wrap"] { min-width: 0; width: 100%; }
    [class*="-page-wrap"] [class*="-grid"] > * { min-width: 0; }
}
@media (min-width: 768px) and (max-width: 1240px) {
    [class*="-page-wrap"] [class*="-final-cta"] { margin-left: 0; margin-right: 0; }
}