/*
 * Karmafy theme — main stylesheet.
 *
 * Organisation:
 *   1. CSS custom properties (palette, fonts, spacing)
 *   2. Reset & base
 *   3. Layout
 *   4. Header + primary nav
 *   5. Content + blocks
 *   6. Footer
 *   7. Post cards (archive / blog listing)
 *   8. Tag cloud (SQSP migrated)
 *   9. Responsive
 */

/* --------------------------------------------------------------------------
 * 1. CSS custom properties
 * ------------------------------------------------------------------------ */

:root {
    /* Brand palette (matches theme.json). */
    --teal: #00796b;
    --teal-dark: #005047;
    --teal-bright: #009688;
    --coral: #f0523d;
    --coral-dark: #c43d2b;
    --amber: #ffc107;
    --ink: #272727;
    --ink-soft: #3e3e3e;
    --gray-light: #f6f6f6;
    --gray-border: #dddddd;
    --gray-mute: #999999;
    --white: #ffffff;

    /* Typography. */
    --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Roboto Slab', Georgia, serif;
    --font-system: 'Helvetica Neue', Arial, sans-serif;

    /* Spacing. */
    --site-max: 1160px;
    --site-pad: 1.5rem;
    --content-max: 760px;

    /* Header. */
    --header-h: 80px;
}

/* --------------------------------------------------------------------------
 * 2. Reset & base
 * ------------------------------------------------------------------------ */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video, figure {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--teal);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover,
a:focus {
    color: var(--teal-dark);
    text-decoration: underline;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link:focus {
    clip: auto !important;
    clip-path: none !important;
    background: var(--teal);
    color: var(--white);
    display: block;
    font-weight: 600;
    height: auto;
    padding: 0.75rem 1rem;
    position: absolute !important;
    left: 1rem;
    top: 1rem;
    width: auto;
    z-index: 100000;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
 * 3. Layout
 * ------------------------------------------------------------------------ */

.site-main {
    min-height: calc(100vh - var(--header-h) - 240px);
}

.content-area,
.front-page {
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 2.5rem var(--site-pad);
}

/* Single blog posts get the narrower reading width. Pages (.entry without
   .entry--post) inherit the wider .content-area width (matches SQSP #page
   at ~1020px). */
.entry--post {
    max-width: var(--content-max);
    margin: 0 auto;
}

.front-page .entry-content {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
 * 4. Header + primary nav
 * ------------------------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--teal-bright);
}

.site-header__inner {
    width: 100%;
    margin: 0 auto;
    padding: 20px var(--site-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-h);
}

.site-brand {
    flex-shrink: 0;
}

.site-brand__logo {
    display: inline-block;
}

.site-brand__logo img {
    height: 48px;
    width: auto;
    display: block;
}

.site-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}

.site-nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.site-nav li {
    position: relative;
    margin: 0;
}

.site-nav a {
    display: block;
    padding: 0.5rem 0;
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1em;
    text-decoration: none;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current-menu-parent > a,
.site-nav .current-menu-ancestor > a {
    color: var(--amber);
    text-decoration: none;
}

/* No caret on desktop — original karmafy.com has none.
   Hover (mouse) or :focus-within (keyboard) opens the subnav. */

.site-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: -0.5em;
    list-style: none;
    margin: 0;
    padding: 1em 0;
    background: var(--teal-bright);
    min-width: 220px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    white-space: nowrap;
}

/* Last top-level folder (Company) opens right-aligned to match SQSP. */
.site-nav li.menu-item-has-children:last-child > .sub-menu {
    left: auto;
    right: -1em;
    text-align: right;
}

/* Open on hover/focus (mouse + keyboard) — desktop baseline. */
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu,
.site-nav li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-nav .sub-menu a {
    padding: 0.5em 1.5em;
    font-size: 13px;
    color: var(--white);
}

.site-nav .sub-menu a:hover,
.site-nav .sub-menu a:focus,
.site-nav .sub-menu .current-menu-item > a {
    color: var(--amber);
    background: transparent;
    text-decoration: none;
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 0.5rem;
    cursor: pointer;
}

.nav-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    margin: 5px 0;
    transition: transform 0.2s, opacity 0.2s;
}

/* --------------------------------------------------------------------------
 * 5. Content + blocks
 * ------------------------------------------------------------------------ */

.entry-title,
.archive-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 1rem;
    line-height: 1.2;
}

.entry-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.archive-title {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    margin-bottom: 1.5rem;
}

.entry-header {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--gray-border);
    padding-bottom: 1rem;
}

.entry-meta {
    font-size: 0.875rem;
    color: var(--ink-soft);
    margin-top: 0.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.entry-content {
    font-size: 1.05rem;
    line-height: 1.7;
}

.entry-content p {
    margin: 0 0 1.25rem;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.3;
    margin: 2rem 0 1rem;
}

.entry-content h1 { font-size: 2.25rem; font-weight: 700; }
.entry-content h2 { font-size: 1.875rem; font-weight: 600; }
.entry-content h3 { font-size: 1.5rem; font-weight: 600; }
.entry-content h4 { font-size: 1.25rem; font-weight: 600; }
.entry-content h5 { font-size: 1.125rem; font-weight: 600; }
.entry-content h6 { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

.entry-content ul,
.entry-content ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.entry-content li {
    margin-bottom: 0.5rem;
}

.entry-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--teal);
    background: var(--gray-light);
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--ink-soft);
}

.entry-content cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-style: normal;
    color: var(--ink);
}

/* Single images: rounded corners + subtle border. */
.wp-block-image {
    margin: 1.5rem 0;
}

.wp-block-image img {
    border-radius: 4px;
}

/* WP core floats bare `<img class="alignright">` but not the modern
 * `<figure class="wp-block-image alignright">` wrapper. Restore float
 * behaviour so subsequent inline content flows around the image (mirrors
 * SQSP `float float-right` / `float float-left` on the source block).
 *
 * `clear: both` isolates consecutive floats into separate visual pairs —
 * without it, a floated image taller than its sibling text hangs down
 * into the next (image + text) pair's space and squeezes them into the
 * leftover width. SQSP achieves the same isolation via absolute grid
 * positioning; CSS floats need explicit clearing. */
.wp-block-image.alignright {
    float: right;
    clear: both;
    margin: 0 0 1em 1.5em;
    max-width: 50%;
}
.wp-block-image.alignleft {
    float: left;
    clear: both;
    margin: 0 1.5em 1em 0;
    max-width: 50%;
}
.wp-block-image.alignright img,
.wp-block-image.alignleft img {
    width: 100%;
    height: auto;
}

/* SQSP `float float-right` + text pairs are wrapped at converter time in
 * a wp:group with this class. `display: flow-root` establishes a new
 * block formatting context that contains the float — preventing it from
 * cascading into the next (image + text) pair or a following wp:columns
 * block. Matches SQSP's per-pair isolation (which it achieves via
 * absolute grid positioning rather than CSS floats). */
.karmafy-float-pair {
    display: flow-root;
}

.wp-block-image figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--ink-soft);
    text-align: center;
}

/* Galleries: keep SQSP-like grid.
 * Modern WP galleries use nested wp:image blocks (no <ul>/<li>), so we
 * target figure.wp-block-image rather than the legacy .blocks-gallery-item. */
.wp-block-gallery {
    margin: 1.5rem 0;
}

.wp-block-gallery figure.wp-block-image {
    border: 0;
    border-radius: 0;
    overflow: hidden;
}

.wp-block-gallery figure.wp-block-image img {
    border: 0;
    border-radius: 0;
}

/*
 * SQSP slideshow/slider galleries rendered via .karmafy-slideshow.
 * Layout: one large image at a time; prev/next arrows overlaid; fade-out →
 * flash-through-white → fade-in tween between slides.
 *
 * Technique: all items are position:absolute and stacked. The first child
 * stays in normal flow (via :first-child rule) so the figure always has a
 * defined height — this prevents the figure collapsing during the active-
 * item swap, which was causing the "missing image" flicker at loop-around.
 *
 * The tween is driven by CSS opacity transitions on the items themselves:
 * removing .is-active fades the old item out (1 → 0), then adding it to
 * the new item fades it in (0 → 1). When both items are at low opacity,
 * the page background shows through — that's the "flash to white".
 */
.wp-block-gallery.karmafy-slideshow {
    position: relative;
    background: #ffffff;
    /* Extra breathing room below a slideshow before the next block (typically
     * a CTA gallery or another content block in the same column). */
    margin-bottom: 1.5rem;
}

/*
 * The `:not(#individual-image)` clause matches WP core's selector specificity
 * for `.has-nested-images` gallery items. Without it, WP's default
 * `width: calc(50% - ...)` rule wins and slideshow items 2+ render at
 * thumbnail size. Same specificity + later source order = our rule wins.
 */
.wp-block-gallery.karmafy-slideshow figure.wp-block-image:not(#individual-image) {
    position: absolute;
    top: 0;
    left: 0;
    /* `!important` because WP's block-library CSS forces a calc(50%-...)
     * width on nested gallery images with equal specificity to ours.
     * Source-order tie goes to WP (its styles load after the theme's).
     * The important here is justified: a slideshow intentionally overrides
     * the default grid layout — every slide needs the full gallery width. */
    width: 100% !important;
    margin: 0;
    border: 0;
    border-radius: 0;
    opacity: 0;
    /* Matches SQSP source: .slides { transition: opacity .2s ease-out } */
    transition: opacity 0.2s ease-out;
    pointer-events: none;
}

/* First child always in flow so the figure has a stable height even when
   .is-active is between items during the swap. */
.wp-block-gallery.karmafy-slideshow figure.wp-block-image:first-child:not(#individual-image) {
    position: relative;
}

.wp-block-gallery.karmafy-slideshow figure.wp-block-image.is-active:not(#individual-image) {
    opacity: 1;
    pointer-events: auto;
}

/* Pre-JS fallback: show the first item so the gallery isn't empty if
   slideshow.js fails to load. */
.wp-block-gallery.karmafy-slideshow:not(.js-ready) figure.wp-block-image:first-child:not(#individual-image) {
    opacity: 1;
}

.wp-block-gallery.karmafy-slideshow figure.wp-block-image:not(#individual-image) img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

/* Prev/next nav arrows overlaid on the image.
 * Values lifted verbatim from the SQSP source CSS
 * (.sqs-gallery-controls .previous / .next in site.css):
 *   background-color: rgba(0,0,0,.12)   [0.2 on hover]
 *   padding: 10px; line-height: 40px; margin-top: -30px
 *   transition: background-color 200ms cubic-bezier(.25,.46,.45,.94)
 * SVG chevron is 24×24 to match SQSP's squarespace-ui-font glyph size. */
.karmafy-slideshow__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: rgba(0, 0, 0, 0.12);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    z-index: 2;
    user-select: none;
    transition: background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.karmafy-slideshow__nav:hover {
    background: rgba(0, 0, 0, 0.2);
}

.karmafy-slideshow__nav--prev { left: 0; }
.karmafy-slideshow__nav--next { right: 0; }

.karmafy-slideshow__nav svg {
    display: block;
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .karmafy-slideshow__nav {
        padding: 6px;
    }
    .karmafy-slideshow__nav svg {
        width: 18px;
        height: 18px;
    }
}

/* Embeds: rounded corners for videos. */
.wp-block-embed {
    margin: 1.5rem 0;
}

.wp-block-embed__wrapper {
    border-radius: 4px;
    overflow: hidden;
}

.wp-block-embed iframe {
    display: block;
    width: 100%;
}

/* Buttons: matches the SQSP source. Base colour is the brand teal on a
 * few variants (small/medium) and dark ink on others; we use teal for all
 * since the brand wants that as the primary CTA colour. Hover lightens
 * via opacity (the SQSP source uses this trick over a white page bg).
 * `transition: 0.1s opacity linear` is the SQSP default — a quick,
 * barely-perceptible ease. */
.wp-block-button > .wp-block-button__link {
    background-color: var(--teal);
    color: var(--white);
    border: 0;
    border-radius: 0;
    padding: 0.8em 1.8em;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.1s linear;
}

.wp-block-button > .wp-block-button__link:hover,
.wp-block-button > .wp-block-button__link:focus {
    /* SQSP button hover: opacity 0.8 — lets the page bg show through,
     * which lightens the perceived colour. No colour/text change. */
    opacity: 0.8;
    background-color: var(--teal);
    color: var(--white);
    text-decoration: none;
}

/* Outline variant: keep the outline look but apply the same hover rule. */
.wp-block-button.is-style-outline > .wp-block-button__link {
    background-color: transparent;
    color: var(--teal);
    border: 2px solid var(--teal);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
    opacity: 0.8;
    background-color: transparent;
    color: var(--teal);
}

/* Separators: full-width grey rule. Matches the SQSP source colour
 * rgba(26, 26, 26, 0.7) via color-mix on --ink (#272727 is visually
 * indistinguishable from #1a1a1a at this lightness). */
.wp-block-separator {
    border: 0;
    height: 1px;
    background: color-mix(in srgb, var(--ink) 70%, transparent);
    margin: 2rem 0;
    width: 100%;
    max-width: none;
}

/* Wide / full alignment. */
.entry-content .alignwide {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

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

/* Hero covers (from SQSP banner-thumbnail-wrapper).
 *
 * Mirrors SQSP's `.collection-type-page .banner-thumbnail-wrapper` rule:
 * height is content-driven (min-height: 0) via 130px top/bottom padding,
 * not a fixed viewport height. Long text overlays (e.g. /product) extend
 * the hero; short ones (e.g. /faq) stay compact.
 *
 * The custom .karmafy-hero className is emitted by the converter so we
 * don't affect unrelated wp-block-cover blocks (e.g. user-added covers
 * mid-content).
 */
.wp-block-cover.karmafy-hero {
    min-height: 0;
    padding: 110px 2rem;
    margin-bottom: 2.5rem;
}

/* No-text heroes: mirror SQSP's `.banner-thumbnail-wrapper:not(.has-description)`
 * rule — image-forward sliver, no padding, 80px min-height. */
.wp-block-cover.karmafy-hero-no-text {
    min-height: 80px;
    padding: 0;
}

.entry-content > .wp-block-cover.karmafy-hero:first-child {
    margin-top: -2.5rem;
}

/* Hero headline: mirrors SQSP `.desc-wrapper p > strong`.
 * Montserrat, ~50px (xx-large=3rem), uppercase, 4px letter-spacing,
 * weight 700, 1.2em line-height. The font-family + font-size classes
 * (has-display-font-family, has-xx-large-font-size) come from theme.json
 * presets emitted by the converter. */
.karmafy-hero-headline {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    line-height: 1.2em;
    margin: 20px auto;
}

/* Hero subtitle: mirrors SQSP `.desc-wrapper p` (non-strong).
 * Roboto Slab (via has-serif-font-family class), 24px=1.5rem (set via
 * has-large-font-size class emitted by converter), 1.5em line-height. */
.wp-block-cover.karmafy-hero p:not(.karmafy-hero-headline) {
    line-height: 1.5em;
    margin: 20px auto;
}

/* --------------------------------------------------------------------------
 * 6. Footer
 * ------------------------------------------------------------------------ */

/* Pre-footer (teal bar with social icons).
 * Matches SQSP source: teal background, semi-transparent white icons that
 * brighten on hover. */
.pre-footer {
    background: var(--teal);
    padding: 1.25rem var(--site-pad);
}

.pre-footer__inner {
    max-width: var(--site-max);
    margin: 0 auto;
    text-align: center;
}

.pre-footer__socials {
    display: block;
}

.pre-footer__socials ul,
.pre-footer__socials .social-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.pre-footer__socials a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    /* Hide the link text — the icon alone is shown via CSS-driven SVG
     * background per platform (see below). Authors editing the menu in
     * WP admin see readable text like "Facebook"; visitors see the icon. */
}

.pre-footer__socials a:hover,
.pre-footer__socials a:focus {
    color: var(--white);
    text-decoration: none;
}

/* Platform-icon detection: paint an SVG icon as background-image based
 * on the href domain. Icon inherits `color` for the SVG fill via mask. */
.pre-footer__socials a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.pre-footer__socials a[href*="facebook.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 12a10 10 0 1 0-11.5 9.9v-7H8v-2.9h2.5V9.8c0-2.5 1.5-3.8 3.7-3.8 1.1 0 2.2 0.2 2.2 0.2v2.4h-1.2c-1.2 0-1.6 0.8-1.6 1.6v1.9h2.7l-0.4 2.9h-2.3v7A10 10 0 0 0 22 12z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 12a10 10 0 1 0-11.5 9.9v-7H8v-2.9h2.5V9.8c0-2.5 1.5-3.8 3.7-3.8 1.1 0 2.2 0.2 2.2 0.2v2.4h-1.2c-1.2 0-1.6 0.8-1.6 1.6v1.9h2.7l-0.4 2.9h-2.3v7A10 10 0 0 0 22 12z'/></svg>");
}

.pre-footer__socials a[href*="instagram.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2c3.2 0 3.6 0 4.9 0.1 1.2 0.1 1.8 0.3 2.2 0.4 0.6 0.2 1 0.5 1.4 0.9 0.4 0.4 0.7 0.8 0.9 1.4 0.1 0.4 0.4 1 0.4 2.2 0.1 1.3 0.1 1.7 0.1 4.9s0 3.6-0.1 4.9c-0.1 1.2-0.3 1.8-0.4 2.2-0.2 0.6-0.5 1-0.9 1.4-0.4 0.4-0.8 0.7-1.4 0.9-0.4 0.1-1 0.4-2.2 0.4-1.3 0.1-1.7 0.1-4.9 0.1s-3.6 0-4.9-0.1c-1.2-0.1-1.8-0.3-2.2-0.4-0.6-0.2-1-0.5-1.4-0.9-0.4-0.4-0.7-0.8-0.9-1.4-0.1-0.4-0.4-1-0.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6 0.1-4.9c0.1-1.2 0.3-1.8 0.4-2.2 0.2-0.6 0.5-1 0.9-1.4 0.4-0.4 0.8-0.7 1.4-0.9 0.4-0.1 1-0.4 2.2-0.4C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.1 0-3.5 0-4.7 0.1-1.1 0.1-1.7 0.2-2.1 0.4-0.5 0.2-0.9 0.4-1.3 0.8-0.4 0.4-0.6 0.8-0.8 1.3-0.2 0.4-0.3 1-0.4 2.1C2.6 9.9 2.6 10.3 2.6 12s0 2.1 0.1 3.3c0.1 1.1 0.2 1.7 0.4 2.1 0.2 0.5 0.4 0.9 0.8 1.3 0.4 0.4 0.8 0.6 1.3 0.8 0.4 0.2 1 0.3 2.1 0.4 1.2 0.1 1.6 0.1 4.7 0.1s3.5 0 4.7-0.1c1.1-0.1 1.7-0.2 2.1-0.4 0.5-0.2 0.9-0.4 1.3-0.8 0.4-0.4 0.6-0.8 0.8-1.3 0.2-0.4 0.3-1 0.4-2.1 0.1-1.2 0.1-1.6 0.1-3.3s0-2.1-0.1-3.3c-0.1-1.1-0.2-1.7-0.4-2.1-0.2-0.5-0.4-0.9-0.8-1.3-0.4-0.4-0.8-0.6-1.3-0.8-0.4-0.2-1-0.3-2.1-0.4C15.5 4 15.1 4 12 4zm0 3.1a4.9 4.9 0 1 1 0 9.8 4.9 4.9 0 0 1 0-9.8zm0 8a3.1 3.1 0 1 0 0-6.2 3.1 3.1 0 0 0 0 6.2zm6.3-8.2a1.1 1.1 0 1 1-2.3 0 1.1 1.1 0 0 1 2.3 0z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2c3.2 0 3.6 0 4.9 0.1 1.2 0.1 1.8 0.3 2.2 0.4 0.6 0.2 1 0.5 1.4 0.9 0.4 0.4 0.7 0.8 0.9 1.4 0.1 0.4 0.4 1 0.4 2.2 0.1 1.3 0.1 1.7 0.1 4.9s0 3.6-0.1 4.9c-0.1 1.2-0.3 1.8-0.4 2.2-0.2 0.6-0.5 1-0.9 1.4-0.4 0.4-0.8 0.7-1.4 0.9-0.4 0.1-1 0.4-2.2 0.4-1.3 0.1-1.7 0.1-4.9 0.1s-3.6 0-4.9-0.1c-1.2-0.1-1.8-0.3-2.2-0.4-0.6-0.2-1-0.5-1.4-0.9-0.4-0.4-0.7-0.8-0.9-1.4-0.1-0.4-0.4-1-0.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6 0.1-4.9c0.1-1.2 0.3-1.8 0.4-2.2 0.2-0.6 0.5-1 0.9-1.4 0.4-0.4 0.8-0.7 1.4-0.9 0.4-0.1 1-0.4 2.2-0.4C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.1 0-3.5 0-4.7 0.1-1.1 0.1-1.7 0.2-2.1 0.4-0.5 0.2-0.9 0.4-1.3 0.8-0.4 0.4-0.6 0.8-0.8 1.3-0.2 0.4-0.3 1-0.4 2.1C2.6 9.9 2.6 10.3 2.6 12s0 2.1 0.1 3.3c0.1 1.1 0.2 1.7 0.4 2.1 0.2 0.5 0.4 0.9 0.8 1.3 0.4 0.4 0.8 0.6 1.3 0.8 0.4 0.2 1 0.3 2.1 0.4 1.2 0.1 1.6 0.1 4.7 0.1s3.5 0 4.7-0.1c1.1-0.1 1.7-0.2 2.1-0.4 0.5-0.2 0.9-0.4 1.3-0.8 0.4-0.4 0.6-0.8 0.8-1.3 0.2-0.4 0.3-1 0.4-2.1 0.1-1.2 0.1-1.6 0.1-3.3s0-2.1-0.1-3.3c-0.1-1.1-0.2-1.7-0.4-2.1-0.2-0.5-0.4-0.9-0.8-1.3-0.4-0.4-0.8-0.6-1.3-0.8-0.4-0.2-1-0.3-2.1-0.4C15.5 4 15.1 4 12 4zm0 3.1a4.9 4.9 0 1 1 0 9.8 4.9 4.9 0 0 1 0-9.8zm0 8a3.1 3.1 0 1 0 0-6.2 3.1 3.1 0 0 0 0 6.2zm6.3-8.2a1.1 1.1 0 1 1-2.3 0 1.1 1.1 0 0 1 2.3 0z'/></svg>");
}

.pre-footer__socials a[href*="twitter.com"]::before,
.pre-footer__socials a[href*="x.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.2 2.3h3.3l-7.3 8.3 8.5 11.1h-6.7l-5.2-6.9-6 6.9H1.5l7.8-9L1.2 2.3h6.9l4.7 6.2 5.4-6.2zm-1.1 17.4h1.8L7.1 4.1H5.1l11.9 15.6z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.2 2.3h3.3l-7.3 8.3 8.5 11.1h-6.7l-5.2-6.9-6 6.9H1.5l7.8-9L1.2 2.3h6.9l4.7 6.2 5.4-6.2zm-1.1 17.4h1.8L7.1 4.1H5.1l11.9 15.6z'/></svg>");
}

.pre-footer__socials a[href*="linkedin.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5v-9h3zM6.5 8.3a1.8 1.8 0 1 1 0-3.6 1.8 1.8 0 0 1 0 3.6zM19 19h-3v-4.7c0-1.1 0-2.5-1.6-2.5s-1.8 1.2-1.8 2.4V19h-3v-9h2.9v1.2h.1a3.1 3.1 0 0 1 2.8-1.6c3 0 3.5 2 3.5 4.5z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5v-9h3zM6.5 8.3a1.8 1.8 0 1 1 0-3.6 1.8 1.8 0 0 1 0 3.6zM19 19h-3v-4.7c0-1.1 0-2.5-1.6-2.5s-1.8 1.2-1.8 2.4V19h-3v-9h2.9v1.2h.1a3.1 3.1 0 0 1 2.8-1.6c3 0 3.5 2 3.5 4.5z'/></svg>");
}

/* Main footer (dark). */
.site-footer {
    background: #1f1f1f;
    color: rgba(255, 255, 255, 0.7);
    padding: 3rem var(--site-pad);
}

.site-footer__inner {
    max-width: var(--site-max);
    margin: 0 auto;
}

/* Top: back-to-top + footer nav. */
.site-footer__top {
    text-align: center;
    margin-bottom: 2.5rem;
}

.footer-nav ul,
.footer-nav .footer-nav__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-nav a:hover,
.footer-nav a:focus {
    color: var(--white);
    text-decoration: underline;
}

.back-to-top {
    display: inline-block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    text-decoration: none;
    margin-bottom: 1rem;
}

.back-to-top:hover,
.back-to-top:focus {
    color: var(--white);
}

/* Middle: company info in 2 columns. Constrain width and indent from the
 * left to match the SQSP source proportions (col-2 empty + col-10 content
 * = ~17% left gutter). Centered within the footer inner. */
.site-footer__company {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin: 0 auto 2.5rem;
    max-width: 600px;
}

@media (max-width: 600px) {
    .site-footer__company {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.site-footer__company-name {
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    letter-spacing: 0.02em;
}

.site-footer__company-line {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.site-footer__company-line a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.site-footer__company-line a:hover,
.site-footer__company-line a:focus {
    color: var(--white);
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* Bottom: attribution + credit. */
.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.5rem;
    text-align: center;
}

.site-footer__attribution {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

.site-footer__attribution a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.site-footer__attribution a:hover,
.site-footer__attribution a:focus {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}

.site-footer__credit {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
 * 7. Post cards (archive / blog listing)
 * ------------------------------------------------------------------------ */

.post-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0 2.5rem;
}

/* Two-column layout: cards on the left, tag-cloud sidebar on the right.
   Sidebar matches SQSP #rightSidebar (255px wide). Stacks below ~880px. */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 255px;
    gap: 3rem;
    align-items: start;
}

.blog-sidebar {
    font-size: 0.85em;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

.blog-sidebar__block {
    margin-bottom: 2rem;
}

.blog-sidebar__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray-mute);
    margin: 0 0 1rem;
}

/* Tag cloud — matches SQSP .category-nav a styling. */
.blog-sidebar .wp-tag-cloud {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-sidebar .wp-tag-cloud li {
    margin: 0;
    padding: 0;
    line-height: 1.25em;
}

.blog-sidebar .wp-tag-cloud li::after {
    content: '';
}

.blog-sidebar .wp-tag-cloud a {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px;
    color: #b6b6b6;
    padding: 0 0 0.75em;
    text-decoration: none;
    /* wp_tag_cloud sets inline font-size in em; line-height keeps weighted
       tags readable at the largest sizes. */
    line-height: 1.25em;
    transition: color 0.1s ease-in-out;
}

.blog-sidebar .wp-tag-cloud a:hover,
.blog-sidebar .wp-tag-cloud a:focus {
    color: var(--teal-bright);
}

/* --------------------------------------------------------------------------
 * Folder-nav (page sub-navigation for pages in a primary-menu folder).
 * Mirrors SQSP #folderNav: 255px left sidebar, label + sibling links.
 * ------------------------------------------------------------------------ */

.page-layout {
    display: grid;
    grid-template-columns: 255px 1fr;
    gap: 3rem;
    align-items: start;
}

.folder-nav {
    font-size: 0.85em;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

.folder-nav__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray-mute);
    line-height: 1.2em;
    margin: 0 0 0.5em;
}

.folder-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.folder-nav li {
    padding: 0.75em 0;
}

.folder-nav a {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px;
    color: #b6b6b6;
    line-height: 1.25em;
    text-decoration: none;
    transition: color 0.1s ease-in-out;
}

.folder-nav a:hover,
.folder-nav a:focus,
.folder-nav .active-link a {
    color: var(--teal-bright);
}

.post-card {
    background: var(--white);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.post-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.post-card__thumb {
    display: block;
    flex: 0 0 240px;
    width: 240px;
    aspect-ratio: 16 / 9;
    background: var(--gray-light);
    overflow: hidden;
}

.post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 0;
}

.post-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.post-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.4rem;
}

.post-card__title a {
    color: var(--ink);
    text-decoration: none;
}

.post-card__title a:hover {
    color: var(--teal);
}

.post-card__meta {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.post-card__meta a {
    color: var(--ink-soft);
    text-decoration: none;
}

.post-card__meta a:hover {
    color: var(--teal);
}

.post-card__sep {
    margin: 0 0.4em;
    color: var(--gray-mute);
}

.post-card__excerpt {
    flex: 1 1 auto;
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.post-card__excerpt p {
    margin: 0;
}

.post-card__more {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--teal);
    align-self: flex-start;
    text-decoration: none;
}

.post-card__more:hover {
    color: var(--teal-dark);
}

/* Pagination. */
.pagination,
.nav-links {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-numbers {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--gray-border);
    border-radius: 4px;
    color: var(--ink);
    font-size: 0.9rem;
}

.page-numbers.current,
.page-numbers:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--white);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
 * 8. Tag cloud (SQSP migrated markup, preserved in wp:html blocks)
 * ------------------------------------------------------------------------ */

.sqs-tagcloud {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    line-height: 1;
}

.sqs-tagcloud li {
    margin: 0;
}

.sqs-tagcloud a {
    display: inline-block;
    color: var(--teal-dark);
    text-decoration: none;
}

.sqs-tagcloud a:hover {
    color: var(--coral);
}

.sqs-tagcloud .name {
    display: inline-block;
}

/* --------------------------------------------------------------------------
 * 9. Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 880px) {
    :root {
        --header-h: 64px;
    }

    /* Burger visible. */
    .nav-toggle {
        display: block;
        order: 3;
    }

    /* Drawer: slides in from the right. Off-screen by default via
       translateX(100%). Body.nav-open brings it on-screen and pushes
       the page content (header, main, footer) left by 260px (matches
       SQSP #mainNavWrapper fixed width). */
    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 260px;
        max-width: 85vw;
        height: 100vh;
        background: var(--teal-bright);
        padding: 1.5rem 1.5rem 2rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 200;
    }

    body.nav-open .site-nav {
        transform: translateX(0);
    }

    /* Push page content left when drawer is open. We deliberately DON'T
       transform .site-header — it contains .site-nav (the drawer), and an
       ancestor transform would create a containing block for the drawer's
       position: fixed, double-shifting it. Burger stays in place and is
       kept tappable above the drawer via its own z-index. */
    .site-main,
    .site-footer {
        transition: transform 0.25s ease;
    }

    body.nav-open .site-main,
    body.nav-open .site-footer {
        transform: translateX(-260px);
    }

    /* Burger sits above the drawer so it stays tappable to close. */
    .nav-toggle {
        position: relative;
        z-index: 300;
    }

    .site-nav ul {
        display: block;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        width: 100%;
    }

    .site-nav li {
        width: 100%;
    }

    .site-nav a {
        padding: 0.85rem 0;
        color: var(--white);
    }

    /* Suppress current-section highlight on mobile (per QA). Hover stays. */
    .site-nav a:hover,
    .site-nav .current-menu-item > a,
    .site-nav .current-menu-parent > a,
    .site-nav .current-menu-ancestor > a {
        color: var(--amber);
    }
    .site-nav .current-menu-item > a,
    .site-nav .current-menu-parent > a,
    .site-nav .current-menu-ancestor > a {
        color: var(--white);
    }

    /* Sub-menu: collapsed by default, accordion-style. Sub-items indented
       to align with parent label (skipping past the +/- caret). */
    .site-nav .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        background: transparent;
        transition: max-height 0.2s ease, padding 0.2s ease;
    }

    .site-nav .menu-item-has-children.is-open > .sub-menu {
        max-height: 800px;
        padding-left: 1.75em; /* aligns sub-items with parent label */
    }

    .site-nav .sub-menu a {
        color: var(--white);
        font-size: 0.9rem;
        padding: 0.5rem 0;
        text-align: left;
    }

    /* Override desktop "last-folder right-align" rule which has higher
       specificity — on mobile, all submenus left-align. */
    .site-nav li.menu-item-has-children:last-child > .sub-menu,
    .site-nav li.menu-item-has-children:last-child > .sub-menu a {
        left: 0;
        right: 0;
        text-align: left;
    }

    .site-nav .sub-menu a:hover {
        color: var(--amber);
    }

    /* +/- caret sits inline before the parent label. */
    .site-nav .menu-item-has-children > a {
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

    .site-nav .menu-item-has-children > a::before {
        content: '+';
        display: inline-block;
        width: 1em;
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--white);
        transition: transform 0.15s ease;
    }

    .site-nav .menu-item-has-children.is-open > a::before {
        content: '–';
    }

    .site-brand__logo img {
        height: 40px;
    }

    .post-list {
        grid-template-columns: 1fr;
    }

    /* Blog layout stacks: main first, then tag cloud. */
    .blog-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .blog-sidebar {
        position: static;
        border-top: 1px solid var(--gray-border);
        padding-top: 1.5rem;
    }

    /* Folder-nav hidden on mobile — content takes full width. The sub-nav
       is already accessible via the drawer (Company submenu etc.), so the
       sidebar would just be redundant on small screens. */
    .page-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .folder-nav {
        display: none;
    }

    /* Horizontal cards stack vertically on mobile. */
    .post-card {
        flex-direction: column;
    }

    .post-card__thumb {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Nav-toggle animation when active. */
body.nav-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.nav-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}
body.nav-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Tiny JS hook: when the toggle is clicked, toggle body.nav-open.
 * Kept inline in style.css as a comment for the implementer:
 *   functions.php should enqueue a small inline script for the toggle.
 * For simplicity, we use a CSS-only checkbox pattern via :target — but WP
 * nav markup makes that awkward, so we ship a tiny inline script instead. */


/* ==========================================================================
   Forms backend (theme/forms/)
   Baked by block_converters.py → handled by theme/forms/handler.php.
   ========================================================================== */

.karmafy-form {
    max-width: 640px;
    margin: 1.5rem 0;
}

.karmafy-form__field {
    margin-bottom: 1rem;
}

.karmafy-form__field label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #333;
}

.karmafy-form__field input[type="text"],
.karmafy-form__field input[type="email"],
.karmafy-form__field input[type="tel"],
.karmafy-form__field select,
.karmafy-form__field textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 1rem;
    background: #fff;
}

.karmafy-form__field textarea {
    resize: vertical;
}

/* Multi-option checkbox group (SQSP checkbox-with-options). */
.karmafy-form__field--checkbox-group {
    border: none;
    padding: 0;
    margin-bottom: 1rem;
}
.karmafy-form__field--checkbox-group > legend,
.karmafy-form__field--likert > legend {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #333;
}
.karmafy-form__checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.karmafy-form__checkbox,
.karmafy-form__field--checkbox-consent label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: pointer;
}
.karmafy-form__checkbox input,
.karmafy-form__field--checkbox-consent input {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

/* Likert statement × rating matrix. */
.karmafy-form__field--likert {
    border: none;
    padding: 0;
    margin-bottom: 1.25rem;
}
.karmafy-form__likert-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.karmafy-form__likert-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 540px;
    font-family: var(--font-body);
    font-size: 0.92rem;
}
.karmafy-form__likert-table th,
.karmafy-form__likert-table td {
    padding: 0.5rem 0.6rem;
    text-align: center;
    border-bottom: 1px solid #eee;
}
.karmafy-form__likert-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: bottom;
}
.karmafy-form__likert-statement {
    text-align: left !important;
    width: 40%;
    font-weight: normal;
}
.karmafy-form__likert-cell input[type="radio"] {
    margin: 0 auto;
    cursor: pointer;
}
.karmafy-form__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Currency input — symbol prefix. */
.karmafy-form__currency-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    max-width: 240px;
}
.karmafy-form__currency-symbol {
    padding: 0.6rem 0.75rem;
    background: #f5f5f5;
    color: #666;
    font-family: var(--font-body);
    font-weight: 600;
    border-right: 1px solid #ccc;
}
.karmafy-form__currency-wrap input[type="number"] {
    flex: 1;
    border: none;
    padding: 0.6rem 0.75rem;
    font-family: var(--font-body);
    font-size: 1rem;
    background: transparent;
    outline: none;
}

.karmafy-form__required {
    color: var(--amber, #ffc107);
    margin-left: 0.2em;
}

.karmafy-form__submit {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    border: none;
    border-radius: 4px;
    background: var(--teal-bright, #009688);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s ease;
}

.karmafy-form__submit:hover {
    background: var(--teal-dark, #00796b);
}

/* Post-submit status banner — emitted by karmafy_render_form_status_banner(). */
.karmafy-form-status {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.9rem 1.5rem;
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    animation: karmafy-form-status-in 0.3s ease-out;
}

.karmafy-form-status--ok {
    background: var(--teal-bright, #009688);
}

.karmafy-form-status--error {
    background: #d32f2f;
}

@keyframes karmafy-form-status-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}