/*
====================================
Theme Name:   GP Child Theme by Sterner Agency
Theme URI:    https://sterner.agency/
Description:  A child theme for GeneratePress.
Author:       Tomas Sandström
Author URI:   https://sterner.agency/
Template:     generatepress
Version:      1.13
====================================
*/

/* =========================
   CSS CUSTOM PROPERTIES
   All design values for GenerateBlocks Global Styles
========================= */

:root {
    /* ===== SPACE SYSTEM (Linear progression - 0.5rem steps) ===== */
    --space-xxs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    /* 0.5-0.75rem */
    --space-xs: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
    /* 0.75-1rem */
    --space-s: clamp(1rem, 0.8rem + 1vw, 1.25rem);
    /* 1-1.25rem */
    --space-m: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    /* 1.5-2rem */
    --space-l: clamp(2rem, 1.6rem + 2vw, 2.5rem);
    /* 2-2.5rem */
    --space-xl: clamp(2.5rem, 2rem + 2.5vw, 3rem);
    /* 2.5-3rem */
    --space-xxl: clamp(3rem, 2.4rem + 3vw, 4rem);
    /* 3-4rem */

    /* ===== GAP SYSTEM (Grid/Flexbox gaps - references space) ===== */
    --gap-xxs: var(--space-xxs);
    --gap-xs: var(--space-xs);
    --gap-s: var(--space-s);
    --gap-m: var(--space-m);
    --gap-l: var(--space-l);
    --gap-xl: var(--space-xl);
    --gap-xxl: var(--space-xxl);

    /* ===== WIDTH SYSTEM (Container widths) ===== */
    --width-xxs: calc(var(--width-m) * 0.4);
    --width-xs: calc(var(--width-m) * 0.6);
    --width-s: calc(var(--width-m) * 0.8);
    --width-m: 1280px;
    --width-l: calc(var(--width-m) * 1.2);
    --width-xl: calc(var(--width-m) * 1.4);
    --width-xxl: calc(var(--width-m) * 1.6);

    /* ===== BORDER RADIUS SYSTEM (References space) ===== */
    --border-radius-xxs: calc(var(--space-m) * 0.125);
    --border-radius-xs: calc(var(--space-m) * 0.25);
    --border-radius-s: calc(var(--space-m) * 0.5);
    --border-radius-m: calc(var(--space-m) * 1);
    --border-radius-l: calc(var(--space-m) * 2);
    --border-radius-xl: calc(var(--space-m) * 4);
    --border-radius-xxl: calc(var(--space-m) * 8);
    --border-radius-pill: 9999px;

    /* ===== TYPOGRAPHY SYSTEM (Fluid responsive font sizes) ===== */
    --fs-h1: clamp(3rem, 2.9086rem + 0.3655vw, 3.201rem);
    --fs-h2: clamp(2.25rem, 2.1815rem + 0.2741vw, 2.4008rem);
    --fs-h3: clamp(1.875rem, 1.8179rem + 0.2284vw, 2.0006rem);
    --fs-h4: clamp(1.5rem, 1.4543rem + 0.1827vw, 1.6005rem);
    --fs-h5: clamp(1.25rem, 1.2119rem + 0.1523vw, 1.3338rem);
    --fs-h6: clamp(1.125rem, 1.0907rem + 0.137vw, 1.2004rem);
    --fs-p: clamp(0.9372rem, 0.9087rem + 0.1142vw, 1rem);
    --fs-p-s: clamp(0.8rem, 0.78rem + 0.09vw, 0.85rem);
    --fs-p-xs: clamp(0.72rem, 0.70rem + 0.08vw, 0.78rem);
    --font-body: var(--gp-font--body, var(--gp-font--heading));
    --font-heading: var(--gp-font--heading, var(--gp-font--body));

    /* Shadows */
    --shadow-xs: 0px 0px 10px -3px rgba(0, 0, 0, 0.12);
    --shadow-s: 0px 0px 15px -5px rgba(0, 0, 0, 0.15);
    --shadow-m: 0px 0px 20px -8px rgba(0, 0, 0, 0.18);
}





/* =========================
   THEME TWEAKS
   ========================= */

/*
 * Fixed bakgrundsbild – ligger kvar medan content scrollar.
*/ 
body {
    background-image: url('/wp-content/uploads/2026/02/www-bakgrund-cfg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: 50% 50%;
    overflow-x: hidden;
}

/* Innehållscontainrar transparenta så body-bakgrunden syns */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.separate-containers .inside-page-header {
    background-color: transparent !important;
    background-image: none !important;
}

/*
 * Mobil: förhindra desktop-layout på riktiga enheter.
 */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

/*
 * Safari: vit remsa högst upp
 * Orsak: GeneratePress "skip to content"-länken (första i body, klass
 * .screen-reader-text.skip-link, text "Hoppa till innehåll"). Den ska vara
 * visuellt dold med clip-path, men Safari hanterar det dåligt så den kan
 * ritas som en vit strip. Vi flyttar den helt ur synhåll när den inte är
 * fokuserad; vid fokus använder GP:s egna :focus-stilar så länken syns.
 */
a.skip-link.screen-reader-text {
    left: -9999rem;
    top: 0;
    margin: 0;
    min-height: 0;
    min-width: 0;
}

/* Header padding with responsive variable */
.site-header {
    padding-inline: var(--space-xs);
}

/* Remove bottom margin from final element */
*>*:last-child {
    margin-bottom: 0px;
}

/* =========================
   GP MENU ACCESSIBILITY TWEAKS
   ========================= */

#site-navigation ul.sub-menu {
    display: block;
}

#site-navigation li:hover .gp-icon svg {
    transform: rotate(180deg);
}

#site-navigation li:hover .sub-menu {
    visibility: visible;
}

/* =========================
   GENERATEPRESS NAVIGATION STYLING
   ========================= */

.site-header {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.main-navigation {
    background-color: transparent;
}

.main-navigation a {
    color: #333;
    font-weight: 500;
}

.main-navigation a:hover {
    color: #0073aa;
}

/* =========================
   STRETCH LINK (from Bootstrap)
   Source: https://youtu.be/HBriBrnRlQE?si=DLiSXEiBHt6lw91l
   Note: Only use ONE link per card or this breaks!
   ========================= */

.stretch-link {
    position: relative;
}

.stretch-link a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.stretch-link a:is(:focus-visible)::after {
    outline: 2px solid;
}

.stretch-link a:is(:hover, :focus) {
    outline: none;
}

/* =========================
   UTILITIES
   ========================= */

/* Visually Hidden (accessible to screen readers) */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* =========================
   TYPOGRAPHY UTILITIES
   Text wrapping och font-size klasser
   ========================= */

/* Text wrapping för bättre läsbarhet */
h1,
h2,
h3,
h4,
h5,
h6,
.balance {
    text-wrap: balance;
}

p,
blockquote,
li {
    text-wrap: pretty;
}

/* Font size utility classes */
.fs-h1 {
    font-size: var(--fs-h1);
    font-weight: 800;
}

.fs-h2 {
    font-size: var(--fs-h2);
    font-weight: 800;
}

.fs-h3 {
    font-size: var(--fs-h3);
    font-weight: 800;
}

.fs-h4 {
    font-size: var(--fs-h4);
    font-family: var(--font-body);
    font-weight: 600;
}

.fs-h5 {
    font-size: var(--fs-h5);
    font-family: var(--font-body);
    font-weight: 600;
}

.fs-h6 {
    font-size: var(--fs-h6);
    font-family: var(--font-body);
    font-weight: 600;
}

.fs-p {
    font-size: var(--fs-p);
}

.fs-p-s {
    font-size: var(--fs-p-s);
}

.fs-p-xs {
    font-size: var(--fs-p-xs);
}