/* ==================================================================== *
 * Section styles
 *
 * Static rules for the page-builder section templates in
 * pcadmin-sections/pages/default/frontend/. These lived in <style> blocks
 * inside the templates themselves, which placed a metadata element inside
 * <main> or <body> — invalid HTML, and a finding against requirement 1.27
 * of the Estonian accessibility checklist. The rules are static, so they
 * belong in a stylesheet; anything genuinely per-section arrives as a
 * custom property on the element.
 *
 * Loaded from includes/head.php, before css/accessibility.css so the
 * accessibility overrides still win without !important.
 * ==================================================================== */

/* -------------------------------------------------------------------- *
 * Forms — contact-form, request-form, and the footer newsletter
 * -------------------------------------------------------------------- */

/* The reCAPTCHA badge is hidden because the attribution text is shown in
 * its place, which is the arrangement Google permits.
 * https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed */
.grecaptcha-badge {
    visibility: hidden;
}

/* intl-tel-input wraps the phone field in a .iti element that is
 * inline-block by default; it has to fill the form row instead. */
.iti {
    width: 100%;
}

/* -------------------------------------------------------------------- *
 * text-block — admin-authored rich text
 * -------------------------------------------------------------------- */

/* An oversized image pasted into the editor scales down instead of
 * overflowing the column. */
.pc-rich-content img {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------------------- *
 * hero — two backgrounds swapped at the breakpoint
 *
 * The mobile image URL is the only per-section value, and it arrives as
 * --hero-mobile-bg on the section element. !important here outranks the
 * desktop background set by the element's own style attribute, which is
 * the precedence the per-section <style> block used to rely on.
 * -------------------------------------------------------------------- */

@media (max-width: 47.9375em) {
    .hero-has-mobile-bg {
        background-image: var(--hero-mobile-bg) !important;
        border-radius: 20px;
        margin: 0.625rem;
        overflow: hidden;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, .15);
    }

    /* Each background carries its own description; hide the one describing
     * the image this width is not showing. */
    .hero-alt-desktop {
        display: none !important;
    }
}

@media (min-width: 48em) {
    .hero-alt-mobile {
        display: none !important;
    }
}

/* -------------------------------------------------------------------- *
 * blog-listing — admin-authored post bodies
 * -------------------------------------------------------------------- */

.pc-blog-content h1, .pc-blog-content h2, .pc-blog-content h3,
.pc-blog-content h4, .pc-blog-content h5, .pc-blog-content h6 {
    color: var(--dark-gray, #232323);
    font-weight: 600;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}
.pc-blog-content h1:first-child, .pc-blog-content h2:first-child,
.pc-blog-content h3:first-child, .pc-blog-content h4:first-child,
.pc-blog-content h5:first-child, .pc-blog-content h6:first-child {
    margin-top: 0;
}
.pc-blog-content p {
    color: var(--dark-gray, #232323);
    margin-bottom: 0.75rem;
}
.pc-blog-content strong, .pc-blog-content b {
    color: inherit;
    font-weight: 700;
}
.pc-blog-content em, .pc-blog-content i:not([class]),
.pc-blog-content u {
    color: inherit;
}
/* Checklist 8.4: this rule used to paint blog links #28a745, which measures
   3.13:1 on white -- under the 4.5:1 small text needs. The colour, and the
   underline that used to appear on hover only, now come from the shared
   in-content link rule in css/accessibility.css, which is loaded after this
   file. Only the weight is still stated here. */
.pc-blog-content a {
    font-weight: 600;
}
.pc-blog-content ul, .pc-blog-content ol {
    margin: 0 0 1rem 0;
    padding: 0;
}
.pc-blog-content li {
    color: var(--dark-gray, #232323);
    margin-bottom: 0.5rem;
}
.pc-blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
.pc-blog-content th, .pc-blog-content td {
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    color: var(--dark-gray, #232323);
}
.pc-blog-content th {
    background: #f8f9fa;
    font-weight: 600;
}
.pc-blog-content > *:last-child {
    margin-bottom: 0;
}