/**
 * Brand styles for page content: loaded on the site AND in the block
 * editor (after base.css), so pages look the same in both.
 *
 * Version 1 copies the old Education Hub child theme. Values come from its
 * style.css (full file from John, 12 Nov 2026, saved in
 * site-source-2026-11-10/child-theme-style.css) and his screenshots.
 *
 * Contents
 *   1. Text
 *   2. Buttons
 *   3. Post cards (old "Helpful Tips" news cards)
 *   4. Block styles: Group
 *   5. Block styles: Heading, Image, Button, Table
 *   6. Credential badges
 *   7. Forms
 *   8. Social icons
 */


/* ------------------------------------------------------------------
 * 1. Text
 * ------------------------------------------------------------------ */

body {
    -webkit-font-smoothing: auto;
}

strong,
b {
    font-weight: 700;
}

.has-dark-font,
.is-dark-font {
    color: var(--wp--preset--color--contrast);
}


/* ------------------------------------------------------------------
 * 2. Buttons
 * Old site: blue (#007bc2) fill, white text, 4px corners, 5px 20px
 * padding, 16px, tan on hover.
 * ------------------------------------------------------------------ */

a.hc-button,
.hc-button {
    gap: 0.5rem;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
}

.hc-button__icon {
    display: none;
}

/* Secondary = the old dark blue "cta-button" (teal on hover). */
.hc-button.hc-button--secondary {
    padding: 8px 13px;
    font-size: 18px;
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--contrast);
    border-color: var(--wp--preset--color--contrast);
    border-radius: 5px;
}

.hc-button--secondary:hover,
.hc-button--secondary:focus-visible {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--teal);
    border-color: var(--wp--preset--color--teal);
}

/* Text link = the old "a.button": plain blue text, tan on hover. */
.hc-button.hc-button--link {
    font-size: 15px;
    color: var(--wp--preset--color--primary);
}

.hc-button--link:hover,
.hc-button--link:focus-visible {
    color: var(--wp--preset--color--accent);
}

.hc-button--link .hc-button__label {
    text-decoration: none;
}

/* "Read More >>" on post cards. */
.hc-post-card .hc-button--link .hc-button__label::after {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: -2px;
    content: "";
    background-color: currentcolor;
    -webkit-mask: url(../icons/double-chevron-right.svg) center / contain no-repeat;
    mask: url(../icons/double-chevron-right.svg) center / contain no-repeat;
}


/* ------------------------------------------------------------------
 * 3. Post cards (old .news-post / .news-content)
 * ------------------------------------------------------------------ */

.hc-post-grid {
    gap: 0 30px;
}

.hc-post-card {
    gap: 0;
}

.hc-post-card__media {
    border-radius: 0;
}

.hc-post-card:hover .hc-post-card__media img {
    transform: none;
}

.hc-post-card__body {
    gap: 10px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: var(--wp--preset--color--surface);
    border-top: 5px solid var(--wp--preset--color--accent);
}

.hc-post-card__title {
    font-size: 18.67px;
}

.hc-post-card__title a {
    color: var(--wp--preset--color--primary);
}

.hc-post-card__title a:hover {
    color: var(--wp--preset--color--accent);
    text-decoration: none;
}

.hc-post-card__meta {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--primary);
    text-transform: none;
    letter-spacing: 0;
}

.hc-post-card__meta-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
}


/* ------------------------------------------------------------------
 * 4. Block styles: Group (registered in inc/blocks.php)
 * ------------------------------------------------------------------ */

/* Wood panel: the home page's tan, wood-textured box with a drop shadow
   (old .front-page-content-area.banner-border-top). The texture is set in
   Appearance > Theme Settings > Footer > Wood panel texture. */
.wp-block-group.is-style-wood-panel {
    display: flow-root;
    padding: 35px 45px;
    background-color: var(--wp--preset--color--accent);
    background-image: var(--hc-panel-texture, none);
    border: 1px solid var(--wp--preset--color--accent);
    border-radius: 4px;
    box-shadow: 10px 10px 5px #AAAAAA;
}

@media (max-width: 865px) {

    .wp-block-group.is-style-wood-panel {
        padding: 20px;
    }
}

/* Blue outline box (old .home-credential-container). */
.wp-block-group.is-style-blue-box {
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    border: 1px solid var(--wp--preset--color--contrast);
    border-radius: 5px;
}

/* Gray box with a tan bar on top (old testimonial rotator and news cards). */
.wp-block-group.is-style-gray-tan-bar {
    padding: 15px;
    background-color: var(--wp--preset--color--surface);
    border-top: 5px solid var(--wp--preset--color--accent);
}

/* Gray box with a teal bar on the left (old .testimonials-slider). */
.wp-block-group.is-style-gray-teal-bar {
    padding: 20px;
    background-color: #F0F0F0;
    border-left: 4px solid var(--wp--preset--color--teal);
}

.wp-block-group.is-style-gray-teal-bar :where(h2) {
    color: var(--wp--preset--color--contrast);
}

/* Tan call to action ("Don't Forget!" box, old .cta-outer-container-tan /
   .cta-inner-container-tan): the wood panel with a thin dark blue inner
   frame, centered text. Put one inner Group inside it; the
   frame goes around that inner group. */
.wp-block-group.is-style-cta-tan {
    display: flow-root;
    padding: 10px;
    text-align: center;
    background-color: var(--wp--preset--color--accent);
    background-image: var(--hc-panel-texture, none);
    border-radius: 4px;
    box-shadow: 10px 10px 5px #AAAAAA;
}

.wp-block-group.is-style-cta-tan > .wp-block-group {
    padding: 30px 20px;
    margin: 0;
    border: 1px solid var(--wp--preset--color--contrast);
    border-radius: 5px;
}

.wp-block-group.is-style-cta-tan :where(h2) {
    margin-top: 0;
    font-size: 30px;
    font-weight: 700;
    color: var(--wp--preset--color--contrast);
}

.wp-block-group.is-style-cta-tan :where(h3, p) {
    font-size: 24px;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
}


/* ------------------------------------------------------------------
 * 5. Block styles: Heading, Image, Button, Table
 * ------------------------------------------------------------------ */

/* Heading > Section title (old h2.heading-style-1: dark blue, 28px). */
.wp-block-heading.is-style-section-title {
    font-size: 28px;
    color: var(--wp--preset--color--contrast);
}

/* Heading > Subtitle (old h3.heading-style-2: 24px). */
.wp-block-heading.is-style-subtitle {
    font-size: 24px;
}

/* Heading > Dark blue (old .dark-font). */
.wp-block-heading.is-style-dark {
    color: var(--wp--preset--color--contrast);
}

@media (max-width: 865px) {

    .wp-block-heading.is-style-section-title {
        font-size: 22px;
    }

    .wp-block-heading.is-style-subtitle {
        font-size: 18px;
    }
}

/* Image > Framed (old .front-page-slideshow-border). */
.wp-block-image.is-style-framed img,
.hc-slideshow:not(.is-style-plain) {
    padding: 5px;
    border: 4px solid var(--wp--preset--color--contrast);
    border-radius: 5px;
}

/* Image > Photo frame: thin white border and a soft shadow
   (old Home Inspections page photo). */
.wp-block-image.is-style-photo-frame img {
    border: 4px solid #FFFFFF;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
}

/* Button > Dark blue (old .cta-button: teal on hover). */
.wp-block-button.is-style-dark-blue .wp-block-button__link {
    padding: 8px 13px;
    font-size: 18px;
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--contrast);
    border-radius: 5px;
}

.wp-block-button.is-style-dark-blue .wp-block-button__link:hover,
.wp-block-button.is-style-dark-blue .wp-block-button__link:focus-visible {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--teal);
}

/* Button > Text link (old a.button). */
.wp-block-button.is-style-text-link .wp-block-button__link {
    padding: 0;
    font-size: 15px;
    color: var(--wp--preset--color--primary);
    background: none;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover {
    color: var(--wp--preset--color--accent);
    background: none;
}

/* Tables: thin gray borders on every cell (old Prices table). */
.wp-block-table table {
    border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th {
    padding: 5px 6px;
    border: 1px solid var(--wp--preset--color--border);
}

/* Table > Price list: the price column is centered (old td default). */
.wp-block-table.is-style-price-list td:last-child {
    width: 18%;
    text-align: center;
}

/* Quote (old About page): light gray box, tan bar on the left, large
   blue italic heading font. */
.wp-block-quote {
    padding: 20px 25px;
    margin: 30px 0;
    background-color: #F0F0F0;
    border-left: 5px solid var(--wp--preset--color--accent);
}

.wp-block-quote p,
.wp-block-quote :where(h2, h3) {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 24px;
    font-style: italic;
    line-height: 1.5;
    color: var(--wp--preset--color--primary);
}

.wp-block-quote cite {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    font-style: normal;
    color: var(--wp--preset--color--contrast-alt);
}

/* Separator: thin gray rule. */
.wp-block-separator {
    border: 0;
    border-top: 1px solid var(--wp--preset--color--border);
    opacity: 1;
}


/* ------------------------------------------------------------------
 * 6. Credential badges (old .credential-widget: logo above a small,
 *    centered caption, two per row)
 * ------------------------------------------------------------------ */

.wp-block-columns.is-style-credentials {
    gap: 10px;
}

.wp-block-columns.is-style-credentials .wp-block-image {
    margin-bottom: 5px;
    text-align: center;
}

.wp-block-columns.is-style-credentials .wp-block-image img {
    max-width: 150px;
    height: auto;
}

.wp-block-columns.is-style-credentials p {
    margin: 0;
    font-size: 12px;
    text-align: center;
}


/* ------------------------------------------------------------------
 * 7. Forms (old base: 4px corners, blue submit, tan on hover).
 *    Scoped to page content so plugin widgets such as Bookly keep their own buttons.
 * ------------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
    padding: 6px 10px;
    font-size: 16px;
    color: var(--wp--preset--color--contrast-alt);
}

label {
    font-weight: 400;
}

.entry-content input[type="submit"],
.entry-content input[type="button"] {
    padding: 5px 20px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
    cursor: pointer;
    background-color: var(--wp--preset--color--primary);
    border: 0;
    border-radius: 4px;
}

.entry-content input[type="submit"]:hover,
.entry-content input[type="button"]:hover {
    background-color: var(--wp--preset--color--accent);
}


/* ------------------------------------------------------------------
 * 8. Social icons (top bar, footer, Social Icons block)
 * ------------------------------------------------------------------ */

/* Social icons, as on the old site: 31px rounded tiles with a white edge.
   Facebook, LinkedIn, X and most others are a brand-color tile with a white
   mark; Google and Yelp are a white tile with the colored mark. Shared by
   the top bar, the footer and the Social Icons block. */
.hc-social {
    display: flex;
    flex-flow: row wrap;
    gap: 7px;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hc-social > li {
    display: block;
    padding: 0;
    margin: 0;
}

.hc-social > li::before {
    content: none;
}

a.hc-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    color: #FFFFFF;
    text-decoration: none;
    background-color: var(--hc-brand, #333333);
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    transition: opacity var(--wp--custom--transition--fast);
}

a.hc-social__link:hover,
a.hc-social__link:focus-visible {
    color: #FFFFFF;
    opacity: 0.8;
}

.hc-social__link .hc-icon {
    display: inline-flex;
}

.hc-social__link .hc-icon,
.hc-social__link svg {
    width: 21px;
    height: 21px;
}

.hc-social__link--facebook {
    --hc-brand: #3B5998;
}

.hc-social__link--linkedin {
    --hc-brand: #0077B5;
}

.hc-social__link--x {
    --hc-brand: #000000;
}

.hc-social__link--youtube {
    --hc-brand: #FF0000;
}

.hc-social__link--instagram {
    --hc-brand: #C13584;
}

.hc-social__link--pinterest {
    --hc-brand: #E60023;
}

.hc-social__link--tiktok {
    --hc-brand: #000000;
}

.hc-social__link--github {
    --hc-brand: #24292F;
}

/* White tile, colored mark. */
a.hc-social__link--google,
a.hc-social__link--yelp {
    background-color: #FFFFFF;
}

a.hc-social__link--google:hover,
a.hc-social__link--google:focus-visible {
    color: inherit;
}

a.hc-social__link--yelp,
a.hc-social__link--yelp:hover,
a.hc-social__link--yelp:focus-visible {
    color: #D32323;
}


/* ------------------------------------------------------------------
 * 9. Home splash options (patterns "Home splash, option 1-3")
 *    New designs, not from the old site.
 * ------------------------------------------------------------------ */

/* Extra button styles used by the splash options. */
.wp-block-button.is-style-tan .wp-block-button__link {
    padding: 12px 26px;
    font-size: 18px;
    font-weight: 600;
    color: var(--wp--preset--color--contrast);
    background-color: var(--wp--preset--color--accent);
    border-radius: 5px;
}

.wp-block-button.is-style-tan .wp-block-button__link:hover,
.wp-block-button.is-style-tan .wp-block-button__link:focus-visible {
    color: var(--wp--preset--color--contrast);
    background-color: #F2D3A4;
}

.wp-block-button.is-style-outline-white .wp-block-button__link {
    padding: 10px 24px;
    font-size: 18px;
    color: #FFFFFF;
    background: transparent;
    border: 2px solid #FFFFFF;
    border-radius: 5px;
}

.wp-block-button.is-style-outline-white .wp-block-button__link:hover,
.wp-block-button.is-style-outline-white .wp-block-button__link:focus-visible {
    color: var(--wp--preset--color--contrast);
    background-color: #FFFFFF;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    padding: 8px 22px;
    font-size: 18px;
    color: var(--wp--preset--color--contrast);
    background: transparent;
    border: 2px solid var(--wp--preset--color--contrast);
    border-radius: 5px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    color: #FFFFFF;
    background-color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-dark-blue .wp-block-button__link {
    border: 2px solid var(--wp--preset--color--contrast);
}

.hc-splash .wp-block-button.is-style-dark-blue .wp-block-button__link {
    padding: 8px 24px;
}

.hc-splash__eyebrow {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hc-splash__title {
    margin: 0 0 15px;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
}

.hc-splash__lead {
    margin: 0 0 25px;
    font-size: 19px;
    line-height: 1.55;
}

.hc-splash__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 0;
    margin: 28px 0 0;
    font-size: 15px;
    list-style: none;
}

.hc-splash__facts li {
    position: relative;
    padding-left: 22px;
}

.hc-splash__facts li::before {
    position: absolute;
    top: 0.25em;
    left: 0;
    width: 15px;
    height: 15px;
    content: "";
    background-color: var(--wp--preset--color--accent);
    -webkit-mask: url(../icons/checkmark.svg) center / contain no-repeat;
    mask: url(../icons/checkmark.svg) center / contain no-repeat;
}

@media (max-width: 865px) {

    .hc-splash__title {
        font-size: 32px;
    }

    .hc-splash__lead {
        font-size: 17px;
    }
}

/* Option 1: big photo with a dark blue fade from the left. */
.wp-block-cover.hc-splash--photo {
    padding: 60px 40px;
    border-radius: 5px;
}

.wp-block-cover.hc-splash--photo::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background: linear-gradient(90deg, rgba(0, 47, 77, 0.92) 0%, rgba(0, 79, 125, 0.78) 45%, rgba(0, 79, 125, 0.1) 100%);
    border-radius: inherit;
}

.hc-splash--photo .wp-block-cover__inner-container {
    z-index: 2;
}

.hc-splash--photo,
.hc-splash--photo .hc-splash__title {
    color: #FFFFFF;
}

.hc-splash--photo .hc-splash__eyebrow {
    color: var(--wp--preset--color--accent);
}

@media (max-width: 865px) {

    .wp-block-cover.hc-splash--photo {
        padding: 40px 20px;
    }

    .wp-block-cover.hc-splash--photo::after {
        background: rgba(0, 47, 77, 0.8);
    }
}

/* Option 2: split, with a tan band of numbers underneath. */
.hc-splash--split {
    padding: 20px 0 0;
}

.hc-splash--split .hc-splash__eyebrow {
    color: var(--wp--preset--color--teal);
}

.hc-splash--split .hc-splash__title {
    color: var(--wp--preset--color--contrast);
}

.hc-splash__subtitle {
    margin: 0 0 15px;
    font-family: var(--wp--preset--font-family--heading, "Merriweather Sans", sans-serif);
    font-size: 26px;
    line-height: 1.3;
}

.hc-splash--split .hc-splash__subtitle {
    color: var(--wp--preset--color--primary);
}

@media (max-width: 865px) {

    .hc-splash__subtitle {
        font-size: 21px;
    }
}

.hc-splash--split .hc-splash__columns {
    gap: 50px;
    margin-bottom: 35px;
}

.hc-splash--split .hc-splash__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 3px;
}

.hc-stats {
    gap: 0;
    padding: 25px 10px;
    margin: 0;
    text-align: center;
    background-color: var(--wp--preset--color--accent);
    background-image: var(--hc-panel-texture, none);
    border-radius: 5px;
}

.hc-stats > .wp-block-column + .wp-block-column {
    border-left: 1px solid rgba(0, 79, 125, 0.35);
}

.hc-stats__number {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--wp--preset--color--contrast);
}

.hc-stats__label {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--wp--preset--color--contrast);
}

@media (max-width: 781px) {

    .hc-stats > .wp-block-column + .wp-block-column {
        padding-top: 15px;
        border-top: 1px solid rgba(0, 79, 125, 0.35);
        border-left: 0;
    }
}

/* Option 3: blue band with a photo strip and license facts. */
.hc-splash--band {
    padding: 55px 20px 35px;
    color: #FFFFFF;
    background: linear-gradient(180deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--contrast) 100%);
    border-bottom: 5px solid var(--wp--preset--color--accent);
}

.hc-splash--band .hc-splash__title {
    max-width: 820px;
    margin-right: auto;
    margin-left: auto;
    color: #FFFFFF;
}

.hc-splash--band .hc-splash__lead {
    color: var(--wp--preset--color--accent);
}

.hc-splash__strip {
    gap: 16px;
    margin-top: 40px;
}

.hc-splash__strip .wp-block-image {
    margin: 0;
}

.hc-splash__strip img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 4px solid #FFFFFF;
    border-radius: 3px;
}

.hc-splash--band .hc-splash__facts {
    justify-content: center;
}

/* On phones, keep only the first photo so the buttons stay near the top. */
@media (max-width: 781px) {

    .hc-splash__strip > .wp-block-column:nth-child(n+2) {
        display: none;
    }
}

/* Option 1: subtitle on the dark photo. */
.hc-splash--photo .hc-splash__subtitle {
    color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   10. Town pages and FAQ
   ========================================================================== */

.hc-town__intro {
    font-size: 18px;
}

.hc-faq {
    margin-bottom: 30px;
    border-top: 1px solid var(--wp--preset--color--border);
}

.hc-faq .wp-block-details {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--wp--preset--color--border);
}

.hc-faq .wp-block-details summary {
    position: relative;
    padding: 14px 40px 14px 0;
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--heading);
    font-size: 18px;
    list-style: none;
    cursor: pointer;
}

.hc-faq .wp-block-details summary::-webkit-details-marker {
    display: none;
}

.hc-faq .wp-block-details summary::after {
    position: absolute;
    top: 50%;
    right: 10px;
    content: "+";
    color: var(--wp--preset--color--teal);
    font-size: 24px;
    line-height: 1;
    transform: translateY(-50%);
}

.hc-faq .wp-block-details[open] summary::after {
    content: "\2212";
}

.hc-faq .wp-block-details summary:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

.hc-faq .wp-block-details > :not(summary) {
    margin: 0 0 15px;
}


/* ==========================================================================
   11. Schedule pill and Site Detail block
   ========================================================================== */

/* "Schedule Online" pill (old .header-schedule-online). */
a.hc-schedule-pill {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 10px 15px 10px 10px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: var(--wp--custom--header--cta-text);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 1);
    border: 3px solid var(--wp--custom--header--cta-border);
    border-radius: 25px;
    transition: background-color var(--wp--custom--transition--fast);
}

a.hc-schedule-pill:hover,
a.hc-schedule-pill:focus-visible {
    color: var(--wp--custom--header--cta-text);
    background-color: rgba(255, 255, 255, 0.7);
}

.hc-schedule-pill__icon {
    display: inline-flex;
    width: auto;
    height: 40px;
}

.hc-schedule-pill__icon svg {
    width: 40px;
    height: 40px;
}

.hc-detail .hc-detail__label {
    font-weight: inherit;
}

.hc-detail__missing {
    font-style: italic;
    opacity: 0.8;
}

.wp-block-hc-site-detail.hc-detail--schedule-button {
    margin-top: 10px;
}

.hc-footer__widgets .hc-detail--schedule-button a.hc-schedule-pill {
    font-size: 19px;
}

.hc-detail--strong {
    font-weight: 700;
}

p.hc-detail--tight {
    margin-bottom: 0;
}

p.hc-detail--tight + * {
    margin-top: 0;
}

/* A quote, line or heading after a floated image starts below it, as on the old About page. */
.wp-block-quote,
.wp-block-pullquote,
.wp-block-separator,
.entry-content > h2 {
    clear: both;
}