/* Daybright — Global Styles
 * Typography scale: Figma Design System node 1:11
 * All size/weight/lh/ls values reference tokens from tokens.css
 */

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

/* ── Body ─────────────────────────────────────────────────────────── */
body {
    font-family:  var(--dbl-font-family-base, 'Source Sans 3', sans-serif);
    font-size:    var(--dbl-body-size,   1rem);
    font-weight:  var(--dbl-body-weight, 400);
    line-height:  var(--dbl-body-lh,     1.5rem);
    color:        var(--dbl-color-text-default, #3A3A3A);
    background-color: var(--dbl-color-brand-base, #FFFFFF);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

/* ── Heading scale — Figma node 1:11 ──────────────────────────────── */

/* Hero / Heading (H1) — 46/56, w600 */
h1 {
    font-family:     var(--dbl-font-family-heading, 'Source Sans 3', sans-serif);
    font-size:       var(--dbl-hero-h1-size,   2.875rem);
    font-weight:     var(--dbl-hero-h1-weight, 600);
    line-height:     var(--dbl-hero-h1-lh,     3.5rem);
    letter-spacing:  var(--dbl-hero-h1-ls,     0em);
    color:           var(--dbl-color-text-default, #3A3A3A);
    margin: 0 0 0.5em;
}

/* Section / Heading (H2) — 32/36, w600 */
h2 {
    font-size:       var(--dbl-h2-size,   2rem);
    font-weight:     var(--dbl-h2-weight, 600);
    line-height:     var(--dbl-h2-lh,     2.25rem);
    letter-spacing:  var(--dbl-h2-ls,     0em);
    color:           var(--dbl-color-text-default, #3A3A3A);
    margin: 0 0 0.5em;
}

/* Section / Heading (H3) — 24/32, w600 */
h3 {
    font-size:       var(--dbl-h3-size,   1.5rem);
    font-weight:     var(--dbl-h3-weight, 600);
    line-height:     var(--dbl-h3-lh,     2rem);
    letter-spacing:  var(--dbl-h3-ls,     0em);
    color:           var(--dbl-color-text-default, #3A3A3A);
    margin: 0 0 0.5em;
}

/* Section / Heading (H4) — 20/28, w600, ls -0.1px */
h4 {
    font-size:       var(--dbl-h4-size,   1.25rem);
    font-weight:     var(--dbl-h4-weight, 600);
    line-height:     var(--dbl-h4-lh,     1.75rem);
    letter-spacing:  var(--dbl-h4-ls,     -0.1px);
    color:           var(--dbl-color-text-default, #3A3A3A);
    margin: 0 0 0.5em;
}

h5 {
    font-size:    var(--dbl-font-size-base, 1rem);
    font-weight:  600;
    line-height:  1.5rem;
    color:        var(--dbl-color-text-default, #3A3A3A);
    margin: 0 0 0.5em;
}

h6 {
    font-size:    var(--dbl-font-size-sm, 0.875rem);
    font-weight:  700;
    line-height:  1.25rem;
    color:        var(--dbl-color-text-muted, #6B7280);
    margin: 0 0 0.5em;
}

/* ── Utility classes that blocks and content can reference ─────────── */

/* Section / Eyebrow — 16/32, w700, UPPERCASE */
.dbl-eyebrow {
    font-family:     var(--dbl-font-family-base, 'Source Sans 3', sans-serif);
    font-size:       var(--dbl-eyebrow-size,      1rem);
    font-weight:     var(--dbl-eyebrow-weight,    700);
    line-height:     var(--dbl-eyebrow-lh,        2rem);
    text-transform:  var(--dbl-eyebrow-transform, uppercase);
    letter-spacing:  var(--dbl-eyebrow-ls,        0.08em);
    color:           var(--dbl-color-winter-700,  #005988);
    margin: 0;
}

/* Hero / Eyebrow — 24/32, w600, UPPERCASE */
.dbl-hero-eyebrow {
    font-family:     var(--dbl-font-family-base, 'Source Sans 3', sans-serif);
    font-size:       var(--dbl-hero-eyebrow-size,      1.5rem);
    font-weight:     var(--dbl-hero-eyebrow-weight,    600);
    line-height:     var(--dbl-hero-eyebrow-lh,        2rem);
    text-transform:  var(--dbl-hero-eyebrow-transform, uppercase);
    letter-spacing:  var(--dbl-hero-eyebrow-ls,        0em);
    margin: 0;
}

/* Hero / Lead — 24/32, w400 */
.dbl-hero-lead {
    font-size:    var(--dbl-hero-lead-size,   1.5rem);
    font-weight:  var(--dbl-hero-lead-weight, 400);
    line-height:  var(--dbl-hero-lead-lh,     2rem);
    margin: 0;
}

/* Body / Default — 16/24, w400 */
.dbl-body {
    font-size:    var(--dbl-body-size,   1rem);
    font-weight:  var(--dbl-body-weight, 400);
    line-height:  var(--dbl-body-lh,     1.5rem);
    color:        var(--dbl-color-text-muted, #6B7280);
    margin: 0;
}

/* ── Site chrome ─────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--dbl-color-brand-base, #FFFFFF);
    border-bottom: 1px solid var(--dbl-color-neutral-100, #F5F5F5);
}

/* Paragraph defaults */
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ── Single Post ─────────────────────────────────────────────────── */
.dbl-single-post {
    padding-block: 2.5rem 4rem;
}
@media (min-width: 768px) {
    .dbl-single-post {
        padding-block: 3.5rem 5rem;
    }
}

.dbl-single-post__hero {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.dbl-single-post__header {
    padding-block: 2rem 1.5rem;
    margin-bottom: 2rem;
}

.dbl-single-post__date {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--dbl-color-brand-primary, #0086C4);
    margin: 0 0 0.75rem;
}

.dbl-single-post__title {
    margin: 0 0 1rem;
    color: var(--dbl-color-winter-700, #005988);
}

.dbl-single-post__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.dbl-single-post__cats a {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    background: #E7F7FD;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    color: var(--dbl-color-text-default, #3A3A3A);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dbl-single-post__cats a:hover {
    background: #CBF0FC;
    color: var(--dbl-color-winter-700, #005988);
}

.dbl-single-post__body {
    max-width: 54rem;
    margin-inline: auto;
    padding-block: 0 3rem;
}

@media (max-width: 767px) {
    .dbl-single-post__hero figure{
        display: none;
    }
}

.dbl-single-post .wp-block-post-featured-image {
    max-width: 500px;
}

.dbl-single-post .wp-block-post-featured-image img {
    border-radius: 10px;
}

/* ── Post content spacing ────────────────────────────────────────────── */
.dbl-single-post .wp-block-post-content p,
.dbl-single-post .wp-block-post-content ul,
.dbl-single-post .wp-block-post-content ol,
.dbl-single-post .wp-block-post-content li {
    margin-bottom: 1.5em;
}
.dbl-single-post .wp-block-post-content h2,
.dbl-single-post .wp-block-post-content h3,
.dbl-single-post .wp-block-post-content h4,
.dbl-single-post .wp-block-post-content h5,
.dbl-single-post .wp-block-post-content h6 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.dbl-single-post .wp-block-post-content h2:first-child,
.dbl-single-post .wp-block-post-content h3:first-child,
.dbl-single-post .wp-block-post-content h4:first-child,
.dbl-single-post .wp-block-post-content h5:first-child,
.dbl-single-post .wp-block-post-content h6:first-child {
    margin-top: 0;
}

/* ── Archive / Blog index ────────────────────────────────────────────── */
.dbl-archive__header {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--dbl-color-neutral-100, #F5F5F5);
}

.dbl-archive__title {
    font-size: var(--dbl-h2-size, 2rem);
    font-weight: var(--dbl-h2-weight, 600);
    color: var(--dbl-color-winter-700, #005988);
    margin: 0 0 0.5rem;
}

.dbl-archive__desc {
    color: var(--dbl-color-text-muted, #6B7280);
    margin: 0;
}

.archive .dbl-container,
.blog .dbl-container {
    padding-block: 2.5rem 4rem;
}
@media (min-width: 768px) {
    .archive .dbl-container,
    .blog .dbl-container {
        padding-block: 3.5rem 5rem;
    }
}

.archive .dbl-container .wp-block-post-template,
.blog .dbl-container .wp-block-post-template {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
@media (min-width: 768px) {
    .archive .dbl-container .wp-block-post-template,
    .blog .dbl-container .wp-block-post-template {
        gap: 2.5rem;
    }
}

.archive .dbl-container .wp-block-post,
.blog .dbl-container .wp-block-post {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--dbl-color-neutral-100, #F5F5F5);
}

.archive .dbl-container .wp-block-post:last-child,
.blog .dbl-container .wp-block-post:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.archive .dbl-container .wp-block-post figure,
.blog .dbl-container .wp-block-post figure {
    flex: 1;
}

.archive .dbl-container .wp-block-post .content-wrapper,
.blog .dbl-container .wp-block-post .content-wrapper {
    flex: 2;
}