/*
 Theme Name:   Webfronten Theme
 Theme URI:    https://www.webfronten.dk/
 Description:  Webfronten child theme for GeneratePress
 Author:       Torben Heikel Vinther
 Author URI:   https://www.webfronten.dk/
 Template:     generatepress
 Version:      0.2
 */

/* =========================
   CONTAINER WRAPPER
========================= */

.site-wrapper {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    background-color: var(--neutral-0);
}

/* Set the main content area height */
#main {
    min-height: 65vh;
}

/* =========================
   TYPOGRAPHY
========================= */

/* Font Family Utilities */
.ff-body {
    font-family: var(--gp-font--body);
}

.ff-heading {
    font-family: var(--gp-font--headings);
}

/* Heading and utility class font assignment */
h1,
h2,
h3,
h4,
h5,
h6,
[class^="fs-"] {
    font-family: var(--gp-font--headings);
}

.fs-p,
.fs-s {
    font-family: var(--gp-font--body);
}

/* =========================
   FLUID TYPOGRAPHY SCALE
   Source: https://theadminbar.com/simple-responsive-font-size-calculator/
========================= */

h1, .fs-h1 {
	font-size: clamp(2.5rem, 2.147rem + 1.535vi, 3.375rem)
}

h2, .fs-h2 {
	font-size: clamp(2rem, 2.0455rem + 0.8182vi, 2.7rem);
}

h3, .fs-h3 {
	font-size: clamp(1.875rem, 1.7045rem + 0.6818vi, 2.25rem);
}

h4, .fs-h4 {
	font-size: clamp(1.5rem, 1.3636rem + 0.5455vi, 1.8rem);
}

h5, .fs-h5 {
	font-size: clamp(1.25rem, 1.1364rem + 0.4545vi, 1.5rem);
}

h6, .fs-h6 {
	font-size: clamp(1.125rem, 1.0227rem + 0.4091vi, 1.35rem);
}

body, p, .fs-p {
	font-size: clamp(0.8333rem, 0.7576rem + 0.303vi, 1rem);
}

.fs-s {
    font-size: clamp(0.7292rem, 0.6629rem + 0.2652vw, 0.875rem);
}

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

/* Header padding with responsive clamp */
.site-header {
    padding-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

/* Typography wrapping */
/* Balance headings and elements with `.balance` class */
:is(h1, h2, h3, h4, h5, h6),
.balance {
    text-wrap: balance;
}

/* Use pretty wrapping for body text elements */
p,
blockquote,
li {
    text-wrap: pretty;
}

/* Remove bottom margin from final paragraph */
p:last-child:last-of-type {
    margin-bottom: 0px;
}

/* Style selection colour */
::selection {
    background: var(--brand-primary);
    color: var(--neutral-0);
}

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

/* Line Clamping */
.line-limit-3,
.line-limit-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-limit-3 {
    -webkit-line-clamp: 3;
}

.line-limit-2 {
    -webkit-line-clamp: 2;
}

/* 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;
}

/* Smooth Transition Utility */
.transition {
    transition: all 0.25s ease-in-out;
}

/* Write text vertical */
.vertical-text {
    writing-mode: sideways-lr;
}

/* =========================
   MEDIA BACKGROUND
========================= */

.media-background {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Overlay content */
.media-background__overlay {
    position: relative;
    z-index: 1;
}

/* Optional gradient overlay */
.media-background.gradient-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(24, 66, 56, 0.55) 95%
    );
}

/* --- Media layer positioning (frontend canonical) --- */

/* Case A: class is on a wrapper (figure/div) */
.media-background__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    margin: 0;
    width: 100%;
    height: 100%;
}

/* Case B: class is directly on the media element (img/video) */
.media-background :is(img, video).media-background__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

/* --- Media rendering (shared) --- */

.media-background__media > :is(img, video),
.media-background :is(img, video).media-background__media,
.editor-styles-wrapper .media-background > :is(div, figure) > :is(img, video),
.editor-styles-wrapper .media-background > :is(img, video) {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: 50% 50%;
    max-width: none;
}

/* --- Block editor: select the preview element and place it as background --- */

.editor-styles-wrapper .media-background {
    /* keep if editor styles are missing or overridden */
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.editor-styles-wrapper .media-background > :is(div, figure) > :is(img, video),
.editor-styles-wrapper .media-background > :is(img, video) {
    position: absolute;
    inset: 0;
    z-index: -2;
}

/* =========================
   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;
}

/* =========================
   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;
}

/* ==================================================
   BLOCK EDITOR BASELINE
   Ensures editor rendering matches frontend
================================================== */

.editor-styles-wrapper {
    max-width: none;
    padding: 0;
}

.editor-styles-wrapper :is(.wp-block, .block-editor-block-list__block) {
    max-width: none;
}

/* Keep full-width sections full width inside editor */
.editor-styles-wrapper .alignfull {
    margin-left: 0;
    margin-right: 0;
}

/* Unhide media blocks hidden by editor previews (GB/Gutenberg quirk) */
.editor-styles-wrapper .wp-block-generateblocks-media[style*="display: none"] {
    display: block !important;
}