/*
 Theme Name:   Starter 2025
 Theme URI:    https://creativepassenger.com
 Description:  Starter 2025 theme for GeneratePress
 Author:       Wim Kroegman
 Author URI:   https://www.linkedin.com/in/wimkroegman/
 Template:     generatepress
 Version:      1.0.0
*/

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

.block-editor-block-list_layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0px;
}

/* Hide WooCommerce cart icon when empty (desktop navigation, mobile header, and mobile bar) */
.main-navigation .menu-bar-items .wc-menu-item:not(.has-items),
#mobile-menu-control-wrapper .menu-bar-items .wc-menu-item:not(.has-items),
.mobile-bar-items.wc-mobile-cart-items:not(.has-items) {
    display: none !important;
}

/* =========================
   STICKY FOOTER
========================= */

/* Sticky footer: keep .site-footer at the bottom of the viewport */
html,
body {
    height: 100%;
}

body {
    /* Use dynamic viewport units for mobile browsers */
    min-height: 100dvh;
    min-height: 100vh; /* fallback */
    display: flex;
    flex-direction: column;
}

/* Let the main page area take the remaining height */
#page {
    flex: 1 0 auto;
    width: 100%;
}

/* Push the footer to the bottom when content is short */
.site-footer {
    margin-top: auto;
}

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

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

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

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

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

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

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

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

/* No underline */
.no-ul,
.no-ul a {
    text-decoration: none;
}

/* Image-as-background pattern
   - Renders the first <img> as a full-cover background inside .image-background
   - Keeps a real <img> for LCP/SEO while pushing it behind content
*/
.image-background {
    position: relative;
    isolation: isolate;

    & img:first-of-type {
        position: absolute;
        inset: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
    }
}

/* Stretch links
  - Make sure you only have ONE link inside your card or this will not work!
*/
.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;
}

/* =========================
   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 {
    font-family: var(--gp-font--body);
}

/* Add top margin to headings (H2–H6) only when they follow a paragraph inside .entry-content */
.entry-content p + h2,
.entry-content p + h3,
.entry-content p + h4,
.entry-content p + h5,
.entry-content p + h6 {
    margin-top: 1em;
}

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

h1,
.fs-h1 {
    font-size: clamp(3.375rem, 2.9915rem + 1.5341vw, 4.2188rem);
}

h2,
.fs-h2 {
    font-size: clamp(2.5313rem, 2.2436rem + 1.1506vw, 3.1641rem);
}

h3,
.fs-h3 {
    font-size: clamp(2.1094rem, 1.8697rem + 0.9588vw, 2.6367rem);
}

h4,
.fs-h4 {
    font-size: clamp(1.6875rem, 1.4957rem + 0.767vw, 2.1094rem);
}

h5,
.fs-h5 {
    font-size: clamp(1.4063rem, 1.2464rem + 0.6392vw, 1.7578rem);
}

h6,
.fs-h6 {
    font-size: clamp(1.2656rem, 1.1218rem + 0.5753vw, 1.582rem);
}

p,
.fs-p {
    font-size: clamp(0.9rem, 0.7977rem + 0.4091vw, 1.125rem);
}