/*
 Theme Name:   DZP Theme
 Theme URI:    https://www.deezunkerphotography.com
 Description:  DZP Child Theme with GeneratePress
 Author:       Dee Zunker
 Author URI:   https://deezunker.com
 Template:     generatepress
 Version:      0.2 2025-12-26
*/

/* -- THEME TWEAKS Added August 10, 2025 -- */
/* From Admin Bar 2025 Starter Site Build */

/* Site Wrapper needs to have coding in functions.php */
.site-wrapper {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
}

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


.section-40 {
    max-width: var(--gb-container-width);
    margin: 20px auto;
    padding: clamp(1rem,0.267rem + 2.791vw,2.5rem)
}

.section-60 {
    max-width: var(--gb-container-width);
    margin: 20px auto;
    padding: clamp(1.5rem,0.401rem + 4.186vw,3.75rem) clamp(1rem,0.267rem + 2.791vw,2.5rem)
}

.section-120 {
    max-width: var(--gb-container-width);
    margin: 20px auto;
    padding: clamp(3rem,0.802rem + 8.372vw,7.5rem) clamp(1rem,0.267rem + 2.791vw,2.5rem)
}

.image-coverf {
    bottom: 0px;
    height: 100%;
    left: 0px;
    max-width: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100%
}

h1, .fs-h1 {
    /* Reduced Max to 2.5rem because Caps are huge */
    font-size: clamp(2rem, 1.77rem + 0.91vw, 2.5rem);
    font-family: var(--gp-font--head, --gp-font--body, Arial, sans-serif);
    line-height: 1.1; /* Tight line height works well for Caps */
    font-weight: 700; /* Urbanist looks great slightly bolder in caps */
    text-transform: uppercase;
    letter-spacing: 0.02em; /* Just a tiny bit of air */
}

h2, .fs-h2 {
    font-size: clamp(1.5rem, 1.27rem + 0.91vw, 2rem);
    font-family: var(--gp-font--head, --gp-font--body, Arial, sans-serif);
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em; /* Slightly more air for smaller sizes */
}

h3, .fs-h3 {
    font-size: clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem);
    font-family: var(--gp-font--head, --gp-font--body, Arial, sans-serif);
    line-height: 1.25;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em; 
}

h4, .fs-h4 {
    font-size: clamp(1.125rem, 1.07rem + 0.23vw, 1.25rem);
    font-family: var(--gp-font--head, --gp-font--body, Arial, sans-serif);
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

h5, .fs-h5 {
    /* Fixed size. H5/H6 in caps are often used as "Eyebrow" text */
    font-size: 1rem; 
    font-family: var(--gp-font--head, --gp-font--body, Arial, sans-serif);
    line-height: 1.4;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em; /* Wide spacing for small caps looks premium */
}

h6, .fs-h6 {
    font-size: 0.875rem; /* 14px */
    font-family: var(--gp-font--head, --gp-font--body, Arial, sans-serif);
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em; /* Very wide spacing */
    color: #666; /* Optional: Usually smaller headers are lighter color */
}

p, .fs-p, .rank-math-answer {
    /* Inter Body Settings */
    /* 15px min - 17px max */
    font-size: clamp(0.9375rem, 0.88rem + 0.23vw, 1.0625rem);
    font-family: var(--gp-font--body, Arial, sans-serif);
    line-height: 1.6;
    letter-spacing: -0.011em; /* Inter actually looks cleaner with tiny neg spacing */
}

/* H1 & H2: The "Brand" Voice (All Caps) */
h1, .fs-h1, h2, .fs-h2 {
    font-family: var(--gp-font--head);
    text-transform: uppercase;
    letter-spacing: 0.02em; /* Air it out */
    font-weight: 700;
}

/* H3 & H4: The "Human" Voice (Regular Case) */
h3, .fs-h3, h4, .fs-h4 {
    font-family: var(--gp-font--head);
    text-transform: none; /* Normal reading flow */
    letter-spacing: -0.01em; /* Tighten slightly for sentence case */
    font-weight: 600; /* Slightly lighter weight for reading */
}

/* H6: The "Label" (All Caps, wide spacing) */
h6, .fs-h6 {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    font-size: 0.875rem;
}

/* 1. The Utility Class 
   Add class="u-tabular" to any Div, P, or Span containing 
   pricing, dates, or dimensions.
*/
.u-tabular {
    font-family: var(--gp-font--body, 'Inter', sans-serif);
    
    /* The Modern Standard */
    font-variant-numeric: tabular-nums;
    
    /* Fallback for older browsers */
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    
    /* Optional: Slashed Zero (Good for technical specs/dimensions) */
    /* font-feature-settings: "tnum", "zero"; */
}

/* 2. Global Table Fix 
   Automatically fixes alignment in any standard HTML table 
*/
table, .pricing-table, .specs-list {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Makes Inter look more modern/geometric */
body {
    /* cv11 = Single Story 'a' */
    font-feature-settings: "cv11"; 
}

/* If combining with tabular numbers on specific elements: */
.u-tabular {
    font-feature-settings: "tnum", "cv11";
}

.bt-cta {
    /* LAYOUT */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.3rem;
    padding: 0.75rem 2rem; /* Wider padding feels more premium/spacious */
    
    /* TYPOGRAPHY - Matching your new Headers */
    font-family: var(--gp-font--head, 'Urbanist', sans-serif); 
    font-size: 1rem; /* 16px - 18px is usually fine, but 1rem scales better */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em; /* Wide tracking for that "Label" look */
    text-decoration: none;
    line-height: 1; 

    /* SHAPE & COLOR */
    background-color: var(--accent--02, #9E3D30); /* Solid color, no transparency */
    color: var(--base--100, #f0eee9);
    border: 2px solid var(--accent--02, #9E3D30); /* Border matches bg */
    border-radius: 4px; /* 8px is too round. 2px-4px is "Architectural" */
    
    /* ANIMATION */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: none; /* Removed the "Gel" effect */
}

/* HOVER STATE: High Contrast/Inverted */
.bt-cta:is(:hover, :focus) {
    background-color: var(--base--100, #f0eee9);
    color: var(--accent--02, #9E3D30); /* Text becomes the accent color */
    border-color: var(--accent--02, #9E3D30);
    transform: translateY(-2px); /* Subtle physical lift */
}

/* LINK RESET (Safety measure) */
.bt-cta a {
    color: inherit;
    text-decoration: none;
}

/* SECONDARY "GHOST" BUTTON 
   Usage: class="bt-cta bt-ghost"
   Note: This inherits the shape/font from .bt-cta but overrides colors.
*/

.bt-cta.bt-ghost {
    background-color: transparent;
    border: 2px solid var(--accent--02, #9E3D30); /* Matches the primary red */
    color: var(--accent--02, #9E3D30); /* Text is red */
}

/* HOVER STATE
   Action: Fills in solid when hovered (The reverse of the primary button)
*/
.bt-cta.bt-ghost:is(:hover, :focus) {
    background-color: var(--accent--02, #9E3D30);
    color: var(--neutral--00, #ffffff);
    border-color: var(--accent--02, #9E3D30);
    transform: translateY(-2px); /* Same lift effect for consistency */
    box-shadow: 0 4px 12px rgba(158, 61, 48, 0.2); /* Optional: Slight glow on hover */
}

/* LIGHT/INVERTED GHOST 
   Usage: class="bt-cta bt-ghost bt-light"
   Use this on dark backgrounds (images or dark grey sections)
*/

.bt-cta.bt-ghost.bt-light {
    border-color: var(--neutral--00, #ffffff);
    color: var(--neutral--00, #ffffff);
}

.bt-cta.bt-ghost.bt-light:is(:hover, :focus) {
    background-color: var(--accent--02, #ffffff);
    color: var(--base--100, #f0eee9); /* Text turns black */
    border-color: var(--base--100, #ffffff);
}

/* MOBILE OPTIMIZATION (Screens smaller than 768px) */
@media screen and (max-width: 1024px) {
    .bt-cta {
        /* 1. Tighter Padding: Reduces width significantly */
        /* Top/Bottom: 0.5rem, Left/Right: 1.25rem */
        padding: 0.5rem 1.0rem; 

        /* 2. Smaller Text: 14px fits better than 16px in headers  */
        font-size: 0.875rem;

        /* 3. Reduced Margin: Prevents pushing other header items away */
        margin: 0.15rem;
        
        /* Optional: Slightly thinner border looks cleaner on small screens */
        border-width: 1.5px;
    }
}

/* Admin Bar Fluid Typography Scale with clamps */
/* updating fonts wiht Gemini - Keeping this for reference for now 
h1, .fs-h1 {
    font-size: clamp(3rem, 2.7273rem + 1.0909vw, 3.6rem);
    line-height: clamp(2.5rem, 2.012rem + 1.86vw, 5.5rem);
    font-weight: 600;

    font-family: var(--gp-font--head, --gp-font--body, Arial, sans-serif); 
}

h2, .fs-h2 {
    font-size: clamp(2.25rem, 2.0455rem + 0.8182vw, 2.7rem);
    font-family: var(--gp-font--head, --gp-font--body, Arial, sans-serif);
    line-height: clamp(2rem, 1.756rem + 0.93vw, 2.5rem);
    font-weight: 600;
}

h3, .fs-h3 {
    font-size: clamp(1.875rem, 1.7045rem + 0.6818vw, 2.25rem);
    font-family: var(--gp-font--head, --gp-font--body, Arial, sans-serif);
    line-height: clamp(1.75rem, 1.628rem + 0.465vw, 2rem);
    font-weight: 600;
}

h4, .fs-h4 {
    font-size: clamp(1.5rem, 1.3636rem + 0.5455vw, 1.8rem);
    font-family: var(--gp-font--head, --gp-font--body, Arial, sans-serif);
    line-height: 24px;
    font-weight: 600;
}

h5, .fs-h5 {
    font-size: clamp(1.25rem, 1.1364rem + 0.4545vw, 1.5rem);
    font-family: var(--gp-font--head, --gp-font--body, Arial, sans-serif);
    line-height: 20px;
    font-weight: 500;
}

h6, .fs-h6 {
    font-size: clamp(1.125rem, 1.0227rem + 0.4091vw, 1.35rem);
    font-family: var(--gp-font--head, --gp-font--body, Arial, sans-serif);
    line-height: 20px;
    font-weight: 600;
}

p, .fs-p, .rank-math-answer {
    font-size: clamp(0.8333rem, 0.7576rem + 0.303vw, 1rem);
    font-family: var(--gp-font--body, Arial, sans-serif);
    line-height: 1.5rem;
}
*/

/* updating fonts wiht Gemini - Keeping this for reference for now 
.bt-cta {
    align-items: center;
    background-color: rgba(158, 61, 48, 0.85);
    box-shadow: inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.35),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.35),inset 0 0 0em 0.05em rgba(255,255,255,0.35);
    color: var(--neutral--00);
    display: inline-flex;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid var(--accent--02);
    border-radius: 8px;
    margin: .3rem 0.3rem;
    padding: .5rem 1.5rem
}

.bt-cta:is(:hover,:focus) {
    background-color: var(--accent--02);
    color: var(--neutral--00);
    border-color: var(--accent--01);
}

.bt-cta a {
    color: var(--base--100);
    text-decoration: none
}

.bt-cta a:hover {
    color: var(--base--100);
    text-decoration: none
}

@media (max-width:1024px) {
    .bt-cta {
        border-bottom-color: var(--accent--02);
        border-left-color: var(--accent--02);
        border-right-color: var(--accent--02);
        border-top-color: var(--accent--02);
		margin: .2rem 0.2rem;
		padding: .3rem 0.9rem;
	    font-size: 16px;
		font-weight: 600
    }
}
*/

/* Code that stretches the link from a header to the container */
.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;
}

/* Text Balance / Pretty */

:is(h1, h2, h3, h4, h5, h6), .balance {
    /* FIXED: Removed typo "|" at the end of the line */
    text-wrap: balance;
}

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

/* Removes margin from last item on the page or group */
p:last-child:last-of-type {
    margin-bottom: 0px;
}

/* Transition - for sections and containers */
.transition {
    transition: all .25s ease-in-out;
}

@media (prefers-reduced-motion: no-preference) {
    .animate {
        opacity: 0;
        transform: translateY(100px);
        transition: opacity 1s ease, transform 0.6s ease;
        will-change: opacity, transform;
    }

    .animate.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Disable animation in the editor preview */
    .editor-styles-wrapper .animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Rank Math FAQ */
.rank-math-question {
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Manual Table of Contents */
.table-of-contents {
    background: #f8f9fa;
    border-left: 4px solid var(--contrast-2);
    padding: 20px 30px;
    margin: 30px 0;
    border-radius: 4px;
}

.table-of-contents h2 {
    margin-top: 0;
    font-size: 1.2em;
    color: var(--contrast-2);
}

.table-of-contents ul {
    margin: 15px 0 0 0;
    padding-left: 20px;
    list-style: none;
}

.table-of-contents li {
    margin: 8px 0;
}

.table-of-contents a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s;
}

.table-of-contents a:hover {
    color: #004499;
    text-decoration: underline;
}

/* Image Management */

/* Image background for hero sections */
.image-background {
    position: relative;
    isolation: isolate;
}

/* Un-nested this rule for better compatibility across older setups */
.image-background img:first-of-type {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

/* Aspect Ratios */
.ar-16-9 { aspect-ratio: 16/9; }
.ar-9-16 { aspect-ratio: 9/16; }
.ar-4-3  { aspect-ratio: 4/3; }
.ar-3-4  { aspect-ratio: 3/4; }
.ar-4-5  { aspect-ratio: 4/5; }
.ar-5-4  { aspect-ratio: 5/4; }
.ar-1-1  { aspect-ratio: 1/1; }

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

/* Custom meow horizontal gallery */
.meowhor {
    height: 70vh;
}

.mwl__metadata {
    display: none;
}

/* Rank Math Mods */
.rank-math-breadcrumb {
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    color: white;
    /* FIXED: Removed "link: var(--accent);" as 'link' is not a valid property. */
}

/* Responsive iframe */
.gtour {
    position: relative;
    padding-bottom: 56%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.gtour iframe,
.gtour object,
.gtour embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Buttons for Downloads */
a.button-dz {
    display: inline-block;
    padding: 0.7em 1.7em;
    margin: 0 0.3em 0.3em 0;
    border: 0.16em solid rgba(255,255,255,0);
    border-radius: 0.2em;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
    font-weight: 400;
    color: #FFFFFF;
    background-color: #4e9af1;
    box-shadow: inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17), inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15), inset 0 0 0em 0.05em rgba(255,255,255,0.12);
    text-align: center;
    position: relative;
}

a.button-dz:hover {
    border-color: rgba(0,0,0,1);
}

@media all and (max-width: 30em) {
    a.button-dz {
        display: block;
        margin: 0.4em auto;
    }
}