/*
 * The Laylas — Frontend CSS
 * Complements theme.json with selector-level polish.
 */

/* ─── CSS Custom Properties ──────────────────────────────────────────────── */

:root {
    --laylas-header-height: 72px;
    --laylas-transition: 0.25s ease;
    --laylas-border-line: 1px solid var(--wp--preset--color--line);
    --laylas-font-label: var(--wp--preset--font-family--jost);
    --laylas-font-body: var(--wp--preset--font-family--spectral);
    --laylas-font-display: var(--wp--preset--font-family--fraunces);
}

/* ─── Global Layout ───────────────────────────────────────────────────────── */

.wp-site-blocks {
    padding-top: 0 !important;
}

.wp-site-blocks > * + * {
    margin-block-start: 0 !important;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background-color: var(--wp--preset--color--alabaster);
    border-bottom: var(--laylas-border-line);
    transition: box-shadow var(--laylas-transition), background-color var(--laylas-transition);
    padding-block: 0;
}

.site-header.is-scrolled {
    box-shadow: 0 1px 20px rgba(33, 30, 24, 0.07);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--50);
    padding-inline: var(--wp--preset--spacing--60);
    padding-block: 1.125rem;
    max-width: var(--wp--style--global--wide-size, 1240px);
    margin-inline: auto;
    width: 100%;
    min-height: var(--laylas-header-height);
}

.site-header__left {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--50);
    min-width: 0;
    flex-shrink: 0;
}

.site-header__title .wp-block-site-title {
    font-family: var(--laylas-font-display);
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}

.site-header__logo .wp-block-site-logo img {
    max-height: 40px;
    width: auto;
}

/* Navigation */
.site-header__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

.site-header__navigation .wp-block-navigation__container {
    gap: 2rem;
    align-items: center;
}

.site-header__navigation .wp-block-navigation-item__content {
    font-family: var(--laylas-font-label);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--graphite);
    text-decoration: none;
    padding-block: 0;
    transition: color var(--laylas-transition);
}

.site-header__navigation .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--clay);
}

.site-header__navigation .wp-block-navigation__responsive-container-open,
.site-header__navigation .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--graphite);
}

.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--alabaster);
    color: var(--wp--preset--color--ink);
    padding: var(--wp--preset--spacing--60);
}

.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: flex-start;
    gap: 1.25rem;
}

.site-header__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 0.9375rem;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--40);
    flex-shrink: 0;
}

/* Subscribe button in header */
.site-header__subscribe .wp-block-button__link {
    font-size: 0.6875rem;
    padding: 0.6rem 1.25rem;
}

/* Search in header */
.site-header .wp-block-search {
    display: flex;
    align-items: center;
    margin: 0;
}

.site-header .wp-block-search__input {
    font-family: var(--laylas-font-label);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    border: none;
    border-bottom: 1px solid var(--wp--preset--color--line);
    background: transparent;
    padding-inline: 0;
    padding-block: 0.35rem;
    outline: none;
    width: 140px;
    transition: border-color var(--laylas-transition);
}

.site-header .wp-block-search__input:focus {
    border-bottom-color: var(--wp--preset--color--clay);
}

.site-header .wp-block-search__input::placeholder {
    color: var(--wp--preset--color--mist);
}

.site-header .wp-block-search__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.5rem;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--wp--preset--color--graphite);
    cursor: pointer;
    transition: color var(--laylas-transition),
                border-color var(--laylas-transition),
                background-color var(--laylas-transition);
}

.site-header .wp-block-search__button:hover,
.site-header .wp-block-search__button:focus-visible {
    color: var(--wp--preset--color--clay);
    border-color: var(--wp--preset--color--line);
    background-color: var(--wp--preset--color--paper);
}

.site-header .wp-block-search__button svg {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
}

/* ─── Button Styles ───────────────────────────────────────────────────────── */

.wp-block-button__link {
    transition: background-color var(--laylas-transition),
                color var(--laylas-transition),
                border-color var(--laylas-transition);
}

/* Outline style */
.is-style-laylas-outline .wp-block-button__link,
.wp-block-button.is-style-laylas-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--ink);
    border: 1px solid var(--wp--preset--color--ink);
}

.is-style-laylas-outline .wp-block-button__link:hover,
.wp-block-button.is-style-laylas-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--alabaster);
}

/* Text link style */
.is-style-laylas-text-link .wp-block-button__link,
.wp-block-button.is-style-laylas-text-link .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--graphite);
    border: none;
    padding-inline: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.is-style-laylas-text-link .wp-block-button__link:hover,
.wp-block-button.is-style-laylas-text-link .wp-block-button__link:hover {
    color: var(--wp--preset--color--clay);
    background-color: transparent;
}

/* ─── Separator Styles ────────────────────────────────────────────────────── */

.is-style-laylas-ornament {
    border: none;
    text-align: center;
    overflow: visible;
    height: 1.5rem;
}

.is-style-laylas-ornament::before {
    content: '— ✦ —';
    font-family: var(--laylas-font-display);
    font-size: 0.875rem;
    color: var(--wp--preset--color--clay-soft);
    letter-spacing: 0.5em;
}

.is-style-laylas-dots {
    border: none;
    text-align: center;
    overflow: visible;
    height: 1.5rem;
}

.is-style-laylas-dots::before {
    content: '· · ·';
    font-size: 1.25rem;
    color: var(--wp--preset--color--line);
    letter-spacing: 0.5em;
}

/* ─── Story Cards ─────────────────────────────────────────────────────────── */

.story-card {
    position: relative;
}

.story-card__image .wp-block-post-featured-image {
    overflow: hidden;
}

.story-card__image .wp-block-post-featured-image a {
    display: block;
    overflow: hidden;
}

.story-card__image .wp-block-post-featured-image img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.story-card:hover .story-card__image .wp-block-post-featured-image img,
.story-card:focus-within .story-card__image .wp-block-post-featured-image img {
    transform: scale(1.03);
}

.story-card__title a {
    text-decoration: none;
    color: inherit;
    transition: color var(--laylas-transition);
}

.story-card__title a:hover {
    color: var(--wp--preset--color--clay);
}

/* ─── Post Terms / Category Labels ───────────────────────────────────────── */

.wp-block-post-terms a {
    font-family: var(--laylas-font-label);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--wp--preset--color--clay);
    transition: color var(--laylas-transition);
}

.wp-block-post-terms a:hover {
    color: var(--wp--preset--color--clay-soft);
}

/* ─── Hero Section ────────────────────────────────────────────────────────── */

.hero-section {
    position: relative;
}

.hero-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-label {
    margin-block: 0;
}

.hero-label-line {
    height: 1px;
    width: 2rem;
    background-color: var(--wp--preset--color--clay);
    border: none;
    flex-shrink: 0;
}

.hero-title a {
    text-decoration: none;
    color: inherit;
    transition: color var(--laylas-transition);
}

.hero-title a:hover {
    color: var(--wp--preset--color--clay);
}

.hero-read-more {
    font-family: var(--laylas-font-label);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--wp--preset--color--clay);
    transition: color var(--laylas-transition);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.hero-read-more:hover {
    color: var(--wp--preset--color--clay-soft);
}

/* ─── Section Headers ─────────────────────────────────────────────────────── */

.section-header__ornament {
    height: 1px;
    width: 2rem;
    flex-shrink: 0;
    background-color: var(--wp--preset--color--clay);
    border: none;
    margin-block: 0;
}

/* ─── Article Single ──────────────────────────────────────────────────────── */

.article-header {
    padding-inline: var(--wp--preset--spacing--50);
}

.article-header__category .wp-block-post-terms {
    display: block;
    margin-bottom: var(--wp--preset--spacing--40);
}

.article-header__title {
    margin-top: 0 !important;
}

.article-header__meta {
    margin-top: var(--wp--preset--spacing--50);
    padding-top: var(--wp--preset--spacing--40);
    border-top: var(--laylas-border-line);
}

.article-header__author .wp-block-post-author__name {
    font-family: var(--laylas-font-label);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--graphite);
}

.article-header__date,
.article-header__reading-time {
    font-family: var(--laylas-font-label);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--mist);
}

/* Article content typography */
.article-content > * {
    max-width: 720px;
    margin-inline: auto;
}

.article-content p {
    font-family: var(--laylas-font-body);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.85;
    color: var(--wp--preset--color--ink);
}

.article-content h2,
.article-content h3 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-content .wp-block-image {
    margin-block: 2.5rem;
}

.article-content .wp-block-image figcaption {
    font-family: var(--laylas-font-label);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--mist);
    text-align: center;
    margin-top: 0.625rem;
}

/* Drop cap */
.article-content .has-drop-cap:first-of-type::first-letter {
    font-family: var(--laylas-font-display);
    font-size: 5rem;
    font-weight: 300;
    float: left;
    line-height: 0.8;
    margin-right: 0.15em;
    margin-top: 0.1em;
    color: var(--wp--preset--color--clay);
}

/* Pull quote */
.wp-block-pullquote {
    border-top: 2px solid var(--wp--preset--color--clay);
    border-bottom: 2px solid var(--wp--preset--color--clay);
    padding-block: 2rem;
    text-align: left;
}

.wp-block-pullquote blockquote {
    margin: 0;
}

.wp-block-pullquote blockquote p {
    font-family: var(--laylas-font-display);
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--ink);
}

.wp-block-pullquote cite {
    font-family: var(--laylas-font-label);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--mist);
    font-style: normal;
    display: block;
    margin-top: 1rem;
}

/* Blockquote */
.wp-block-quote {
    border-left: 2px solid var(--wp--preset--color--clay);
    padding-left: 1.5rem;
    margin-inline: 0;
}

.wp-block-quote p {
    font-family: var(--laylas-font-body);
    font-size: 1.125rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.7;
    color: var(--wp--preset--color--graphite);
}

.wp-block-quote cite {
    font-family: var(--laylas-font-label);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--mist);
    font-style: normal;
}

/* Author bio */
.article-author-bio {
    border-left: 2px solid var(--wp--preset--color--clay-soft);
}

.article-author-full .wp-block-post-author__name {
    font-family: var(--laylas-font-display);
    font-size: 1.25rem;
    font-weight: 300;
}

.article-author-full .wp-block-post-author__bio {
    font-family: var(--laylas-font-body);
    font-size: 0.9375rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.7;
    color: var(--wp--preset--color--graphite);
}

/* ─── Reading Progress ────────────────────────────────────────────────────── */

.reading-progress-container {
    position: fixed;
    top: var(--laylas-header-height);
    left: 0;
    right: 0;
    z-index: 99;
    height: 2px;
    background: transparent;
}

.reading-progress-bar {
    height: 100%;
    background-color: var(--wp--preset--color--clay);
    width: 0%;
    transition: width 0.1s linear;
}

/* ─── Newsletter Form ─────────────────────────────────────────────────────── */

.laylas-newsletter-form {
    width: 100%;
}

.laylas-newsletter-form__inner {
    display: flex;
    gap: 0;
    align-items: stretch;
    width: 100%;
}

.laylas-newsletter-form__input {
    flex: 1;
    font-family: var(--laylas-font-body);
    font-size: 0.9375rem;
    font-weight: 300;
    font-style: italic;
    border: 1px solid var(--wp--preset--color--mist);
    border-right: none;
    background: transparent;
    padding: 0.85rem 1.25rem;
    color: var(--wp--preset--color--alabaster);
    outline: none;
    transition: border-color var(--laylas-transition);
    min-width: 0;
}

.newsletter-section .laylas-newsletter-form__input {
    color: var(--wp--preset--color--stone);
    border-color: rgba(140, 133, 122, 0.4);
}

.newsletter-section .laylas-newsletter-form__input::placeholder {
    color: var(--wp--preset--color--mist);
}

.laylas-newsletter-form__input:focus {
    border-color: var(--wp--preset--color--clay-soft);
}

.laylas-newsletter-form__submit {
    font-family: var(--laylas-font-label) !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    background-color: var(--wp--preset--color--clay) !important;
    color: var(--wp--preset--color--alabaster) !important;
    border: 1px solid var(--wp--preset--color--clay) !important;
    padding: 0.85rem 1.5rem !important;
    cursor: pointer;
    transition: background-color var(--laylas-transition), border-color var(--laylas-transition);
    white-space: nowrap;
    flex-shrink: 0;
    appearance: none;
    border-radius: 0;
}

.laylas-newsletter-form__submit:hover {
    background-color: var(--wp--preset--color--clay-soft) !important;
    border-color: var(--wp--preset--color--clay-soft) !important;
}

.laylas-newsletter-form__note {
    font-family: var(--laylas-font-label);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--mist);
    margin-top: 0.875rem;
    margin-bottom: 0;
}

/* Footer newsletter */
.site-footer .laylas-newsletter-form__input {
    border-color: rgba(140, 133, 122, 0.35);
    color: var(--wp--preset--color--stone);
    background: transparent;
}

.site-footer .laylas-newsletter-form__input::placeholder {
    color: var(--wp--preset--color--mist);
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar-widget__label {
    font-family: var(--laylas-font-label) !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--clay) !important;
    margin-bottom: 1.25rem !important;
    margin-top: 0 !important;
}

.sidebar-categories .wp-block-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-categories .wp-block-categories-list li {
    border-bottom: var(--laylas-border-line);
    padding-block: 0.625rem;
}

.sidebar-categories .wp-block-categories-list a {
    font-family: var(--laylas-font-label);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--wp--preset--color--graphite);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color var(--laylas-transition);
}

.sidebar-categories .wp-block-categories-list a:hover {
    color: var(--wp--preset--color--clay);
}

.sidebar-latest-posts .wp-block-latest-posts__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-latest-posts .wp-block-latest-posts__list li {
    border-bottom: var(--laylas-border-line);
    padding-block: 0.875rem;
}

.sidebar-latest-posts .wp-block-latest-posts__list li:last-child {
    border-bottom: none;
}

.sidebar-latest-posts .wp-block-latest-posts__list a {
    font-family: var(--laylas-font-display);
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.4;
    text-decoration: none;
    color: var(--wp--preset--color--ink);
    transition: color var(--laylas-transition);
}

.sidebar-latest-posts .wp-block-latest-posts__list a:hover {
    color: var(--wp--preset--color--clay);
}

.sidebar-latest-posts .wp-block-latest-posts__post-date {
    font-family: var(--laylas-font-label);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--mist);
    display: block;
    margin-top: 0.25rem;
}

/* ─── Archive / Grid ──────────────────────────────────────────────────────── */

.blog-post-grid,
.archive-post-grid,
.category-post-grid,
.picks-grid,
.cat-section__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--60);
    width: 100%;
}

/* ─── Pagination ──────────────────────────────────────────────────────────── */

.wp-block-query-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: var(--wp--preset--spacing--70);
}

.wp-block-query-pagination-numbers {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
    font-family: var(--laylas-font-label);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--graphite);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    transition: all var(--laylas-transition);
    display: inline-block;
    min-width: 2.5rem;
    text-align: center;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous a:hover,
.wp-block-query-pagination-next a:hover {
    color: var(--wp--preset--color--clay);
    border-color: var(--wp--preset--color--clay);
}

.wp-block-query-pagination-numbers .page-numbers.current {
    background-color: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--alabaster);
    border-color: var(--wp--preset--color--ink);
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
    margin-top: 0;
    width: 100%;
    overflow: hidden;
    background-color: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--alabaster);
}

.site-footer__top,
.site-footer__bottom {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1240px);
    margin-inline: auto;
    padding-inline: var(--wp--preset--spacing--60);
}

.site-footer__wordmark {
    text-align: center;
}

.site-footer__wordmark .wp-block-site-title {
    margin: 0;
}

.site-footer__wordmark .wp-block-site-title a {
    display: block;
    text-decoration: none;
    color: var(--wp--preset--color--alabaster);
    letter-spacing: 0;
    line-height: 1;
    overflow-wrap: anywhere;
}

.site-footer__columns {
    align-items: flex-start;
}

.site-footer__col-label,
.site-footer__about-text,
.site-footer__newsletter-text {
    margin-top: 0;
}

.site-footer__nav .wp-block-navigation__container {
    flex-direction: column;
    gap: 0.625rem;
}

.site-footer__nav .wp-block-navigation-item__content {
    font-family: var(--laylas-font-label);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--stone);
    text-decoration: none;
    transition: color var(--laylas-transition);
}

.site-footer__nav .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--clay-soft);
}

.site-footer__bottom > .wp-block-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.site-footer__copyright,
.site-footer__legal {
    margin: 0;
}

/* ─── Comments ────────────────────────────────────────────────────────────── */

.article-comments-title {
    margin-top: 0 !important;
    margin-bottom: var(--wp--preset--spacing--50) !important;
}

.wp-block-post-comments-form input,
.wp-block-post-comments-form textarea {
    font-family: var(--laylas-font-body);
    font-size: 0.9375rem;
    font-weight: 300;
    border: 1px solid var(--wp--preset--color--line);
    background: var(--wp--preset--color--paper);
    padding: 0.75rem 1rem;
    transition: border-color var(--laylas-transition);
    border-radius: 0;
    appearance: none;
    width: 100%;
}

.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus {
    border-color: var(--wp--preset--color--clay);
    outline: none;
}

.wp-block-post-comments-form label {
    font-family: var(--laylas-font-label);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--mist);
    display: block;
    margin-bottom: 0.5rem;
}

.wp-block-post-comments-form .submit {
    font-family: var(--laylas-font-label) !important;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background-color: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--alabaster);
    border: none;
    padding: 0.85rem 2rem;
    cursor: pointer;
    transition: background-color var(--laylas-transition);
    border-radius: 0;
    appearance: none;
}

.wp-block-post-comments-form .submit:hover {
    background-color: var(--wp--preset--color--clay);
}

/* ─── Search ──────────────────────────────────────────────────────────────── */

.wp-block-search {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.wp-block-search__input {
    font-family: var(--laylas-font-body);
    font-size: 0.9375rem;
    font-weight: 300;
    border: 1px solid var(--wp--preset--color--line);
    background: var(--wp--preset--color--paper);
    padding: 0.75rem 1.25rem;
    flex: 1;
    outline: none;
    transition: border-color var(--laylas-transition);
    border-radius: 0;
    appearance: none;
    min-width: 0;
}

.wp-block-search__input:focus {
    border-color: var(--wp--preset--color--clay);
}

.wp-block-search__button {
    font-family: var(--laylas-font-label) !important;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background-color: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--alabaster);
    border: 1px solid var(--wp--preset--color--ink);
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: background-color var(--laylas-transition);
    border-radius: 0;
    flex-shrink: 0;
}

.wp-block-search__button:hover {
    background-color: var(--wp--preset--color--clay);
    border-color: var(--wp--preset--color--clay);
}

/* ─── 404 Page ────────────────────────────────────────────────────────────── */

.error-404 {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ─── Featured Image ──────────────────────────────────────────────────────── */

.wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wp-block-post-featured-image a {
    display: block;
}

/* ─── Group: Story Card Style ─────────────────────────────────────────────── */

.is-style-laylas-card {
    background-color: var(--wp--preset--color--paper);
    padding: var(--wp--preset--spacing--50);
}

.is-style-laylas-ruled {
    border-top: 1px solid var(--wp--preset--color--line);
    padding-top: var(--wp--preset--spacing--50);
}

/* ─── Responsive: Tablet ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {

    .blog-post-grid,
    .archive-post-grid,
    .category-post-grid,
    .picks-grid,
    .cat-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-header__inner {
        padding-inline: var(--wp--preset--spacing--50);
        gap: var(--wp--preset--spacing--40);
    }

    .site-header__navigation .wp-block-navigation__container {
        gap: 1.25rem;
    }

    .site-header .wp-block-search__input {
        width: 112px;
    }

    .hero-inner {
        flex-direction: column;
    }

    .hero-image-col,
    .hero-content-col {
        flex-basis: 100% !important;
        width: 100%;
    }

    .hero-featured-image img {
        max-height: 500px;
    }

    .latest-layout {
        flex-direction: column;
    }

    .latest-featured,
    .latest-grid {
        flex-basis: 100% !important;
        width: 100%;
    }

    .site-footer__columns {
        flex-direction: column;
        gap: var(--wp--preset--spacing--60) !important;
    }

    .site-footer__col {
        flex-basis: 100% !important;
        width: 100%;
    }
}

@media (max-width: 900px) {

    .site-header__actions {
        display: none;
    }

    .site-header__nav {
        flex: 0 1 auto;
        margin-left: auto;
    }
}

/* ─── Responsive: Mobile ──────────────────────────────────────────────────── */

@media (max-width: 768px) {

    :root {
        --laylas-header-height: 60px;
    }

    .blog-post-grid,
    .archive-post-grid,
    .category-post-grid,
    .picks-grid,
    .cat-section__grid {
        grid-template-columns: 1fr;
    }

    .site-header__inner {
        padding-inline: var(--wp--preset--spacing--40);
        padding-block: 0.75rem;
        gap: var(--wp--preset--spacing--30);
        min-height: var(--laylas-header-height);
    }

    .site-header__left {
        gap: var(--wp--preset--spacing--30);
    }

    .site-header__title .wp-block-site-title {
        font-size: 1.125rem;
    }

    .site-header__logo .wp-block-site-logo img {
        max-height: 34px;
    }

    .site-header__navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none;
    }

    .site-header__navigation .wp-block-navigation__responsive-container-open {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .site-header__actions {
        display: none;
    }

    .article-body-wrap {
        padding-inline: var(--wp--preset--spacing--40);
    }

    .article-header {
        padding-inline: var(--wp--preset--spacing--40);
    }

    .laylas-newsletter-form__inner {
        flex-direction: column;
    }

    .laylas-newsletter-form__input {
        border-right: 1px solid var(--wp--preset--color--mist);
        border-bottom: none;
    }

    .newsletter-section .laylas-newsletter-form__input {
        border-right: 1px solid rgba(140, 133, 122, 0.4);
    }

    .laylas-newsletter-form__submit {
        padding: 0.85rem !important;
        text-align: center;
    }

    .hero-section {
        padding-inline: var(--wp--preset--spacing--40);
    }

    .editors-picks,
    .latest-stories,
    .category-sections,
    .newsletter-section,
    .about-intro {
        padding-inline: var(--wp--preset--spacing--40);
    }

    .site-footer__top {
        padding-inline: var(--wp--preset--spacing--40);
    }

    .site-footer__bottom {
        padding-inline: var(--wp--preset--spacing--40);
    }

    .site-footer__wordmark .wp-block-site-title a {
        font-size: var(--wp--preset--font-size--4xl);
    }

    .site-footer__bottom > .wp-block-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .wp-block-pullquote {
        padding-block: 1.5rem;
    }

    .wp-block-pullquote blockquote p {
        font-size: 1.25rem;
    }

    .related-post-grid {
        grid-template-columns: 1fr !important;
    }

}

/* ─── Print ───────────────────────────────────────────────────────────────── */

@media print {
    .site-header,
    .site-footer,
    .reading-progress-container,
    .newsletter-section,
    .article-related {
        display: none !important;
    }

    .article-content {
        max-width: 100%;
        padding: 0;
    }
}