/* Shared design tokens (--ds-color-*) come from
   _content/Frontend.Shared.DesignSystem/css/tokens.css, loaded before this file (App.razor).
   Public Web overrides two of them here - a deliberate, app-specific choice (crisp white content
   pages, and a lighter hover tint that reads better against pure white), not lingering drift. */
:root {
    --ds-color-background: #ffffff;
    --ds-color-surface-hover: #f3f6f5;
}

* { box-sizing: border-box; }
html { min-width: 20rem; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--ds-font-family);
    color: var(--ds-color-text);
    background: var(--ds-color-background);
    line-height: 1.7;
}

button, input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
a { color: #0b665f; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid rgba(15,118,110,.35); outline-offset: 3px; }

h1, h2, h3 { line-height: 1.25; }
h1 { letter-spacing: 0; }

.public-auth {
    width: min(100%, 30rem);
    margin-inline: auto;
    padding-block: clamp(1rem, 4vw, 3rem);
}
.public-auth__header { margin-block-end: 1.5rem; }
.public-auth__header h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.35rem); }
.public-auth__header p { margin-block: .5rem 0; color: var(--ds-color-text-muted); }
.public-auth form {
    padding: clamp(1.15rem, 4vw, 1.75rem);
    background: #fff;
    border: 1px solid var(--ds-color-border);
    border-radius: .5rem;
    box-shadow: 0 8px 24px rgba(16,24,40,.07);
}
.public-auth__links { margin-block-start: 1.25rem; color: var(--ds-color-text-muted); font-size: .92rem; }
.public-auth__links p { margin: .4rem 0; }
.public-auth__name-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }

.public-prose { width: min(100%, 48rem); margin-inline: auto; }
.public-prose > h1 { margin-block: 1rem 2rem; font-size: clamp(2rem, 5vw, 3.25rem); }
.public-prose p { margin-block: 1.1rem; }
.public-prose h2 { margin-block: 2.5rem 1rem; }
.public-prose img { width: 100%; margin-block: 2rem; border-radius: .5rem; }
.public-prose blockquote { margin-inline: 0; padding-inline-start: 1rem; color: var(--ds-color-text-muted); border-inline-start: 3px solid var(--ds-color-primary); }

.public-home { width: min(100%, 60rem); margin-inline: auto; padding-block: clamp(1rem, 5vw, 4rem); }
.public-home > h1 { max-width: 18ch; margin-block: 0 1.5rem; font-size: clamp(2.3rem, 7vw, 4.75rem); }
.public-home > div { max-width: 48rem; color: #475467; font-size: clamp(1.05rem, 2vw, 1.25rem); }

.public-list-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-block-end: 1.5rem; }
.public-list-header h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); }
.public-post-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.public-post-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--ds-color-border); border-radius: .5rem; }
.public-post-card__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-block-end: 1px solid var(--ds-color-border); }
.public-post-card__body { padding: 1.15rem; }
.public-post-card__title { display: inline-block; color: var(--ds-color-text); font-size: 1.1rem; font-weight: 750; text-decoration: none; }
.public-post-card__title:hover { color: var(--ds-color-primary); text-decoration: underline; }
.public-post-card p { margin-block: .55rem 0; color: var(--ds-color-text-muted); }
.public-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 2rem; padding-block-start: 1rem; border-block-start: 1px solid var(--ds-color-border); }
.public-pagination a { display: inline-flex; min-height: 2.5rem; align-items: center; padding: .4rem .8rem; border: 1px solid var(--ds-color-border); border-radius: .375rem; text-decoration: none; }
.public-pagination a:hover { background: var(--ds-color-surface-hover); }

.public-state { width: min(100%, 36rem); margin: 3rem auto; padding: 2rem; text-align: center; background: #f8faf9; border: 1px solid var(--ds-color-border); border-radius: .5rem; }
.public-state h1 { margin-block-start: 0; }

.ds-field { display: flex; flex-direction: column; gap: .4rem; margin-block-end: 1rem; text-align: start; }
.ds-field__label { color: #344054; font-size: .86rem; font-weight: 650; }
.ds-field__input { width: 100%; min-height: 2.75rem; padding: .6rem .75rem; color: var(--ds-color-text); background: #fff; border: 1px solid #cfd4dc; border-radius: .375rem; text-align: start; }
.ds-field__input:hover { border-color: #98a2b3; }
.ds-field__input:focus { border-color: var(--ds-color-primary); outline: 3px solid rgba(15,118,110,.14); }
.ds-field__error { margin: 0; color: var(--ds-color-danger); font-size: .8rem; }
.ds-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.65rem; padding: .55rem 1.1rem; color: #fff; background: var(--ds-color-primary); border: 1px solid transparent; border-radius: .375rem; font-weight: 650; cursor: pointer; }
.ds-button:hover:not(:disabled) { background: var(--ds-color-primary-hover); }
.ds-button--secondary { color: #344054; background: #fff; border-color: #cfd4dc; }
.ds-alert { margin-block-end: 1rem; padding: .75rem 1rem; border: 1px solid transparent; border-radius: .375rem; }
.ds-alert p { margin: 0; }
.ds-alert--error { color: var(--ds-color-danger); background: var(--ds-color-danger-bg); border-color: #fecdca; }
.ds-alert--success { color: var(--ds-color-success); background: var(--ds-color-success-bg); border-color: #abefc6; }
.ds-alert--info { color: #175cd3; background: var(--ds-color-info-bg); border-color: #b2ddff; }

/* Yaara's server-rendered block document. All appearance comes from these shared classes;
   published content contains no raw CSS or inline style attributes. */
.ya-content { display: grid; gap: 1.25rem; }
.ya-section { padding: 1.25rem; border-radius: .75rem; }
.ya-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.ya-column { flex: 1 1 0; min-width: 0; }
.ya-width--25 { flex-basis: 25%; max-width: 25%; }.ya-width--33 { flex-basis: 33.333%; max-width: 33.333%; }.ya-width--50 { flex-basis: 50%; max-width: 50%; }.ya-width--66 { flex-basis: 66.667%; max-width: 66.667%; }.ya-width--75 { flex-basis: 75%; max-width: 75%; }.ya-width--100 { flex-basis: 100%; max-width: 100%; }
.ya-surface--muted { background: #f8faf9; }
.ya-surface--brand { color: #fff; background: var(--ds-color-primary); }
.ya-space--xs { padding-block: .25rem; }
.ya-space--sm { padding-block: .5rem; }
.ya-space--md { padding-block: 1rem; }
.ya-space--lg { padding-block: 2rem; }
.ya-space--xl { padding-block: 3rem; }
.ya-rich-text [data-align="start"] { text-align: start; }
.ya-rich-text [data-align="center"] { text-align: center; }
.ya-rich-text [data-align="end"] { text-align: end; }
.ya-align--start { text-align: start; }.ya-align--center { text-align: center; }.ya-align--end { text-align: end; }
.ya-image img, .ya-gallery img, .ya-card img, .ya-video-link img { width: 100%; border-radius: .5rem; }
.ya-image img { object-fit: cover; }.ya-focal--left-top { object-position: left top; }.ya-focal--center-top { object-position: center top; }.ya-focal--right-top { object-position: right top; }.ya-focal--left-middle { object-position: left center; }.ya-focal--center-middle { object-position: center center; }.ya-focal--right-middle { object-position: right center; }.ya-focal--left-bottom { object-position: left bottom; }.ya-focal--center-bottom { object-position: center bottom; }.ya-focal--right-bottom { object-position: right bottom; }
.ya-gallery, .ya-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.ya-grid--1 { grid-template-columns: minmax(0, 1fr); }.ya-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.ya-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }.ya-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ya-card { padding: 1rem; border: 1px solid var(--ds-color-border); border-radius: .5rem; background: #fff; }
.ya-hero { padding: clamp(2rem, 7vw, 5rem); text-align: center; border-radius: .75rem; background: #eef7f6; }
.ya-hero__image { width: 100%; max-height: 28rem; margin-block-end: 1.5rem; object-fit: cover; border-radius: .5rem; }
.ya-button { display: inline-flex; padding: .65rem 1rem; color: #fff; background: var(--ds-color-primary); border-radius: .4rem; text-decoration: none; }
.ya-button--secondary { color: var(--ds-color-text); background: #fff; border: 1px solid var(--ds-color-border); }
.ya-quote { margin-inline: 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--ds-color-primary); }
.ya-table-wrap { max-width: 100%; overflow-x: auto; }
.ya-table { width: 100%; border-collapse: collapse; }
.ya-table th, .ya-table td { padding: .65rem; border: 1px solid var(--ds-color-border); text-align: start; }
.ya-spacer--xs { height: .5rem; }.ya-spacer--sm { height: 1rem; }.ya-spacer--md { height: 2rem; }.ya-spacer--lg { height: 3rem; }.ya-spacer--xl { height: 5rem; }

@media (max-width: 38rem) {
    .public-auth__name-grid { grid-template-columns: 1fr; }
    .public-pagination { align-items: stretch; flex-direction: column; }
    .public-pagination a { justify-content: center; }
    .ya-stack--mobile { flex-direction: column; }
    .ya-reverse--mobile { flex-direction: row-reverse; }.ya-stack--mobile.ya-reverse--mobile { flex-direction: column-reverse; }
    .ya-order-mobile--1 { order: 1; }.ya-order-mobile--2 { order: 2; }.ya-order-mobile--3 { order: 3; }.ya-order-mobile--4 { order: 4; }
    .ya-hide--mobile { display: none; }
    .ya-column { max-width: 100%; }
    .ya-gallery, .ya-card-grid { grid-template-columns: 1fr; }
}

@media (min-width: 38.001rem) and (max-width: 64rem) { .ya-hide--tablet { display: none; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }