/*
 * Kliskatek Design System
 * ------------------------------------------------------------------
 * One stylesheet that gives Home, Solutions, Products, About and
 * Contact the same visual voice as /technologies/* — without rewriting
 * the underlying Gutenberg blocks. Apply via classNames:
 *   .kl-kicker          uppercase orange label above a heading
 *   .kl-card            elevation + hover lift on a column/group
 *   .kl-step-badge      circular accent badge for numbered steps
 *   .kl-arrow-link      animated arrow on a text link
 *   .cta-primary        primary CTA button (already used)
 *   .cta-secondary      secondary outline CTA (already used)
 *   .btn-buy            product Buy button (already used)
 *   .specs / .mono      monospace family for technical data / prices
 */

/* ------------------------------------------------------------------
   Typography — IBM Plex Sans for prose, IBM Plex Mono for tech data.
   Override GP's Roboto defaults at higher specificity.
------------------------------------------------------------------ */
body,
body button,
body input,
body select,
body textarea {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
    font-weight: 600;
}

/* !important here intentionally — many hero blocks ship with inline
   font-size in the block JSON (e.g. "fontSize":"2.75rem") which would
   otherwise override these and break the typographic scale. */
.entry-content h1,
.entry-content h1.wp-block-heading,
.wp-block-cover h1 {
    font-size: 48px !important;
    line-height: 1.1 !important;
}

.entry-content h2,
.entry-content h2.wp-block-heading {
    font-size: 32px !important;
    line-height: 1.2 !important;
}

.entry-content h3,
.entry-content h3.wp-block-heading {
    font-size: 24px !important;
    line-height: 1.3 !important;
}

/* Responsive scale — keep headlines readable on narrow viewports */
@media (max-width: 768px) {
    .entry-content h1,
    .entry-content h1.wp-block-heading,
    .wp-block-cover h1 {
        font-size: clamp(32px, 7vw, 40px) !important;
        line-height: 1.15 !important;
    }
    .entry-content h2,
    .entry-content h2.wp-block-heading {
        font-size: clamp(24px, 5vw, 28px) !important;
    }
    .entry-content h3,
    .entry-content h3.wp-block-heading {
        font-size: 20px !important;
    }
}

/* Navigation — slightly tighter weight than body, 15px per spec */
.main-navigation a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items,
.main-navigation .main-nav ul li a {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Technical data — specs lines, prices, references, code */
.specs,
.mono,
.entry-content .specs,
.entry-content .mono,
code, kbd, samp, pre {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

/* Inside cards, .specs should override the per-block inline font-size if
   the editor still has the old 0.9rem/0.95rem leftovers. */
.entry-content .wp-block-column .specs,
.entry-content .wp-block-group .specs {
    font-size: 14px !important;
    line-height: 1.5;
}


:root {
    /* Brand orange — official Kliskatek logo value. WCAG note: #FF8000 on
       white only hits ~3.1:1, so do NOT use it for body text on light bg.
       For orange text on white use --kl-orange-strong (#CC6600, ~5:1). */
    --kl-orange:        #FF8000;
    --kl-orange-soft:   #FFA64D; /* lighter for kicker on dark bg */
    --kl-orange-strong: #CC6600; /* AA-compliant on white for inline text */
    --kl-cta-hover:     #E67300; /* CTA button :hover background */

    /* Brand blue — for links, secondary CTAs and active nav state */
    --kl-blue:          #0080FF;
    --kl-blue-hover:    #0066CC;

    /* Surfaces */
    --kl-dark:          #0A1A2E; /* hero / header dark */
    --kl-footer-bg:     #0D1F35; /* footer dark (slightly different shade) */
    --kl-bg-soft:       #F5F7FA; /* alternating section bg on light pages */
    --kl-border:        #e0e0e2;

    /* Typography */
    --kl-text:          #1A1A2E; /* body text on light bg */
    --kl-text-muted:    #5A6577; /* secondary text */
    --kl-text-on-dark:  #FFFFFF;

    /* Back-compat aliases */
    --kl-grey-1:        var(--kl-text-muted);
    --kl-grey-2:        var(--kl-text-muted);

    --kl-radius:        10px;
    --kl-radius-pill:   999px;
    --kl-shadow:        0 6px 18px rgba(10, 26, 46, 0.07);
    --kl-shadow-lift:   0 14px 30px rgba(10, 26, 46, 0.12);
    --kl-transition:    220ms ease;
}

/* ------------------------------------------------------------------
   Kicker — uppercase brand label above a heading
------------------------------------------------------------------ */
.kl-kicker,
.entry-content p.kl-kicker {
    color: var(--kl-orange) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.2;
    margin: 0 0 0.6rem !important;
}

.kl-kicker--on-dark {
    color: var(--kl-orange-soft) !important;
}

/* ------------------------------------------------------------------
   Cards — elevation + hover lift
   Applied to a wp-block-column or wp-block-group with .kl-card.
------------------------------------------------------------------ */
.entry-content .wp-block-column.kl-card,
.entry-content .wp-block-group.kl-card {
    background-color: #ffffff;
    border: 1px solid var(--kl-border);
    border-radius: var(--kl-radius) !important;
    box-shadow: var(--kl-shadow);
    transition: transform var(--kl-transition), box-shadow var(--kl-transition), border-color var(--kl-transition);
}

.entry-content .wp-block-column.kl-card:hover,
.entry-content .wp-block-group.kl-card:hover,
.entry-content .wp-block-column.kl-card:focus-within,
.entry-content .wp-block-group.kl-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--kl-shadow-lift);
    border-color: rgba(255, 128, 0, 0.4);
}

.entry-content .wp-block-column.kl-card a,
.entry-content .wp-block-group.kl-card a {
    text-decoration: none;
}

/* Lock product-card columns to exactly 1/3 of the row at desktop widths.
   By spec WP's flex layout (flex-basis:0 + flex-grow:1) should already give
   equal columns, but when a row has an empty placeholder column the visible
   cards have ended up perceptibly wider than rows with three populated cards.
   Pin the flex-basis explicitly so the calculation can't drift. */
@media (min-width: 782px) {
    .entry-content .wp-block-columns > .wp-block-column.kl-card {
        flex: 0 0 calc((100% - 2 * var(--wp--style--block-gap, 0.5em)) / 3);
        max-width: calc((100% - 2 * var(--wp--style--block-gap, 0.5em)) / 3);
    }
}

/* Large image cards (Home — Energy Infrastructure / Custom Development).
   Force the cover image to fill the card width; the source is 600×400 but the
   card can be slightly wider on desktop, which would otherwise leave whitespace
   to the right of the natural-size <img>. */
.entry-content .kl-card--large > .wp-block-image,
.entry-content .kl-card--large > .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ------------------------------------------------------------------
   Step badges — circular accent number for process steps
   Applied to a paragraph with .kl-step-badge instead of inline style.
------------------------------------------------------------------ */
.entry-content p.kl-step-badge {
    width: 56px;
    height: 56px;
    border-radius: var(--kl-radius-pill);
    background: var(--kl-orange);
    color: var(--kl-text-on-dark) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1;
    margin: 0 0 1.2rem !important;
    box-shadow: 0 4px 10px rgba(255, 128, 0, 0.35);
}

/* ------------------------------------------------------------------
   Arrow links — text links ending in "→" get animated arrow on hover.
   Authored as <a class="kl-arrow-link" href="…">Learn more</a> (no →).
------------------------------------------------------------------ */
.kl-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-weight: 700;
    text-decoration: none;
    color: var(--kl-blue);
    transition: color var(--kl-transition);
}

.kl-arrow-link::after {
    content: "→";
    display: inline-block;
    transition: transform var(--kl-transition);
    will-change: transform;
}

.kl-arrow-link:hover,
.kl-arrow-link:focus-visible {
    color: var(--kl-blue-hover);
}

.kl-arrow-link:hover::after,
.kl-arrow-link:focus-visible::after {
    transform: translateX(6px);
}

/* On dark backgrounds (hero cover) */
.wp-block-cover .kl-arrow-link {
    color: var(--kl-text-on-dark);
}

.wp-block-cover .kl-arrow-link:hover {
    color: var(--kl-orange);
}

/* ------------------------------------------------------------------
   CTA buttons — Kliskatek brand palette
   Primary (Buy, Explore, Discuss, Contact):  bg orange / text white
   Secondary (outlined):                       border + text blue
   WCAG note: white-on-#FF8000 is ~2.5:1 which is below AA — applied per
   brand spec. If accessibility audits flag this, swap text to var(--kl-dark)
   which gives ~6.8:1 over the same orange.
------------------------------------------------------------------ */
.entry-content .wp-block-button.cta-primary > .wp-block-button__link,
.entry-content .wp-block-button.btn-buy > .wp-block-button__link,
.entry-content .wp-block-button.btn-contact > .wp-block-button__link {
    background-color: var(--kl-orange) !important;
    color: var(--kl-text-on-dark) !important;
    padding: 0.85rem 1.75rem;
    border-radius: var(--kl-radius);
    border: none;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform var(--kl-transition), box-shadow var(--kl-transition), background-color var(--kl-transition);
    box-shadow: 0 4px 12px rgba(255, 128, 0, 0.22);
}

.entry-content .wp-block-button.cta-primary > .wp-block-button__link:hover,
.entry-content .wp-block-button.btn-buy > .wp-block-button__link:hover,
.entry-content .wp-block-button.btn-contact > .wp-block-button__link:hover {
    background-color: var(--kl-cta-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 128, 0, 0.32);
}

.entry-content .wp-block-button.cta-secondary > .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid var(--kl-blue);
    color: var(--kl-blue) !important;
    padding: 0.85rem 1.75rem;
    border-radius: var(--kl-radius);
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: none;
    transition: transform var(--kl-transition), background-color var(--kl-transition), color var(--kl-transition);
}

.entry-content .wp-block-button.cta-secondary > .wp-block-button__link:hover,
.entry-content .wp-block-button.cta-secondary > .wp-block-button__link:focus-visible {
    background-color: var(--kl-blue) !important;
    color: var(--kl-text-on-dark) !important;
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------
   Links — brand blue with darker hover
------------------------------------------------------------------ */
.entry-content a:not(.wp-block-button__link):not(.kl-arrow-link):not(.kl-skip-link):not([class*="wp-block-latest-posts"]) {
    color: var(--kl-blue);
    transition: color var(--kl-transition);
}

.entry-content a:not(.wp-block-button__link):not(.kl-arrow-link):not(.kl-skip-link):not([class*="wp-block-latest-posts"]):hover,
.entry-content a:not(.wp-block-button__link):not(.kl-arrow-link):not(.kl-skip-link):not([class*="wp-block-latest-posts"]):focus-visible {
    color: var(--kl-blue-hover);
}

/* ------------------------------------------------------------------
   Section helpers — consistent vertical rhythm
------------------------------------------------------------------ */
.kl-section-soft {
    background-color: var(--kl-bg-soft);
}

/* ------------------------------------------------------------------
   Hero block (core/cover wrapper)
------------------------------------------------------------------ */
.entry-content > .wp-block-cover.alignfull:first-child {
    /* make the first hero feel more expansive */
    min-height: 56vh;
}

/* Cap centered hero paragraphs so long sentences (with inline links) don't
   reach the right edge of the viewport. Direct-child only, so headings,
   buttons or other blocks keep their natural width. */
.entry-content .wp-block-cover__inner-container > p {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .entry-content > .wp-block-cover.alignfull:first-child {
        min-height: 52vh;
    }
    .entry-content > .wp-block-cover.alignfull:first-child h1 {
        font-size: clamp(1.85rem, 6vw, 2.4rem) !important;
        line-height: 1.2 !important;
    }
}

/* ------------------------------------------------------------------
   Latest posts — make headlines + excerpts feel premium
------------------------------------------------------------------ */
.entry-content .wp-block-latest-posts.is-grid {
    gap: 1.5rem;
    list-style: none;
}

.entry-content .wp-block-latest-posts.is-grid > li {
    /* Reset core's per-item margin: core uses margin-based spacing with a width
       calc that doesn't account for our gap, so without this 3 cards overflow
       the row and the third wraps onto a second line. */
    margin: 0;
    background-color: #ffffff;
    border: 1px solid var(--kl-border);
    border-radius: var(--kl-radius);
    padding: 1.25rem;
    box-shadow: var(--kl-shadow);
    transition: transform var(--kl-transition), box-shadow var(--kl-transition);
    overflow: hidden; /* clip the bleeded featured image to the card's border-radius */
}

.entry-content .wp-block-latest-posts.is-grid > li:hover {
    transform: translateY(-3px);
    box-shadow: var(--kl-shadow-lift);
}

/* Recompute column widths assuming our gap rather than core's margin. */
@media (min-width: 600px) {
    .entry-content .wp-block-latest-posts.is-grid.columns-2 > li {
        width: calc((100% - 1.5rem) / 2);
    }
    .entry-content .wp-block-latest-posts.is-grid.columns-3 > li {
        width: calc((100% - 3rem) / 3);
    }
    .entry-content .wp-block-latest-posts.is-grid.columns-4 > li {
        width: calc((100% - 4.5rem) / 4);
    }
}

.entry-content .wp-block-latest-posts__featured-image {
    /* Bleed the image to the card edges (cancels the 1.25rem li padding) and
       round only the top corners so the bottom flows into the title/excerpt. */
    margin: -1.25rem -1.25rem 1rem;
}

.entry-content .wp-block-latest-posts__featured-image a,
.entry-content .wp-block-latest-posts__featured-image img {
    display: block;
    width: 100%;
    height: auto;
}

.entry-content .wp-block-latest-posts__post-title {
    font-weight: 700;
    text-decoration: none;
    color: var(--kl-dark);
}

.entry-content .wp-block-latest-posts__post-excerpt {
    color: var(--kl-grey-1);
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

/* ------------------------------------------------------------------
   Home — Publicly Funded R&D section
   The original block JSON wired a CSS gradient that GeneratePress no
   longer emits (the variable names got corrupted earlier as
   `var(u002du002dbase-2)`); we restore a flat gray to keep the
   white→gray section alternation, and bump the "technologies" kicker
   to the brand orange so it reads on the new background.
------------------------------------------------------------------ */
.gb-container-cfaefbb3 {
    background-color: var(--kl-bg-soft, #f7f7f7);
}

.gb-container-cfaefbb3 h4.gb-headline-195c5393 {
    color: var(--kl-orange) !important;
}

/* ------------------------------------------------------------------
   Form polish (CF7) — consistent inputs and visible focus
------------------------------------------------------------------ */
.entry-content .wpcf7-form input[type="text"],
.entry-content .wpcf7-form input[type="email"],
.entry-content .wpcf7-form input[type="tel"],
.entry-content .wpcf7-form textarea,
.entry-content .wpcf7-form select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--kl-border);
    border-radius: var(--kl-radius);
    background: #ffffff;
    transition: border-color var(--kl-transition), box-shadow var(--kl-transition);
}

.entry-content .wpcf7-form input:focus,
.entry-content .wpcf7-form textarea:focus,
.entry-content .wpcf7-form select:focus {
    border-color: var(--kl-orange);
    box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.18);
    outline: none;
}

.entry-content .wpcf7-form .wpcf7-submit {
    background-color: var(--kl-orange);
    color: var(--kl-dark);
    border: none;
    padding: 0.85rem 1.75rem;
    border-radius: var(--kl-radius);
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform var(--kl-transition), box-shadow var(--kl-transition);
    box-shadow: 0 4px 12px rgba(247, 148, 29, 0.18);
}

.entry-content .wpcf7-form .wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(247, 148, 29, 0.32);
}

.entry-content .wpcf7-not-valid-tip {
    color: #b00020;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.entry-content .wpcf7-response-output {
    border-radius: var(--kl-radius);
    padding: 0.8rem 1rem;
    margin-top: 1.5rem;
}

/* ------------------------------------------------------------------
   Skip link (a11y) — only visible when focused
------------------------------------------------------------------ */
.kl-skip-link {
    position: absolute;
    top: -40px;
    left: 8px;
    background: var(--kl-dark);
    color: #ffffff;
    padding: 0.6rem 1rem;
    z-index: 1000;
    border-radius: 0 0 var(--kl-radius) var(--kl-radius);
    text-decoration: none;
    transition: top var(--kl-transition);
}

.kl-skip-link:focus {
    top: 0;
}

/* ------------------------------------------------------------------
   Reduced motion respect
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .entry-content .wp-block-column.kl-card,
    .entry-content .wp-block-group.kl-card,
    .kl-arrow-link::after,
    .entry-content .wp-block-button.cta-primary > .wp-block-button__link,
    .entry-content .wp-block-button.btn-buy > .wp-block-button__link {
        transition: none !important;
    }
    .entry-content .wp-block-column.kl-card:hover,
    .entry-content .wp-block-group.kl-card:hover {
        transform: none;
    }
}