/**
 * Base styles: loaded on the site AND inside the block editor.
 *
 * Every color, font, size and radius here is a token from theme.json:
 *   --wp--preset--color--*        settings.color.palette
 *   --wp--preset--font-size--*    settings.typography.fontSizes
 *   --wp--preset--spacing--*      settings.spacing.spacingSizes
 *   --wp--custom--*               settings.custom
 * To restyle a new site, change theme.json first. Edit this file only for
 * structural changes.
 *
 * Breakpoints: 782px (mobile / desktop), 1080px (tablet).
 *
 * Contents
 *   1. Foundations
 *   2. Accessibility
 *   3. Buttons
 *   4. Icons
 *   5. Post cards, grid and pagination
 *   6. Logos
 *   7. Block style variations
 *   8. Forms
 *   9. Utilities
 */


/* ------------------------------------------------------------------
 * 1. Foundations
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

::selection {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--contrast);
}

hr {
    border: 0;
    border-top: var(--wp--custom--border--width) solid var(--wp--custom--border--color);
}


/* ------------------------------------------------------------------
 * 2. Accessibility
 * ------------------------------------------------------------------ */

:focus-visible {
    outline: var(--wp--custom--focus--outline);
    outline-offset: var(--wp--custom--focus--offset);
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    word-wrap: normal !important;
}

.skip-link:focus {
    top: var(--wp--preset--spacing--20);
    left: var(--wp--preset--spacing--20);
    z-index: 100000;
    width: auto;
    height: auto;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    margin: 0;
    clip: auto;
    font-weight: 600;
    color: var(--wp--preset--color--base);
    text-decoration: none;
    background-color: var(--wp--preset--color--contrast);
    border-radius: var(--wp--custom--radius--small);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* ------------------------------------------------------------------
 * 3. Buttons
 * Used by the Theme Button block, header/footer calls to action,
 * cards, post cards, the [hc_button] shortcode and Gravity Forms.
 *
 * Selectors use "a.hc-button" as well so they outrank the global link
 * styles from theme.json (:root :where(a) has class-level specificity).
 * ------------------------------------------------------------------ */

a.hc-button,
.hc-button {
    display: inline-flex;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    padding: var(--wp--custom--button--padding-block) var(--wp--custom--button--padding-inline);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--button--font-weight);
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--wp--preset--color--on-primary);
    text-decoration: none;
    cursor: pointer;
    background-color: var(--wp--preset--color--primary);
    border: var(--wp--custom--border--width) solid var(--wp--preset--color--primary);
    border-radius: var(--wp--custom--button--radius);
    transition:
        color var(--wp--custom--transition--fast),
        background-color var(--wp--custom--transition--fast),
        border-color var(--wp--custom--transition--fast);
}

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

.hc-button__icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.125em;
    height: 1.125em;
    transition: transform var(--wp--custom--transition--fast);
}

.hc-button__icon svg {
    width: 100%;
    height: 100%;
}

.hc-button:hover .hc-button__icon,
.hc-button:focus-visible .hc-button__icon {
    transform: translate(2px, -2px);
}

/* Secondary: accent fill. */
.hc-button.hc-button--secondary {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
}

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

/* Outline: transparent with a border in the current text color. */
.hc-button.hc-button--outline {
    color: currentcolor;
    background-color: transparent;
    border-color: currentcolor;
}

.hc-button--outline:hover,
.hc-button--outline:focus-visible {
    color: var(--wp--preset--color--on-primary);
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}

/* Text link: no box, underline on hover. Inherits the text color. */
.hc-button.hc-button--link {
    padding: 0;
    color: currentcolor;
    background-color: transparent;
    border-color: transparent;
    border-radius: 0;
}

.hc-button--link:hover,
.hc-button--link:focus-visible {
    color: currentcolor;
    background-color: transparent;
    border-color: transparent;
}

.hc-button--link .hc-button__label {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

.hc-button--link:hover .hc-button__label {
    text-decoration-thickness: 2px;
}


/* ------------------------------------------------------------------
 * 4. Icons
 * ------------------------------------------------------------------ */

.hc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.hc-icon svg {
    display: block;
}


/* ------------------------------------------------------------------
 * 5. Post cards, grid and pagination
 * Shared by archive templates and the Post Grid block.
 * ------------------------------------------------------------------ */

.hc-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

@media (max-width: 1079px) {

    .hc-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 781px) {

    .hc-post-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hc-post-card {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
}

.hc-post-card__media {
    display: block;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--medium);
}

.hc-post-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform var(--wp--custom--transition--base);
}

.hc-post-card:hover .hc-post-card__media img {
    transform: scale(1.03);
}

.hc-post-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
}

.hc-post-card__body > * {
    margin: 0;
}

.hc-post-card__meta {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    color: var(--wp--preset--color--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hc-post-card__title {
    font-size: var(--wp--preset--font-size--large);
}

.hc-post-card__title a {
    color: inherit;
    text-decoration: none;
}

.hc-post-card__title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.hc-post-card__excerpt {
    color: var(--wp--preset--color--contrast-alt);
}

.hc-post-card__excerpt p {
    margin: 0;
}

.hc-post-card .hc-button {
    align-self: flex-start;
    margin-top: auto;
}

.hc-pagination {
    margin-top: var(--wp--preset--spacing--50);
}

.hc-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
    align-items: center;
}

.hc-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
    border: var(--wp--custom--border--width) solid var(--wp--custom--border--color);
    border-radius: var(--wp--custom--radius--small);
}

.hc-pagination a.page-numbers:hover {
    border-color: var(--wp--preset--color--contrast);
}

.hc-pagination .page-numbers.current {
    color: var(--wp--preset--color--on-primary);
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}

.hc-pagination .page-numbers.dots {
    border-color: transparent;
}


/* ------------------------------------------------------------------
 * 6. Logos
 * Partner / certification logos (footer and Logo Strip block).
 * ------------------------------------------------------------------ */

.hc-logos {
    --hc-logo-width: 56px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--40);
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hc-logos--medium {
    --hc-logo-width: 96px;
}

.hc-logos--large {
    --hc-logo-width: 140px;
}

.hc-logos--x-large {
    --hc-logo-width: 190px;
    gap: var(--wp--preset--spacing--50);
}

.hc-logos--align-center {
    justify-content: center;
}

.hc-logos--align-end {
    justify-content: flex-end;
}

.hc-logos__item {
    flex: 0 0 var(--hc-logo-width);
    width: var(--hc-logo-width);
}

.hc-logos__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 781px) {

    .hc-logos {
        gap: var(--wp--preset--spacing--30);
    }

    .hc-logos--large,
    .hc-logos--x-large {
        --hc-logo-width: 96px;
    }
}

.hc-logo-strip__empty {
    padding: var(--wp--preset--spacing--30);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
    text-align: center;
    border: 1px dashed var(--wp--custom--border--color);
}


/* ------------------------------------------------------------------
 * 7. Block style variations (registered in inc/blocks.php)
 * ------------------------------------------------------------------ */

/* List > Checklist */
.wp-block-list.is-style-checklist {
    padding-left: 0;
    list-style: none;
}

.wp-block-list.is-style-checklist li {
    position: relative;
    padding-left: 1.75em;
}

.wp-block-list.is-style-checklist li + li {
    margin-top: 0.5em;
}

.wp-block-list.is-style-checklist li::before {
    position: absolute;
    top: 0.3em;
    left: 0;
    width: 1.1em;
    height: 1.1em;
    content: "";
    background-color: currentcolor;
    -webkit-mask: url(../icons/checkmark.svg) center / contain no-repeat;
    mask: url(../icons/checkmark.svg) center / contain no-repeat;
}

/* Group > Dark overlay: darkens a background image so text stays readable. */
.wp-block-group.is-style-overlay-dark {
    position: relative;
    isolation: isolate;
}

.wp-block-group.is-style-overlay-dark::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.45));
    border-radius: inherit;
}


/* ------------------------------------------------------------------
 * 8. Forms
 * Native fields plus Gravity Forms.
 * ------------------------------------------------------------------ */

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 {
    width: 100%;
    max-width: 100%;
    padding: 0.75rem 0.875rem;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.4;
    color: var(--wp--preset--color--contrast);
    background-color: var(--wp--custom--form--background);
    border: var(--wp--custom--border--width) solid var(--wp--custom--form--border);
    border-radius: var(--wp--custom--form--radius);
    transition: border-color var(--wp--custom--transition--fast);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--wp--custom--form--focus);
    outline: 1px solid var(--wp--custom--form--focus);
    outline-offset: 0;
}

label {
    font-weight: 600;
}

.search-form {
    display: flex;
    gap: var(--wp--preset--spacing--20);
    max-width: 32rem;
}

.search-form label {
    flex: 1 1 auto;
}

.search-form .search-submit {
    padding: var(--wp--custom--button--padding-block) var(--wp--custom--button--padding-inline);
    font-family: inherit;
    font-weight: var(--wp--custom--button--font-weight);
    color: var(--wp--preset--color--on-primary);
    cursor: pointer;
    background-color: var(--wp--preset--color--primary);
    border: 0;
    border-radius: var(--wp--custom--button--radius);
}

/* Gravity Forms: let the theme tokens drive the fields. */
.gform-theme--foundation {
    --gf-ctrl-border-color: var(--wp--custom--form--border);
    --gf-ctrl-radius: var(--wp--custom--form--radius);
    --gf-ctrl-border-color-focus: var(--wp--custom--form--focus);
    --gf-color-primary: var(--wp--preset--color--primary);
}

.gform_wrapper .gform_footer .gform_button.hc-button { /* stylelint-disable-line selector-class-pattern */
    width: auto;
}


/* ------------------------------------------------------------------
 * 9. Utilities
 * Add these under Block > Advanced > Additional CSS class(es).
 * ------------------------------------------------------------------ */

@media (max-width: 781px) {

    .hc-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 782px) {

    .hc-hide-desktop {
        display: none !important;
    }
}

.hc-eyebrow {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hc-lead {
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.5;
}