/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
/* =========================
   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,p:last-child {
    margin-bottom: 0px;
}



/* =========================
   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-block-list__layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0px;
}


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

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

/* Fluid Typography Scale */

h1, .fs-h1, .fs-h1red {
	font-size: clamp(3rem, 2.4355rem + 2.2582vi, 4.242rem);
}

h2, .fs-h2, .fs-h2red {
	font-size: clamp(2.25rem, 1.8266rem + 1.6936vi, 3.1815rem);
}

h3, .fs-h3, .fs-h3red {
	font-size: clamp(1.875rem, 1.5222rem + 1.4114vi, 2.6512rem);
}

h4, .fs-h4 {
	font-size: clamp(1.5rem, 1.2177rem + 1.1291vi, 2.121rem);
}

h5, .fs-h5 {
	font-size: clamp(1.25rem, 1.0148rem + 0.9409vi, 1.7675rem);
}

h6, .fs-h6 {
	font-size: clamp(1.125rem, 0.9133rem + 0.8468vi, 1.5907rem);
}

p, .fs-p,li {
/*	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); */
	font-size: clamp(17px, calc(21.5px - 0.5vw), 20px);
}
.fs-h1red, .fs-h2red, .fs-h3red {
color: var(--accent);
font-style: italic;
}
/* ==========================================================================
   GenerateBlocks Image Hover: Plus-Icon oben rechts
   ========================================================================== */

/* 1. Den Container für die absolute Positionierung vorbereiten */
.gallery-trigger {
    position: relative !important;
    display: inline-block; /* Sorgt dafür, dass der Container exakt so groß wie das Bild ist */
    overflow: hidden;
}

/* 2. Das weiße Quadrat (Hintergrund) oben rechts erstellen */
.gallery-trigger::before {
    content: "";
    position: absolute;
    top: 0px;      /* Abstand von oben */
    right: 0px;    /* Abstand von rechts */
    width: 60px;    /* Breite des Quadrats */
    height: 60px;   /* Höhe des Quadrats */
    background-color: rgba(255, 255, 255, 0.9); /* Weiß mit minimaler Transparenz */
    border-radius: 0px; /* Leicht abgerundete Ecken (optional, für scharfkantig auf 0px setzen) */
    z-index: 10;
    
    /* Animation vorbereiten */
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 3. Das Plus-Zeichen im Quadrat platzieren */
.gallery-trigger::after {
    content: "+";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 60px;
    height: 60px;
    line-height: 58px; /* Zentriert das Plus vertikal */
    text-align: center; /* Zentriert das Plus horizontal */
    font-size: 24px;   /* Größe des Plus-Zeichens */
    font-weight: bold;
    color: #333333;     /* Farbe des Plus-Zeichens (Dunkelgrau/Schwarz) */
    z-index: 11;       /* Liegt über dem weißen Quadrat */
    
    /* Animation synchronisieren */
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 4. Der Hover-Zustand: Einblenden bei Mauskontakt */
.gallery-trigger:hover::before,
.gallery-trigger:hover::after {
    opacity: 1;
    transform: translateY(0); /* Gleitet sanft 5px nach unten auf seine Endposition */
}

/* 5. Optional: Das Bild beim Hover minimal abdunkeln oder zoomen für mehr Tiefe 
.gallery-trigger :is(img, picture) {
    transition: transform 0.3s ease;
}
*/
.gallery-trigger:hover :is(img, picture) {
    transform: scale(1.02); /* Minimaler Zoom-Effekt */
}