/*
 * OrbitOrchard School — shared foundations.
 * Brand values may be replaced inline by the theme's validated brand context.
 */
:root {
    --prog-primary: #146c43;
    --prog-primary-dark: #0d4f31;
    --prog-secondary: #1f6feb;
    --prog-accent: #f4b400;
    --prog-background: #eef5f1;
    --prog-surface: #ffffff;
    --prog-surface-soft: #f4f8f6;
    --prog-text: #173126;
    --prog-text-soft: #60736a;
    --prog-border: #d9e5df;
    --prog-success: #198754;
    --prog-warning: #9a6200;
    --prog-danger: #b72f2f;
    --prog-header: var(--prog-primary-dark);
    --prog-button: var(--prog-primary);
    --prog-link: var(--prog-secondary);
    --prog-login-background: var(--prog-primary-dark);
    --prog-primary-contrast: #ffffff;
    --prog-primary-dark-contrast: #ffffff;
    --prog-secondary-contrast: #ffffff;
    --prog-accent-contrast: #241b00;
    --prog-on-primary: var(--prog-primary-contrast);
    --prog-on-secondary: var(--prog-secondary-contrast);
    --prog-on-accent: var(--prog-accent-contrast);
    --prog-on-header: var(--prog-primary-dark-contrast);
    --prog-on-button: var(--prog-primary-contrast);
    --prog-radius: 18px;
    --prog-radius-small: 12px;
    --prog-shadow: 0 12px 35px rgba(14, 58, 38, 0.12);
    --prog-shadow-small: 0 5px 18px rgba(14, 58, 38, 0.09);
    --prog-section-padding: clamp(3rem, 6vw, 6rem);
    --prog-page-gutter: clamp(1rem, 3vw, 4rem);
    --prog-content-measure: 72ch;
    --prog-header-height: 76px;
    --prog-transition: 180ms ease;
}

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

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--prog-header-height) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--prog-background);
    color: var(--prog-text);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

body.admin-bar {
    --prog-admin-offset: 32px;
}

main,
.prog-site,
.prog-site-main,
.prog-page,
.prog-section {
    width: 100%;
    min-width: 0;
}

main:focus {
    outline: 0;
}

img,
picture,
video,
canvas,
iframe,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

iframe {
    width: 100%;
    border: 0;
}

figure {
    max-width: 100%;
    margin-inline: 0;
}

p,
li,
dd,
td,
th,
label,
input,
select,
textarea,
button {
    overflow-wrap: anywhere;
}

p {
    margin-block: 0 1.25rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: 0 0.75em;
    color: var(--prog-text);
    font-weight: 750;
    line-height: 1.16;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2rem, 5vw, 4.5rem);
}

h2 {
    font-size: clamp(1.65rem, 3.5vw, 3rem);
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.7rem);
}

h4 {
    font-size: 1.125rem;
}

a {
    color: var(--prog-link);
    text-decoration-thickness: 0.09em;
    text-underline-offset: 0.18em;
}

a:hover {
    text-decoration-thickness: 0.14em;
}

hr {
    margin-block: 2rem;
    border: 0;
    border-top: 1px solid var(--prog-border);
}

button,
input,
select,
textarea {
    max-width: 100%;
    color: inherit;
    font: inherit;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.prog-button,
.wp-element-button,
.wp-block-button__link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--prog-button);
    color: var(--prog-on-button);
    cursor: pointer;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--prog-transition), border-color var(--prog-transition), box-shadow var(--prog-transition), transform var(--prog-transition);
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.prog-button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
    color: var(--prog-on-button);
    box-shadow: var(--prog-shadow-small);
    text-decoration: none;
    transform: translateY(-1px);
}

button:active,
.prog-button:active {
    transform: translateY(0);
}

.prog-button--secondary {
    border-color: var(--prog-secondary);
    background: var(--prog-secondary);
    color: var(--prog-on-secondary);
}

.prog-button--outline {
    border-color: currentColor;
    background: transparent;
    color: var(--prog-primary-dark);
}

.prog-button--quiet {
    background: var(--prog-surface-soft);
    color: var(--prog-text);
}

.prog-button--danger {
    background: var(--prog-danger);
    color: #ffffff;
}

.prog-icon-button {
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select,
textarea {
    width: 100%;
    min-height: 46px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--prog-border);
    border-radius: 10px;
    background: var(--prog-surface);
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    accent-color: var(--prog-primary);
}

label {
    display: inline-block;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
}

fieldset {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--prog-border);
    border-radius: var(--prog-radius-small);
}

legend {
    padding-inline: 0.4rem;
    font-weight: 750;
}

.prog-section {
    padding-block: var(--prog-section-padding);
}

.prog-section--surface {
    background: var(--prog-surface);
}

.prog-section--soft {
    background: var(--prog-surface-soft);
}

.prog-section-inner,
.prog-page-inner,
.prog-header-inner,
.prog-footer-inner {
    width: 100%;
    margin: 0;
    padding-inline: var(--prog-page-gutter);
}

.prog-content-measure {
    max-width: var(--prog-content-measure);
}

.prog-flow > * + * {
    margin-block-start: 1.25rem;
}

.prog-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.prog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.prog-card {
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--prog-border);
    border-radius: var(--prog-radius);
    background: var(--prog-surface);
    box-shadow: var(--prog-shadow-small);
}

a.prog-card,
button.prog-card,
.prog-card[data-clickable="true"] {
    color: inherit;
    text-decoration: none;
    transition: border-color var(--prog-transition), box-shadow var(--prog-transition), transform var(--prog-transition);
}

a.prog-card:hover,
button.prog-card:hover,
.prog-card[data-clickable="true"]:hover {
    border-color: color-mix(in srgb, var(--prog-primary) 45%, var(--prog-border));
    box-shadow: var(--prog-shadow);
    transform: translateY(-3px);
}

.prog-card__icon {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--prog-primary) 12%, var(--prog-surface));
    color: var(--prog-primary-dark);
}

.prog-card__title {
    margin-bottom: 0.4rem;
}

.prog-card__meta,
.prog-muted,
.description {
    color: var(--prog-text-soft);
    font-size: 0.925rem;
}

.prog-badge,
.prog-status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--prog-border);
    border-radius: 999px;
    background: var(--prog-surface-soft);
    color: var(--prog-text);
    font-size: 0.825rem;
    font-weight: 750;
    line-height: 1.2;
}

.prog-status::before {
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-radius: 50%;
    content: "";
}

.prog-status--success {
    color: var(--prog-success);
}

.prog-status--warning {
    color: var(--prog-warning);
}

.prog-status--danger {
    color: var(--prog-danger);
}

.prog-empty-state {
    padding: clamp(2rem, 6vw, 4rem) 1rem;
    border: 1px dashed var(--prog-border);
    border-radius: var(--prog-radius);
    background: var(--prog-surface-soft);
    text-align: center;
}

.prog-eyebrow {
    display: inline-flex;
    margin-bottom: 0.75rem;
    color: var(--prog-primary);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.prog-access-card {
    width: min(100%, 48rem);
    margin: clamp(2rem, 8vw, 7rem) auto;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--prog-border);
    border-radius: var(--prog-radius);
    background: var(--prog-surface);
    box-shadow: var(--prog-shadow);
    text-align: center;
}

.prog-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.prog-field {
    grid-column: span 6;
    min-width: 0;
}

.prog-field--full,
.prog-form-actions {
    grid-column: 1 / -1;
}

.prog-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.prog-help {
    display: block;
    margin-top: 0.35rem;
    color: var(--prog-text-soft);
    font-size: 0.875rem;
}

.prog-alert {
    padding: 0.9rem 1rem;
    border: 1px solid var(--prog-border);
    border-inline-start: 5px solid var(--prog-secondary);
    border-radius: var(--prog-radius-small);
    background: var(--prog-surface);
}

.prog-alert--success {
    border-inline-start-color: var(--prog-success);
}

.prog-alert--warning {
    border-inline-start-color: var(--prog-warning);
}

.prog-alert--danger {
    border-inline-start-color: var(--prog-danger);
}

.alignwide {
    width: 100%;
}

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.wp-site-blocks,
.wp-block-group,
.wp-block-cover,
.wp-block-post-content {
    min-width: 0;
}

.wp-block-image img,
.wp-post-image {
    border-radius: var(--prog-radius-small);
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .prog-card__icon {
        background: var(--prog-surface-soft);
    }

    a.prog-card:hover,
    button.prog-card:hover,
    .prog-card[data-clickable="true"]:hover {
        border-color: var(--prog-primary);
    }
}