/* ============================================================
   KONSULTTI – Global styles
   ============================================================ */

/* ── CSS Custom properties (synkas med theme.json) ──────── */
:root {
    --k-orange:        #C9571C;
    --k-orange-dark:   #A8461A;
    --k-orange-light:  #F4D4C0;
    --k-dark:          #1C1008;
    --k-cream:         #FEF6F0;
    --k-white:         #FFFFFF;
    --k-text:          #1A1A1A;
    --k-text-2:        #4D4D4D;
    --k-text-muted:    #767676;
    --k-border:        #E5E0D8;
    --k-bg-light:      #F9F6F3;
    --k-shadow-sm:     0 1px 3px rgba(0,0,0,.08);
    --k-shadow-md:     0 4px 12px rgba(0,0,0,.10);
    --k-shadow-lg:     0 8px 32px rgba(0,0,0,.14);
    --k-radius-sm:     6px;
    --k-radius-md:     12px;
    --k-radius-lg:     16px;
    --k-transition:    0.25s ease;
    --k-container:     1200px;
}

/* ── Base reset ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--k-text);
    background-color: var(--k-white);
    -webkit-font-smoothing: antialiased;
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--k-text);
    margin-top: 0;
}

h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.875rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 700; }
h6 { font-size: 0.875rem; font-weight: 700; }

p { margin-top: 0; margin-bottom: 1.25rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--k-orange);
    text-decoration: none;
    transition: color var(--k-transition);
}
a:hover { color: var(--k-orange-dark); }

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

ul, ol { padding-left: 1.5rem; }

/* ── Utility classes ─────────────────────────────────────── */
.text-orange  { color: var(--k-orange) !important; }
.text-muted   { color: var(--k-text-muted) !important; }
.text-white   { color: var(--k-white) !important; }
.text-center  { text-align: center; }

.bg-dark      { background-color: var(--k-dark) !important; }
.bg-cream     { background-color: var(--k-cream) !important; }
.bg-light     { background-color: var(--k-bg-light) !important; }
.bg-orange    { background-color: var(--k-orange) !important; }

.label-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--k-orange);
    margin-bottom: 0.75rem;
}

/* ── Buttons ──────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--k-transition);
    border-radius: var(--k-radius-sm) !important;
}

.wp-block-button .wp-block-button__link {
    padding: 0.875rem 1.75rem;
    background-color: var(--k-orange);
    color: var(--k-white);
}

.wp-block-button .wp-block-button__link:hover {
    background-color: var(--k-orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(201, 87, 28, 0.35);
}

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--k-orange);
    border: 2px solid var(--k-orange);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--k-orange);
    color: var(--k-white);
}

/* White button (på mörk bakgrund) */
.wp-block-button.is-style-white .wp-block-button__link {
    background-color: var(--k-white);
    color: var(--k-orange);
}
.wp-block-button.is-style-white .wp-block-button__link:hover {
    background-color: var(--k-cream);
}

/* White outline */
.wp-block-button.is-style-white-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--k-white);
    border: 2px solid rgba(255,255,255,0.6);
}
.wp-block-button.is-style-white-outline .wp-block-button__link:hover {
    border-color: var(--k-white);
    background-color: rgba(255,255,255,0.1);
}

/* ── Focus styles (accessibility) ───────────────────────── */
:focus-visible {
    outline: 3px solid var(--k-orange);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ── Skip link ───────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 999;
    padding: 0.75rem 1.5rem;
    background: var(--k-orange);
    color: var(--k-white);
    font-weight: 600;
    border-radius: 0 0 var(--k-radius-sm) 0;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
}

/* ── WordPress alignment helpers ─────────────────────────── */

/* Full-width sections: stretch edge-to-edge */
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-columns.alignfull {
    max-width: 100vw !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* Remove any inherited constrained max-width from FSE */
body > .wp-site-blocks,
.wp-site-blocks {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ─── INNER CONTENT of full-width sections ─────────────────
   When a group/columns/cover has alignfull, its direct children
   should be centered and max 1200px wide.
   Sections that use padding (is-style-section-*) handle this
   through their own CSS padding + max-width on a container.  */

/* Direct children of section groups fill available width (section padding handles max-width) */
.is-style-section-white  > .wp-block-columns,
.is-style-section-cream  > .wp-block-columns,
.is-style-section-light  > .wp-block-columns,
.is-style-section-dark   > .wp-block-columns,
.is-style-cta-dark       > .wp-block-columns,
.is-style-section-white  > .wp-block-group,
.is-style-section-cream  > .wp-block-group,
.is-style-section-light  > .wp-block-group,
.is-style-section-dark   > .wp-block-group,
.is-style-section-white  > .wp-block-query,
.is-style-section-cream  > .wp-block-query,
.is-style-section-light  > .wp-block-query,
.is-style-section-dark   > .wp-block-query {
    width: 100%;
}

/* Flex groups inside sections: never wrap, always fill full row */
.is-style-section-white  > .wp-block-group.is-layout-flex,
.is-style-section-cream  > .wp-block-group.is-layout-flex,
.is-style-section-light  > .wp-block-group.is-layout-flex,
.is-style-section-dark   > .wp-block-group.is-layout-flex {
    flex-wrap: nowrap;
    align-items: center;
}

/* Inside a flex group, headings must not grow to fill the whole row */
.is-style-section-white  > .wp-block-group.is-layout-flex > .wp-block-heading,
.is-style-section-cream  > .wp-block-group.is-layout-flex > .wp-block-heading,
.is-style-section-light  > .wp-block-group.is-layout-flex > .wp-block-heading,
.is-style-section-dark   > .wp-block-group.is-layout-flex > .wp-block-heading {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.is-style-section-white  > .wp-block-group.is-layout-flex > .wp-block-paragraph,
.is-style-section-cream  > .wp-block-group.is-layout-flex > .wp-block-paragraph,
.is-style-section-light  > .wp-block-group.is-layout-flex > .wp-block-paragraph,
.is-style-section-dark   > .wp-block-group.is-layout-flex > .wp-block-paragraph {
    flex: 0 0 auto;
    margin-bottom: 0;
    white-space: nowrap;
}

/* Constrain content inside cover hero blocks */
.wp-block-cover .wp-block-cover__inner-container {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Section spacing: kill any unwanted margin between stacked sections */
.wp-block-group + .wp-block-group,
.wp-block-cover + .wp-block-group,
.wp-block-group + .wp-block-cover,
.wp-block-columns + .wp-block-group,
.wp-block-group + .wp-block-columns {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Section inner column / group gaps ───────────────────── */
/* Default column gap inside sections */
.is-style-section-white  > .wp-block-columns,
.is-style-section-cream  > .wp-block-columns,
.is-style-section-light  > .wp-block-columns,
.is-style-section-dark   > .wp-block-columns {
    gap: 1.5rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Consecutive column rows (service cards, challenge cards): tight vertical gap */
.is-style-section-white  > .wp-block-columns + .wp-block-columns,
.is-style-section-cream  > .wp-block-columns + .wp-block-columns,
.is-style-section-light  > .wp-block-columns + .wp-block-columns {
    margin-top: 1.25rem !important;
}

/* Section subheading (paragraph below h2 in section-header) */
.section-header > .wp-block-paragraph {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Paragraph margin-bottom reset for last-child inside groups */
.wp-block-group > p:last-child,
.wp-block-group > .wp-block-paragraph:last-child {
    margin-bottom: 0;
}

/* ── Responsive images in blocks ─────────────────────────── */
.wp-block-image img {
    border-radius: var(--k-radius-md);
}

/* ── Separators ───────────────────────────────────────────── */
.wp-block-separator {
    border-color: var(--k-border);
    opacity: 1;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.breadcrumb a { color: rgba(255,255,255,0.8); }
.breadcrumb a:hover { color: var(--k-white); }
.breadcrumb span { color: rgba(255,255,255,0.4); }

/* ── Page hero (shared, dark) ────────────────────────────── */
.page-hero-section {
    background-color: var(--k-dark);
    padding: 4rem var(--wp--preset--spacing--60);
    text-align: center;
}
.page-hero-section h1 {
    color: var(--k-white);
    margin-bottom: 1rem;
}
.page-hero-section p {
    color: rgba(255,255,255,0.75);
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ── Blog card base ───────────────────────────────────────── */
.blog-card {
    background: var(--k-white);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    overflow: hidden;
    transition: transform var(--k-transition), box-shadow var(--k-transition);
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--k-shadow-lg);
}

/* ── Archive grid ─────────────────────────────────────────── */
.archive-hero {
    padding: 5rem var(--wp--preset--spacing--60) !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    body { font-size: 1rem; }

    /* Stack all columns unless explicitly opted out */
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-direction: column !important;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Section flex headers: allow wrapping so "see all" links drop below heading */
    .is-style-section-white > .wp-block-group.is-layout-flex,
    .is-style-section-cream > .wp-block-group.is-layout-flex,
    .is-style-section-light > .wp-block-group.is-layout-flex,
    .is-style-section-dark  > .wp-block-group.is-layout-flex {
        flex-wrap: wrap !important;
        gap: 0.5rem;
    }

    /* Allow text to wrap inside flex section headers */
    .is-style-section-white > .wp-block-group.is-layout-flex > .wp-block-paragraph,
    .is-style-section-cream > .wp-block-group.is-layout-flex > .wp-block-paragraph,
    .is-style-section-light > .wp-block-group.is-layout-flex > .wp-block-paragraph,
    .is-style-section-dark  > .wp-block-group.is-layout-flex > .wp-block-paragraph {
        white-space: normal !important;
        flex: 0 0 auto;
    }

    /* Centre breadcrumbs on mobile */
    .breadcrumb {
        justify-content: center;
    }
}