/*
 * Site Starter front-end styling.
 *
 * Layered on top of Blocksy. Every colour is taken from the theme's own
 * palette variables, so each site keeps its own accent with no per-site CSS:
 *   --theme-palette-color-1  accent (links, buttons)   2  accent hover
 *   --theme-palette-color-3  body text                 4  headings / dark
 *   --theme-palette-color-5  borders                   6  light background
 *   --theme-palette-color-7  lighter background        8  white
 *
 * Selectors stay low-specificity (:where) wherever a plugin may want to win;
 * the product review block (.prb-*) is deliberately left untouched so its own
 * design keeps control inside review posts.
 */

:root {
    --bss-radius: 10px;
    --bss-radius-lg: 14px;
    --bss-shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 8px 24px -12px rgb(16 24 40 / 18%);
    --bss-measure: 70ch;
}

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

.ct-header [data-row="middle"] {
    border-bottom: 1px solid var(--theme-palette-color-5);
}

.ct-header .site-title a {
    color: var(--theme-palette-color-4);
    letter-spacing: -0.02em;
    transition: color 0.15s ease;
}

.ct-header .site-title a:hover {
    color: var(--theme-palette-color-1);
}

/* Menu links: accent underline that grows in, and a persistent one on the
   current page, so the active section is readable at a glance. */
.ct-header .menu-container .ct-menu-link {
    position: relative;
    transition: color 0.15s ease;
}

.ct-header .menu-container > ul > li > .ct-menu-link::after {
    content: "";
    position: absolute;
    left: var(--bss-underline-inset, 0);
    right: var(--bss-underline-inset, 0);
    bottom: 0.15em;
    height: 2px;
    border-radius: 2px;
    background: var(--theme-palette-color-1);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.18s ease;
}

.ct-header .menu-container > ul > li:hover > .ct-menu-link::after,
.ct-header .menu-container > ul > li:focus-within > .ct-menu-link::after,
.ct-header .menu-container > ul > li.current-menu-item > .ct-menu-link::after,
.ct-header .menu-container > ul > li.current-menu-ancestor > .ct-menu-link::after {
    transform: scaleX(1);
}

.ct-header .menu-container > ul > li:hover > .ct-menu-link,
.ct-header .menu-container > ul > li.current-menu-item > .ct-menu-link {
    color: var(--theme-palette-color-1);
}

/* Dropdowns: softer card instead of a hard rectangle. */
.ct-header .menu-container .sub-menu {
    border-radius: var(--bss-radius);
    box-shadow: var(--bss-shadow);
    overflow: hidden;
    padding-block: 6px;
}

.ct-header .menu-container .sub-menu .ct-menu-link {
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ct-header .menu-container .sub-menu li:hover > .ct-menu-link {
    background: color-mix(in srgb, var(--theme-palette-color-1) 8%, transparent);
    color: var(--theme-palette-color-1);
}

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

/* Blocksy's generated stylesheet already owns the footer background with
   `[data-footer*="type-1"] .ct-footer { background-color: … }` (0,2,0) and
   pins both rows to `transparent` at (0,3,0). Repainting the rows therefore
   loses; the element itself has to be targeted one notch more specifically,
   which `body[data-footer]` does (0,2,1) without resorting to !important. */
body[data-footer] .ct-footer {
    background-color: var(--theme-palette-color-4);
    border-top: 3px solid var(--theme-palette-color-1);
}

.ct-footer [data-row="middle"] {
    padding-block: 48px 36px;
}

.ct-footer .ct-widget > .widget-title {
    color: var(--theme-palette-color-8);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
    padding-bottom: 10px;
    position: relative;
}

.ct-footer .ct-widget > .widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 2px;
    border-radius: 2px;
    background: var(--theme-palette-color-1);
}

.ct-footer .ct-widget,
.ct-footer .ct-widget li {
    color: color-mix(in srgb, var(--theme-palette-color-8) 72%, transparent);
}

.ct-footer .ct-widget ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-footer .ct-widget a {
    color: color-mix(in srgb, var(--theme-palette-color-8) 78%, transparent);
    text-decoration: none;
    transition: color 0.15s ease;
}

.ct-footer .ct-widget a:hover {
    color: var(--theme-palette-color-8);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--theme-palette-color-1);
}

.ct-footer [data-row="bottom"] {
    border-top: 1px solid color-mix(in srgb, var(--theme-palette-color-8) 14%, transparent);
    padding-block: 20px;
}

.ct-footer [data-row="bottom"],
.ct-footer [data-column="copyright"] {
    color: color-mix(in srgb, var(--theme-palette-color-8) 60%, transparent);
    font-size: 0.875rem;
}

.ct-footer [data-column="copyright"] a {
    color: color-mix(in srgb, var(--theme-palette-color-8) 85%, transparent);
}

/* ─────────────────────────── Single post content ──────────────────────── */
/*
 * Everything below is scoped with a child combinator (`.entry-content > …`)
 * on purpose: the product review block renders its own headings, tables and
 * links nested inside its wrapper, and it owns that design. Direct-child
 * scoping styles the prose a generator wrote while leaving the block alone.
 */

.single .entry-content {
    font-size: 1.0625rem;
    line-height: 1.75;
}

/* Keep prose readable; the review block sets its own widths and is exempt. */
.single .entry-content > :where(p, ul, ol, h2, h3, h4, blockquote, figure, .wp-block-table) {
    max-width: var(--bss-measure);
}

.single .entry-content > p:first-of-type,
.single .entry-content > .prb-updated + p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--theme-palette-color-3);
}

.single .entry-content > :where(h2) {
    margin-top: 2.2em;
    margin-bottom: 0.6em;
    padding-left: 14px;
    border-left: 4px solid var(--theme-palette-color-1);
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.single .entry-content > :where(h3) {
    margin-top: 1.8em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.single .entry-content > :where(h3)::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--theme-palette-color-1) 55%, transparent);
    vertical-align: middle;
}

.single .entry-content > :where(p) a:not(.wp-block-button__link) {
    color: var(--theme-palette-color-1);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--theme-palette-color-1) 45%, transparent);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.single .entry-content > :where(p) a:not(.wp-block-button__link):hover {
    color: var(--theme-palette-color-2);
    text-decoration-color: currentColor;
}

/* Accent markers on prose lists, without touching plugin lists. */
.single .entry-content > :where(ul, ol) {
    padding-left: 1.3em;
}

.single .entry-content > :where(ul, ol) li {
    margin-block: 0.45em;
}

.single .entry-content > ul li::marker {
    color: var(--theme-palette-color-1);
}

.single .entry-content > ol li::marker {
    color: var(--theme-palette-color-1);
    font-weight: 600;
}

.single .entry-content > :where(blockquote) {
    margin: 1.8em 0;
    padding: 18px 22px;
    border-left: 4px solid var(--theme-palette-color-1);
    border-radius: 0 var(--bss-radius) var(--bss-radius) 0;
    background: var(--theme-palette-color-6);
    font-style: normal;
}

.single .entry-content > :where(blockquote) p:last-child {
    margin-bottom: 0;
}

.single .entry-content > :where(figure) img {
    border-radius: var(--bss-radius);
}

.single .entry-content > :where(table, figure.wp-block-table table) {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.95rem;
}

.single .entry-content > :where(table, figure.wp-block-table table) :where(th, td) {
    border: 1px solid var(--theme-palette-color-5);
    padding: 10px 12px;
    text-align: left;
}

.single .entry-content > :where(table, figure.wp-block-table table) th {
    background: var(--theme-palette-color-6);
    color: var(--theme-palette-color-4);
}

/* The "last updated" line reads as metadata, not body copy. */
.single .entry-content .prb-updated {
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--theme-palette-color-3) 70%, transparent);
    margin-bottom: 1.4em;
}

/* ───────────────────── Single post furniture (Blocksy parts) ──────────── */

.single :where(.ct-share-box, .ct-author-box, .ct-related-posts, .ct-newsletter-subscribe) {
    border-radius: var(--bss-radius-lg);
}

.single .ct-author-box {
    border: 1px solid var(--theme-palette-color-5);
    background: var(--theme-palette-color-7);
    padding: 24px;
}

.single .ct-related-posts .ct-module-title,
.single .ct-author-box .ct-author-name {
    color: var(--theme-palette-color-4);
}

.single .ct-related-posts article {
    border-radius: var(--bss-radius);
    overflow: hidden;
}

.single .ct-related-posts .entry-title a:hover {
    color: var(--theme-palette-color-1);
}

/* Sidebar widgets echo the footer's title treatment, in light colours. */
.ct-sidebar .ct-widget > .widget-title {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-palette-color-4);
    padding-bottom: 10px;
    position: relative;
}

.ct-sidebar .ct-widget > .widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    border-radius: 2px;
    background: var(--theme-palette-color-1);
}

.ct-sidebar .ct-widget a:hover {
    color: var(--theme-palette-color-1);
}

/* Sidebar lists need the same breathing room as the footer ones; Blocksy's
   defaults run recent-post titles together when they wrap to two lines. */
.ct-sidebar .ct-widget ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-sidebar .ct-widget li {
    line-height: 1.45;
}

.ct-sidebar .ct-widget > .widget-title {
    margin-bottom: 16px;
}

@media (max-width: 999.98px) {
    .ct-footer [data-row="middle"] {
        padding-block: 36px 24px;
    }

    .single .entry-content > p:first-of-type,
    .single .entry-content > .prb-updated + p {
        font-size: 1.08rem;
    }
}