/**
 * CVPhotoVault - Main Stylesheet
 */

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-dark);
    background-color: #ffffff;
}

/* Typography - editorial scale: a deliberate jump between heading tiers,
   not a uniform step-down, so hierarchy reads at a glance. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: 500;
}

h4 {
    font-size: var(--font-size-h4);
    font-weight: 500;
}

p {
    margin-bottom: var(--spacing-md);
    color: var(--color-gray);
    line-height: 1.7;
}

/* Small-caps eyebrow label - reusable outside Elementor content too (blog
   posts, widgets, anything using the theme's own template markup), so the
   same editorial signature used in the redesigned pages is available to
   whatever content a site owner actually adds. */
.eyebrow {
    display: inline-block;
    font-family: var(--font-family-label);
    font-size: var(--font-size-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin-bottom: var(--spacing-sm);
}

a {
    color: var(--color-accent-gold);
    text-decoration: none;
    transition: var(--transition-default);
}

a:hover {
    color: var(--color-dark);
}

/* Header Styles - generous vertical rhythm rather than a tight bar; a
   boutique studio header, not a dense app toolbar. */
.site-header {
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-lg) 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.site-branding {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.site-branding img {
    max-width: 50px;
    height: auto;
}

.site-title {
    font-family: var(--font-family-heading);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--color-dark);
}

.site-description {
    font-size: var(--font-size-small);
    color: var(--color-gray);
    margin: 0;
}

/* Navigation - small-caps tracking and an underline that draws in on
   hover/active rather than a flat color swap, so the interaction itself
   feels considered rather than default. */
.main-navigation {
    display: flex;
    gap: var(--spacing-xl);
}

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-xl);
}

.main-navigation a {
    position: relative;
    display: inline-block;
    padding: 4px 0;
    color: var(--color-dark);
    font-family: var(--font-family-label);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.main-navigation a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--color-accent-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-navigation a:hover {
    color: var(--color-dark);
}

.main-navigation a:hover::after,
.main-navigation .current-menu-item a::after,
.main-navigation .current_page_item a::after {
    transform: scaleX(1);
    transform-origin: left;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
}

.menu-toggle .hamburger {
    width: 24px;
    height: 2px;
    background: var(--color-dark);
    display: block;
    transition: var(--transition-default);
}

/* Buttons - sharp corners and a quiet letter-spacing/fill transition
   rather than a lifted shadow, matching the restrained interaction
   language used throughout the redesigned Elementor content. */
.button,
button,
input[type="submit"],
input[type="button"],
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height);
    padding: 0 var(--btn-padding-x);
    background-color: var(--color-accent-gold);
    color: var(--color-dark);
    border: 1px solid var(--color-accent-gold);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-label);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: letter-spacing 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
a.button:hover {
    background-color: transparent;
    color: var(--color-accent-gold);
    letter-spacing: 1.5px;
}

.button.secondary,
.button-secondary {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: #ffffff;
}

.button.secondary:hover,
.button-secondary:hover {
    background-color: transparent;
    color: var(--color-dark);
}

/* Content */
.cvphotovault-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.cvphotovault-content-wrapper {
    margin: var(--spacing-xxl) 0;
}

/* Post teaser cards (template-parts/content.php, content-archive.php).
   A restrained hover-zoom (contained by the overflow:hidden wrapper, not
   affecting layout) rather than a static thumbnail - applies to any post
   thumbnail a site owner uploads, not just the demo imagery. */
.entry-thumbnail {
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}

.entry-thumbnail img {
    border-radius: var(--border-radius-sm);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.entry-thumbnail:hover img {
    transform: scale(1.04);
}

.entry-date,
.entry-author {
    font-size: var(--font-size-small);
    color: var(--color-gray);
    margin-right: var(--spacing-sm);
}

article.entry {
    margin-bottom: var(--spacing-xxl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

article.entry:last-of-type {
    border-bottom: none;
}

/* Blog listing hero (home.php - the site's configured Posts Page) */
.blog-hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xxl) 0;
    background-image: linear-gradient(rgba(11, 11, 11, 0.6), rgba(11, 11, 11, 0.6)),
        url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1600&h=900&fit=crop');
    background-size: cover;
    background-position: center center;
}

.blog-hero-title {
    font-family: var(--font-family-heading);
    font-size: 64px;
    color: #F7F5F0;
    margin-bottom: var(--spacing-sm);
}

.blog-hero-desc {
    color: #F7F5F0;
    font-size: 20px;
    margin: 0;
}

@media (max-width: 767px) {
    .blog-hero-title {
        font-size: 40px;
    }

    .blog-hero-desc {
        font-size: 16px;
    }
}

/* Single post (single.php, template-parts/content-single.php)

   Container widths, deliberately different: the featured image reads well
   wider (editorial treatment) than the article text (comfortable reading
   measure). Both stay centered on the same axis as everything else on the
   page (nav, comments) so the page still has one consistent rhythm. */
.post-thumbnail-wrap {
    max-width: 1240px;
    margin: 0 auto var(--spacing-xl);
    padding: 0 var(--spacing-md);
}

.post-article-width {
    max-width: 1040px;
    margin: 0 auto;
}

.post-header {
    margin-bottom: var(--spacing-xl);
}

.post-category {
    display: inline-block;
    font-family: var(--font-family-label);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin-bottom: var(--spacing-sm);
}

.post-title {
    font-size: var(--font-size-h1);
    margin-bottom: var(--spacing-md);
}

.post-meta {
    font-size: var(--font-size-small);
    color: var(--color-gray);
}

.post-meta span {
    margin-right: var(--spacing-sm);
}

/* Hero image: an editorial-height crop rather than a full-bleed banner at
   the image's native aspect ratio (which, at full container width, made it
   disproportionately tall). Matches the 8:5 ratio of the registered
   'cvphotovault-blog-featured' image size (800x500) it's actually served at.
   Margin lives on .post-thumbnail-wrap (the width-constraining parent), not
   here, to avoid doubling up the spacing. */
.post-thumbnail {
    max-height: 560px;
    overflow: hidden;
    border-radius: var(--border-radius-md);
}

.post-thumbnail img {
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .post-thumbnail {
        max-height: 320px;
        border-radius: var(--border-radius-sm);
    }
}

.post-content {
    line-height: 1.8;
    margin-bottom: var(--spacing-xl);
}

.post-content p {
    margin-bottom: var(--spacing-lg);
}

.post-footer {
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.post-tags a {
    display: inline-block;
    margin: 0 var(--spacing-xs) var(--spacing-xs) 0;
    padding: 4px 12px;
    background: var(--color-light-gray);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-small);
}

.page-links {
    margin: var(--spacing-lg) 0;
}

/* ==========================================================================
   Previous/Next post navigation (single.php's the_post_navigation() call -
   WordPress's own core markup/classes: nav.post-navigation > .nav-links >
   .nav-previous/.nav-next, each containing an <a> with the .nav-label/
   .nav-title spans passed in via prev_text/next_text in single.php).
   ========================================================================== */
.post-navigation {
    max-width: 1040px; /* matches .post-article-width, same reading-width rhythm */
    margin: var(--spacing-xxl) auto 0;
    padding: 0 var(--spacing-md);
}

.post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    padding: var(--spacing-lg) 0;
}

.post-navigation .nav-previous {
    border-right: 1px solid var(--color-border);
    padding-right: var(--spacing-lg);
}

.post-navigation .nav-next {
    padding-left: var(--spacing-lg);
    text-align: right;
}

/* Edge cases: WordPress's own the_post_navigation() only ever renders the
   .nav-previous/.nav-next elements that actually have an adjacent post to
   link to (and omits the whole <nav> if neither exists) - nothing to change
   there. But the two-column grid above assumes both exist; when only one
   does, it would otherwise sit in column 1 with an empty-looking gap where
   the other column would have been. :only-child lets it take the full row
   instead. */
.post-navigation .nav-links .nav-previous:only-child,
.post-navigation .nav-links .nav-next:only-child {
    grid-column: 1 / -1;
    border-right: none;
    padding-right: 0;
    padding-left: 0;
    text-align: left;
}

.post-navigation a {
    display: block;
    color: var(--color-dark);
    transition: var(--transition-default);
}

.post-navigation .nav-label {
    display: block;
    font-family: var(--font-family-label);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin-bottom: var(--spacing-xs);
}

.post-navigation .nav-title {
    display: block;
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.post-navigation a:hover .nav-title {
    color: var(--color-accent-gold);
}

@media (max-width: 767px) {
    .post-navigation .nav-links {
        grid-template-columns: 1fr;
    }

    .post-navigation .nav-previous {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-right: 0;
    }

    .post-navigation .nav-next {
        padding-left: 0;
        text-align: left;
    }
}

/* ==========================================================================
   Blog archive grid (home.php + template-parts/content.php). Applies
   wherever template-parts/content.php is used (blog listing, search
   results, generic archive fallback) - one consistent, intentional card
   design rather than a parallel blog-only template.
   ========================================================================== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl) var(--spacing-lg);
}

.blog-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important; /* overrides the plain-list .entry rule's own spacing/border, no longer relevant in a grid */
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.blog-card-image {
    display: block;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
}

.blog-card-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Home "What We Do" service cards - the image widget sets object-fit:cover
   via Elementor's own control, but that control has no accompanying height,
   so without this the image renders at its own natural aspect ratio instead
   of being cropped to match its siblings (confirmed: a portrait-oriented
   source photo rendered visibly taller than the other cards' images). */
.services-card-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.04);
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card-category {
    display: inline-block;
    font-family: var(--font-family-label);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin-bottom: var(--spacing-xs);
}

.blog-card .entry-title {
    font-size: 21px;
    margin-bottom: 6px;
}

.blog-card .entry-title a {
    color: var(--color-dark);
    transition: var(--transition-default);
}

.blog-card:hover .entry-title a {
    color: var(--color-accent-gold);
}

.blog-card .entry-meta {
    font-size: var(--font-size-small);
    color: var(--color-gray);
    margin-bottom: var(--spacing-sm);
}

.blog-card .entry-content {
    color: var(--color-gray);
    font-size: 15px;
    line-height: 1.6;
    flex-grow: 1;
}

.blog-card .entry-content p {
    margin-bottom: var(--spacing-sm);
}

.blog-card-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--spacing-sm);
    font-family: var(--font-family-label);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-dark);
    transition: var(--transition-default);
}

.blog-card-readmore span {
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-readmore {
    color: var(--color-accent-gold);
}

.blog-card:hover .blog-card-readmore span {
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Global Header/Footer (Header Footer Elementor plugin templates - see
   cvphotovault_create_uael_templates() in inc/demo-import/demo-importer.php).
   Styles the shortcode-rendered branding/nav/copyright output (from
   inc/helpers.php) scoped under each template's own _element_id, so this
   cannot affect any other section.
   ========================================================================== */

/* ---- Header ------------------------------------------------------------ */
#cvphotovault-hfe-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Overrides the theme-wide ".elementor-section.elementor-section-boxed
   { padding: var(--spacing-xl) 0; }" rule in elementor.css - ONLY for the
   Header. That global rule is two classes (specificity 0,2,0); Elementor's
   own per-instance padding control would only emit a single-class selector
   (0,1,0), so it always loses to the global rule regardless of what's set
   in cvphotovault_create_uael_templates() - confirmed by inspecting the
   Header's actual generated CSS file, which contains no padding override
   at all despite one being saved in its settings. Adding the Header's own
   _element_id to the selector (1,2,0) wins outright, without touching the
   global rule, its --spacing-xl variable, or needing !important. 10px is a
   small intentional value, not zero, so the logo doesn't sit flush against
   the border. */
#cvphotovault-hfe-header.elementor-section.elementor-section-boxed {
    padding: 10px 0;
}

/* Overrides the theme-wide ".elementor-column { padding: var(--spacing-md)
   !important; }" rule in elementor.css - ONLY for the Header's two columns.
   That rule is !important, so beating it requires !important too (a
   non-important rule can never win against it regardless of specificity);
   the ID-scoped selector here is what wins the tie-break between the two
   !important declarations. The Header's own 10px section padding above
   already provides the intentional edge spacing, so the columns
   themselves don't need any of their own. */
#cvphotovault-hfe-header .elementor-column {
    padding: 0 !important;
}

/* Branding - native Site Title/Site Logo widget (HFE's own bundled
   widgets, not a shortcode - see cvphotovault_create_uael_templates() in
   inc/demo-import/demo-importer.php). Only resetting the browser's default
   heading margin here; typography/color are set as real widget settings. */
#cvphotovault-hfe-header .hfe-heading {
    margin: 0;
}

#cvphotovault-hfe-header .hfe-heading a,
#cvphotovault-hfe-header .hfe-heading-text {
    text-decoration: none;
}

/* Site Logo widget - the widget's own 'width' control (set per-breakpoint
   in cvphotovault_create_uael_templates()) handles sizing; this just
   guarantees the image itself never stretches/distorts/crops regardless of
   its native dimensions. */
#cvphotovault-hfe-header .hfe-site-logo-container img {
    height: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* Navigation - native Header Footer Elementor "Navigation Menu" widget.
   Its own settings (menu, navmenu_align, colors, typography, responsive
   breakpoint/hamburger) are all set directly in
   cvphotovault_create_uael_templates() as real widget controls - this is
   only the one visual detail that widget doesn't have a dedicated control
   for: the underline that draws in under the active/hovered item, matching
   the site's existing nav style. a.hfe-menu-item and .current-menu-item are
   the widget's own real classes (confirmed in its menu-walker.php). */
#cvphotovault-hfe-header a.hfe-menu-item {
    position: relative;
}

#cvphotovault-hfe-header a.hfe-menu-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--color-accent-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#cvphotovault-hfe-header a.hfe-menu-item:hover::after,
#cvphotovault-hfe-header .menu-item.current-menu-item a.hfe-menu-item::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Keep logo + hamburger on ONE row on mobile. Below 767px, Elementor's own
   frontend.css forces ".elementor-column { width: 100%; }", which stacks
   the logo column above the nav column onto two separate full-width rows
   instead of side-by-side - that plain class selector is overridden here
   with an ID-scoped one (higher specificity, no !important needed) so both
   columns size to their own content and stay on the same row, with
   justify-content: space-between pushing the logo to the left edge and the
   hamburger to the right edge. */
@media (max-width: 767px) {
    #cvphotovault-hfe-header .elementor-container {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }

    /* flex-shrink must stay allowed (not 0) here by default - at narrow
       widths (~480px and below) the nav column needs to be able to shrink
       so the hamburger can't overflow the viewport. min-width: 0 overrides
       flexbox's own default min-width: auto, which otherwise blocks a flex
       item from shrinking below its content's intrinsic width in the
       first place. */
    #cvphotovault-hfe-header .elementor-column {
        width: auto;
        min-width: 0;
        max-width: 100%;
    }

    /* The logo column is the one exception: measured directly (via a real
       headless-browser test, not assumed) that leaving it shrinkable
       causes the browser to badly miscompute its flex "auto" content size
       - an <img> sized with max-width:100% (main.css) inside an
       auto-width flex ancestor is exactly the case where browsers can't
       reliably determine the item's true content width up front, so with
       flex-shrink enabled it gets shrunk to roughly a third of its real
       170px size (confirmed: forcing flex-shrink:0 on this column alone
       took the rendered logo from 68px to the correct 170px, no other
       change needed). The logo's own width is already fixed via the Site
       Logo widget's responsive 'width'/'width_mobile' settings, so it
       never actually needs to shrink - only the nav column does, to
       prevent the hamburger from overflowing at very narrow widths (the
       original reason flex-shrink was enabled above). */
    #cvphotovault-hfe-brand-col {
        flex-shrink: 0;
    }

    /* Fixes "logo moves down when the menu opens" AND "the opened menu is
       squeezed into a narrow column":

       The plugin's own CSS only gives the open dropdown "height: auto" - it
       stays in normal document flow and pushes the row (and the
       vertically-centered logo) taller. Taking it out of flow fixes that,
       but position:absolute (tried first) resolves against whichever
       ancestor the browser treats as "positioned" - and Elementor's own
       frontend.css unconditionally sets position:relative on BOTH
       .elementor-widget and .elementor-column, both of which sit between
       the dropdown and the Header, and both of which are exactly as narrow
       as the hamburger icon on this Header (intentionally, so it sits
       snugly next to the logo when closed). A position:static override on
       those two was tried and did not resolve the narrow-column symptom in
       real testing, so position:fixed is used instead: its containing
       block is always the viewport itself (only an ancestor with
       transform/perspective/filter/will-change would change that, and
       none exists here), which sidesteps the ambiguity entirely rather
       than depending on exactly which ancestor ends up "positioned".

       top: 62px is the Header's own actual height with its current
       settings (10px section padding top+bottom + the ~37px logo image at
       its 170px mobile width, 260:56 aspect ratio, +1px border) - a
       measured value matching this specific Header, not an arbitrary
       compensating offset. */
    #cvphotovault-hfe-header .hfe-active-menu + .hfe-nav-menu__layout-horizontal {
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 62px);
        overflow-y: auto;
        background: #ffffff;
        z-index: 999;
        box-shadow: 0 8px 20px rgba(23, 23, 23, 0.1);
    }
}

/* ---- Footer -------------------------------------------------------------
   4-column grid (30/20/20/30) on desktop, 2-column on tablet, single
   column on mobile - matches how Elementor's own section/column markup
   collapses responsively, no JS involved. */
#cvphotovault-hfe-footer .elementor-container {
    flex-wrap: wrap;
    row-gap: var(--spacing-xl);
}

#cvphotovault-hfe-footer [id^="cvphotovault-footer-col-"] {
    padding-right: var(--spacing-md);
}

/* Brand logo - real Elementor Image widget (see
   cvphotovault_create_uael_templates()) pointed at the same Media Library
   attachment used as the WordPress Site Logo, not a shortcode/site-title
   fallback. */
#cvphotovault-hfe-footer .cvphotovault-footer-brand img {
    max-width: 160px;
    height: auto;
    display: block;
}

#cvphotovault-hfe-footer .cvphotovault-footer-brand {
    margin-bottom: var(--spacing-sm);
}

#cvphotovault-hfe-footer .cvphotovault-footer-desc {
    color: #a8a8a8;
    font-size: var(--font-size-small);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    max-width: 320px;
}

#cvphotovault-hfe-footer .cvphotovault-footer-social .elementor-icon {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    transition: var(--transition-default);
}

#cvphotovault-hfe-footer .cvphotovault-footer-social .elementor-icon:hover {
    color: var(--color-dark);
    background-color: var(--color-accent-gold);
}

#cvphotovault-hfe-footer .cvphotovault-footer-heading {
    position: relative;
    display: inline-block;
    font-family: var(--font-family-label);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
}

#cvphotovault-hfe-footer .cvphotovault-footer-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--color-accent-gold);
}

/* Quick Links - real Navigation Menu widget (layout: vertical, dropdown:
   none - see cvphotovault_create_uael_templates()), styled almost entirely
   through its own native settings (menu_typography_*, color_menu_item*,
   menu_space_between). Only margin/list-reset needs a little help here. */
#cvphotovault-hfe-footer .cvphotovault-footer-col-links .hfe-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Services - Icon List widget with real per-item links (see
   cvphotovault_create_uael_templates()). Icons are hidden to keep the
   plain-text-list look the approved design already has; the links
   underneath are still genuinely clickable <a> elements either way. */
#cvphotovault-hfe-footer .cvphotovault-footer-services-links .elementor-icon-list-icon,
#cvphotovault-hfe-footer .cvphotovault-footer-legal .elementor-icon-list-icon {
    display: none;
}

#cvphotovault-hfe-footer .cvphotovault-footer-links-list .elementor-icon-list-items {
    gap: var(--spacing-sm);
}

#cvphotovault-hfe-footer .cvphotovault-footer-links-list a {
    color: #a8a8a8;
    font-size: var(--font-size-small);
    text-decoration: none;
    transition: var(--transition-default);
}

#cvphotovault-hfe-footer .cvphotovault-footer-links-list a:hover {
    color: var(--color-accent-gold);
}

#cvphotovault-hfe-footer .cvphotovault-footer-contact-list .elementor-icon-list-items {
    gap: var(--spacing-sm);
}

#cvphotovault-hfe-footer .cvphotovault-footer-contact-list .elementor-icon-list-item {
    color: #a8a8a8;
    font-size: var(--font-size-small);
    align-items: flex-start;
}

#cvphotovault-hfe-footer .cvphotovault-footer-contact-list .elementor-icon-list-icon {
    margin-top: 2px;
}

#cvphotovault-hfe-footer .cvphotovault-footer-contact-list a {
    color: inherit;
    transition: var(--transition-default);
}

/* Text color on hover; the icon's own hover color (gold) is set directly
   on the widget via icon_color_hover in cvphotovault_create_uael_templates()
   - that control already targets both the <i> and <svg> markup Elementor
   might render, and fires on hovering the whole list item (so it also
   covers the address item, which has no link/<a> to hang :hover off). */
#cvphotovault-hfe-footer .cvphotovault-footer-contact-list a:hover {
    color: var(--color-accent-gold);
}

#cvphotovault-hfe-footer .cvphotovault-footer-hours {
    color: #a8a8a8;
    font-size: var(--font-size-small);
    line-height: 1.7;
    margin-top: var(--spacing-md);
}

/* ---- Footer bottom bar alignment -----------------------------------------
   The Shortcode widget has no 'align' control of its own, and Column
   elements have no _css_classes control at all (see the comment in
   cvphotovault_create_uael_templates()) - these two columns are targeted by
   the _element_id set directly on them instead. */
#cvphotovault-hfe-footer-bottom #cvphotovault-footer-bottom-left {
    text-align: left;
}

#cvphotovault-hfe-footer-bottom #cvphotovault-footer-bottom-right {
    text-align: right;
}

#cvphotovault-hfe-footer-bottom #cvphotovault-footer-bottom-right .elementor-widget-wrap {
    justify-content: flex-end;
}

/* ---- Footer bottom bar --------------------------------------------------- */
#cvphotovault-hfe-footer-bottom .cvphotovault-hfe-footer-copyright {
    color: #ffffff;
    opacity: 0.7;
    font-size: var(--font-size-small);
}

#cvphotovault-hfe-footer-bottom .cvphotovault-footer-legal a {
    color: #ffffff;
    opacity: 0.7;
    font-size: var(--font-size-small);
    text-decoration: none;
    transition: var(--transition-default);
}

#cvphotovault-hfe-footer-bottom .cvphotovault-footer-legal a:hover {
    opacity: 1;
    color: var(--color-accent-gold);
}

/* The "|" separator between Privacy Policy and Disclaimer is now the Icon
   List widget's own native divider feature (divider/divider_color settings
   in cvphotovault_create_uael_templates()), not a hand-rolled span. */
#cvphotovault-hfe-footer-bottom .cvphotovault-footer-legal .elementor-icon-list-items {
    justify-content: flex-end;
}

@media (max-width: 1024px) {
    #cvphotovault-hfe-footer [id^="cvphotovault-footer-col-"] {
        width: 50% !important;
        margin-bottom: var(--spacing-lg);
    }
}

@media (max-width: 600px) {
    #cvphotovault-hfe-footer [id^="cvphotovault-footer-col-"] {
        width: 100% !important;
        padding-right: 0;
    }

    #cvphotovault-hfe-footer-bottom .elementor-column {
        width: 100%;
        text-align: center;
    }

    #cvphotovault-hfe-footer-bottom .cvphotovault-hfe-footer-copyright,
    #cvphotovault-hfe-footer-bottom .cvphotovault-footer-legal {
        text-align: center !important;
        justify-content: center;
    }
}

/* ==========================================================================
   Comments (comments.php)
   ========================================================================== */
.cvphotovault-comments {
    max-width: 1040px; /* matches .post-article-width and .post-navigation */
    margin: var(--spacing-xxl) auto 0;
    padding: var(--spacing-xl) var(--spacing-md) 0;
    border-top: 1px solid var(--color-border);
}

.comments-title,
.comment-reply-title {
    font-family: var(--font-family-heading);
    font-size: 28px;
    margin-bottom: var(--spacing-lg);
}

.comment-list {
    list-style: none;
    margin: 0 0 var(--spacing-xl);
}

.comment-list .children {
    list-style: none;
    margin-left: var(--spacing-xl);
}

.comment-list article {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--color-border);
}

.comment-list .comment-respond {
    padding: var(--spacing-md) 0 0;
}

.comment-list img.avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.comment-author .fn {
    font-weight: 600;
    font-style: normal;
    color: var(--color-dark);
}

.comment-metadata {
    font-size: var(--font-size-small);
    color: var(--color-gray);
    margin-bottom: var(--spacing-xs);
}

.comment-metadata a {
    color: inherit;
}

.comment-content p {
    margin-bottom: var(--spacing-xs);
    color: var(--color-gray);
}

.comment-notes {
    color: var(--color-gray);
    font-size: var(--font-size-small);
    margin-bottom: var(--spacing-md);
}

.cvphotovault-comment-form p {
    margin-bottom: var(--spacing-md);
}

.cvphotovault-comment-form label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-family: var(--font-family-label);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-dark);
}

.cvphotovault-comment-form input[type="text"],
.cvphotovault-comment-form input[type="email"],
.cvphotovault-comment-form input[type="url"],
.cvphotovault-comment-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    transition: var(--transition-default);
}

.cvphotovault-comment-form textarea {
    resize: vertical;
}

.cvphotovault-comment-form input:focus,
.cvphotovault-comment-form textarea:focus {
    outline: none;
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.cvphotovault-comment-submit {
    display: inline-block;
    padding: 15px 36px;
    background-color: var(--color-accent-gold);
    color: #171717;
    border: none;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-label);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-default);
}

.cvphotovault-comment-submit:hover {
    opacity: 0.85;
}

@media (max-width: 600px) {
    .comment-list article {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .comment-list .children {
        margin-left: var(--spacing-md);
    }
}

/* Page (page.php) */
.page-title-section {
    padding: var(--spacing-xl) 0;
}

.page-title {
    font-size: var(--font-size-h1);
}

.page-content-section {
    padding-bottom: var(--spacing-xxl);
}

/* Archive (archive.php) */
.archive-header {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-light-gray);
    margin-bottom: var(--spacing-xl);
}

.archive-title {
    font-size: var(--font-size-h2);
}

/* Search (search.php) */
.search-header {
    padding: var(--spacing-xl) 0;
}

.search-title {
    font-size: var(--font-size-h2);
}

.search-term {
    color: var(--color-accent-gold);
}

/* No results (template-parts/content-none.php) */
.no-results {
    padding: var(--spacing-xxl) 0;
    text-align: center;
}

.no-results-description {
    margin-bottom: var(--spacing-lg);
}

/* 404 (404.php) */
.error-404-section {
    padding: var(--spacing-xxl) 0;
    text-align: center;
}

.error-404-title {
    font-size: 96px;
    color: var(--color-accent-gold);
}

.error-404-message {
    font-size: var(--font-size-h3);
    margin-bottom: var(--spacing-md);
}

.error-404-description {
    color: var(--color-gray);
    margin-bottom: var(--spacing-lg);
}

.error-404-button {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-dark);
    color: #ffffff;
    border-radius: var(--border-radius-md);
    transition: var(--transition-default);
}

.error-404-button:hover {
    background-color: var(--color-accent-gold);
    color: #000000;
}

/* Pagination (template-parts/pagination.php - core the_posts_pagination output) */
.pagination,
.navigation.pagination {
    margin: var(--spacing-xl) 0;
    text-align: center;
}

.pagination .nav-links {
    display: inline-flex;
    gap: var(--spacing-sm);
}

.pagination .page-numbers {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
}

.pagination .page-numbers.current {
    background-color: var(--color-dark);
    color: #ffffff;
    border-color: var(--color-dark);
}

/* Posts and Pages */
.entry-header {
    margin-bottom: var(--spacing-xl);
}

.entry-title {
    margin: 0 0 var(--spacing-md) 0;
}

.entry-meta {
    font-size: var(--font-size-small);
    color: var(--color-gray);
}

.entry-content {
    line-height: 1.8;
}

.entry-content p {
    margin-bottom: var(--spacing-lg);
}

.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--spacing-xl) 0;
}

/* Footer - more generous vertical breathing room than a typical thin
   bottom bar, matching the rest of the theme's spacing scale. */
.site-footer {
    background-color: var(--color-dark);
    color: #ffffff;
    padding: var(--spacing-xxl) 0;
    margin-top: var(--spacing-xxl);
}

.site-footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    align-items: center;
}

.site-footer-content {
    text-align: left;
}

.footer-copyright {
    margin: 0;
    font-family: var(--font-family-label);
    font-size: 13px;
    letter-spacing: var(--tracking-wide);
    color: #A8A29A;
}

.footer-navigation ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-lg);
    justify-content: flex-end;
}

.footer-navigation a {
    color: #ffffff;
    font-family: var(--font-family-label);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.footer-navigation a:hover {
    color: var(--color-accent-gold);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    transition: var(--transition-default);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* Widgets */
.widget {
    margin-bottom: var(--spacing-xl);
}

.widget-title {
    font-size: var(--font-size-h4);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-border);
}

.widget ul {
    list-style: none;
}

.widget ul li {
    margin-bottom: var(--spacing-sm);
}

.widget ul a {
    color: var(--color-dark);
}

.widget ul a:hover {
    color: var(--color-accent-gold);
}

/* Utility Classes */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.aligncenter {
    text-align: center;
}

.alignleft {
    float: left;
    margin-right: var(--spacing-md);
}

.alignright {
    float: right;
    margin-left: var(--spacing-md);
}

/* Image Alignment */
img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignleft {
    margin-bottom: var(--spacing-md);
}

img.alignright {
    margin-bottom: var(--spacing-md);
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   Editorial Design System
   Shared primitives used across the redesigned hero and section content in
   inc/demo-import/demo-content-pro.php, hooked via Elementor's own
   "_css_classes" / "_element_id" advanced controls rather than inventing
   parallel non-Elementor markup.
   ========================================================================== */

/* Kicker/eyebrow label - small caps, wide tracking, a short rule instead of
   the plain colored text label used elsewhere in the theme. Uses Montserrat
   (already loaded via Google Fonts, defined as --font-family-label, but not
   previously applied anywhere). */
.editorial-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
}

.editorial-kicker .elementor-heading-title {
    font-family: var(--font-family-label) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    white-space: nowrap;
}

.editorial-kicker::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
    flex-shrink: 0;
}

.editorial-kicker.editorial-kicker--start::before {
    order: 2;
}

/* Scroll reveal - fade + rise, triggered by the .reveal/.is-visible
   IntersectionObserver pair in assets/js/main.js (CVPhotoVault.scrollAnimation).
   Respects reduced-motion preferences. */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Elementor's editor wraps each widget's DOM node for edit-mode (adding its
   own elementor-element-edit-mode/ui-resizable classes etc.) AFTER our JS's
   one-time reveal fix runs, which silently discards any class our script
   added to the original node - confirmed via direct inspection of the real
   editor iframe: the iframe-detection JS fix in main.js ran correctly, but
   Elementor's later DOM rebuild still left .reveal content at opacity:0.
   A CSS rule keyed off Elementor's own editor body classes isn't affected by
   that timing at all, since it matches continuously regardless of when a
   .reveal element appears or gets replaced.
   Two separate classes need covering, confirmed by direct inspection of the
   real editor: the body carries `elementor-editor-active` while the side
   panel is open, but collapsing the panel (the small "<" toggle) switches
   Elementor into `elementor-editor-preview` instead - swapping the class
   entirely rather than adding to it - which silently dropped out of the
   original single-class rule and let content go invisible again. */
body.elementor-editor-active .reveal,
body.elementor-editor-preview .reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* Refined button micro-interaction: a quiet letter-spacing/underline shift
   rather than the generic "card lift" treatment, layered on top of the
   existing .elementor-button rules in assets/css/elementor.css. */
.elementor-button {
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    transition: letter-spacing 0.35s ease, background-color 0.35s ease,
                color 0.35s ease, transform 0.35s ease !important;
}

.elementor-button:hover {
    letter-spacing: 1.5px;
}

/* Editorial hero split layout (see SECTION 1: HERO in demo-content-pro.php).
   The text column sits on a solid ink background rather than text-over-photo
   with a dark overlay - the image is a real column, not a background-image
   section setting, so it participates in ordinary responsive stacking. */
#hero-editorial {
    overflow: hidden;
}

#hero-editorial .elementor-column.elementor-col-40 {
    padding: 0 !important;
    align-self: stretch;
}

#hero-editorial .elementor-column.elementor-col-40 .elementor-widget-image,
#hero-editorial .elementor-column.elementor-col-40 .elementor-widget-image .elementor-widget-container,
#hero-editorial .elementor-column.elementor-col-40 .elementor-widget-image img {
    height: 100%;
}

#hero-editorial .elementor-column.elementor-col-40 img {
    object-fit: cover;
}

#hero-title {
    font-size: clamp(40px, 4.6vw, 84px) !important;
}

#hero-description {
    max-width: 42ch;
}

@media (max-width: 1024px) {
    #hero-editorial {
        min-height: auto !important;
    }

    #hero-editorial .elementor-column.elementor-col-40 {
        min-height: 45vh;
    }
}

@media (max-width: 767px) {
    #hero-eyebrow,
    #hero-title,
    #hero-description {
        text-align: left !important;
    }

    #hero-actions {
        justify-content: flex-start !important;
        flex-direction: column;
        align-items: stretch !important;
    }

    #hero-actions .elementor-button {
        width: 100%;
        text-align: center;
    }
}

/* About the Studio (SECTION 2: INTRODUCTION) - constrains the description's
   line length instead of letting it stretch the full 1200px container,
   which read as thin/unfinished at that width. Scoped to this section only. */
.cvphotovault-about .elementor-column > .elementor-widget-wrap {
    max-width: 950px;
}

/* Services (SECTION 3) two-column editorial layout: left eyebrow+heading,
   right numbered list (see cvphotovault_build_service_rows() in
   demo-content-pro.php). Solid gold numeral tightly paired with the title,
   content flowing left-aligned, divided by a hairline rule, hover arrow.
   Replaces an earlier "ghost numeral" -webkit-text-stroke treatment that
   rendered unreliably (showed as blue-gray, not gold, in testing) - a
   plain solid gold fill (set directly on the widget) is guaranteed
   consistent instead. */
.service-row {
    position: relative;
    border-bottom: 1px solid var(--color-border);
    padding-right: 36px;
    transition: border-color 0.3s ease;
}

.service-row:last-of-type {
    border-bottom: none;
}

.service-row .elementor-column:first-child {
    display: flex;
    align-items: flex-start;
}

.service-desc .elementor-text-editor {
    max-width: 500px;
}

/* Hover arrow - pure CSS, no extra Elementor widget/column needed */
.service-row::after {
    content: "\2192";
    position: absolute;
    top: 32px;
    right: 0;
    font-size: 20px;
    color: var(--color-accent-gold);
    transition: transform 0.3s ease;
}

.service-row:hover::after {
    transform: translateX(6px);
}

.service-row:hover {
    border-color: var(--color-accent-gold);
}

.service-row:hover .service-title .elementor-heading-title {
    color: var(--color-accent-gold);
    transition: color 0.3s ease;
}

@media (max-width: 1024px) {
    .cvphotovault-services .service-row {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
}

@media (max-width: 767px) {
    .service-row {
        padding-right: 28px;
    }

    .service-row::after {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .cvphotovault-about .elementor-column > .elementor-widget-wrap {
        max-width: 100%;
    }

    .cvphotovault-services .services-main-heading .elementor-heading-title {
        font-size: 34px;
    }
}