/*
Theme Name:  Premiere Team Child
Theme URI:   https://premierevalor.com
Description: Child theme for the Valor Premiere Team site, based on Hello Elementor.
Author:      2 Heads Marketing
Author URI:  https://2headsmarketing.com
Template:    hello-elementor
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: premiere-team-child
*/


/* ============================================================
   CUSTOM FONTS — Organetto
   (Files must be uploaded to /wp-content/themes/premiere-team-child/fonts/)
   Registered via Elementor Pro > Custom Fonts as a backup,
   but declared here so they load site-wide regardless.
============================================================ */

@font-face {
    font-family: 'Organetto Extultrabold';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('fonts/organetto-extultrabold.ttf') format('truetype');
}

@font-face {
    font-family: 'Organetto Bold';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('fonts/organetto-bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Organetto Regular';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('fonts/organetto-regular.ttf') format('truetype');
}


/* ============================================================
   CSS CUSTOM PROPERTIES — Brand Tokens
   Mirrors Elementor global colors so custom CSS stays in sync.
============================================================ */

:root {
    --pt-black:      #0a0a0a;
    --pt-off-black:  #1a1a1a;
    --pt-white:      #ffffff;
    --pt-off-white:  #f8f8f6;
    --pt-gray-50:    #f4f4f2;
    --pt-gray-100:   #eeeeeb;
    --pt-gray-200:   #e0e0dc;
    --pt-gray-300:   #cccccc;
    --pt-gray-400:   #999999;
    --pt-gray-600:   #555555;
    --pt-gray-700:   #333333;
    --pt-red:        #BD202E;
    --pt-red-dark:   #9a1a24;
    --pt-font-head:  'Organetto Extultrabold', 'Montserrat', sans-serif;
    --pt-font-bold:  'Organetto Bold', 'Montserrat', sans-serif;
    --pt-font-body:  'Montserrat', sans-serif;
    --pt-pad-x:      80px;
    --pt-pad-y:      110px;
    --pt-max-width:  1400px;
}


/* ============================================================
   GLOBAL RESETS & BASE
============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--pt-font-body);
    color: var(--pt-black);
    background-color: var(--pt-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove Hello Elementor's default body padding if any */
body.hello-elementor {
    padding: 0 !important;
    margin: 0 !important;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    transition: color 0.2s ease;
}


/* ============================================================
   HEADER — Sticky + Scroll Behavior
   JS in custom.js handles the scroll class toggle.
============================================================ */

.site-header {
    display: none;
}

.elementor-location-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pt-gray-200);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.elementor-location-header.pt-scrolled {
    background-color: rgba(255, 255, 255, 0.99);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

/* Push page content down so it doesn't hide behind fixed header */
#content,
.site-main,
.elementor-location-single {
    padding-top: 78px;
}


/* ============================================================
   NAVIGATION — Global Nav Styles
============================================================ */

.elementor-nav-menu .elementor-item {
    font-family: var(--pt-font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--pt-gray-600) !important;
    transition: color 0.2s ease !important;
    padding: 0 !important;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
    color: var(--pt-black) !important;
}

/* Nav CTA button */
.nav-cta-btn .elementor-button {
    background-color: var(--pt-red) !important;
    border-color: var(--pt-red) !important;
    color: var(--pt-white) !important;
    border-radius: 0 !important;
    font-family: var(--pt-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 10px 22px !important;
    transition: background-color 0.2s ease !important;
}

.nav-cta-btn .elementor-button:hover {
    background-color: var(--pt-red-dark) !important;
    border-color: var(--pt-red-dark) !important;
}


/* ============================================================
   BUTTONS — Global Overrides
============================================================ */

/* Primary red button */
.elementor-button.pt-btn-red,
.pt-btn-red .elementor-button {
    background-color: var(--pt-red) !important;
    border-color: var(--pt-red) !important;
    color: var(--pt-white) !important;
    border-radius: 0 !important;
    border-width: 2px !important;
    font-family: var(--pt-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.elementor-button.pt-btn-red:hover,
.pt-btn-red .elementor-button:hover {
    background-color: var(--pt-red-dark) !important;
    border-color: var(--pt-red-dark) !important;
}

/* Outline dark button */
.elementor-button.pt-btn-outline,
.pt-btn-outline .elementor-button {
    background-color: transparent !important;
    border-color: var(--pt-gray-300) !important;
    color: var(--pt-black) !important;
    border-radius: 0 !important;
    border-width: 2px !important;
    font-family: var(--pt-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    transition: border-color 0.2s ease !important;
}

.elementor-button.pt-btn-outline:hover,
.pt-btn-outline .elementor-button:hover {
    border-color: var(--pt-black) !important;
}

/* Outline white button (for dark sections) */
.elementor-button.pt-btn-outline-white,
.pt-btn-outline-white .elementor-button {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 0 !important;
    border-width: 2px !important;
    font-family: var(--pt-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    transition: border-color 0.2s ease, color 0.2s ease !important;
}

.elementor-button.pt-btn-outline-white:hover,
.pt-btn-outline-white .elementor-button:hover {
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: var(--pt-white) !important;
}

/* White button (for dark CTA banner) */
.elementor-button.pt-btn-white,
.pt-btn-white .elementor-button {
    background-color: var(--pt-white) !important;
    border-color: var(--pt-white) !important;
    color: var(--pt-black) !important;
    border-radius: 0 !important;
    border-width: 2px !important;
    font-family: var(--pt-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
    transition: opacity 0.2s ease !important;
}

.elementor-button.pt-btn-white:hover,
.pt-btn-white .elementor-button:hover {
    opacity: 0.9 !important;
}


/* ============================================================
   SECTION EYEBROW LABEL
   Apply class .pt-eyebrow to a text widget container.
============================================================ */

.pt-eyebrow .elementor-widget-text-editor p,
.pt-eyebrow p {
    font-family: var(--pt-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: var(--pt-red) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
}

.pt-eyebrow .elementor-widget-text-editor p::before,
.pt-eyebrow p::before {
    content: '' !important;
    display: inline-block !important;
    width: 32px !important;
    height: 2px !important;
    background: var(--pt-red) !important;
    flex-shrink: 0 !important;
}


/* ============================================================
   TEAM CARDS
============================================================ */

.pt-team-card {
    background-color: var(--pt-off-white) !important;
    border-bottom: 3px solid transparent !important;
    transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.pt-team-card:hover {
    border-bottom-color: var(--pt-red) !important;
    transform: translateY(-2px) !important;
}

.pt-team-photo img {
    filter: grayscale(100%) !important;
    transition: filter 0.4s ease !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
}

.pt-team-card:hover .pt-team-photo img {
    filter: grayscale(20%) !important;
}

/* Photo column stretches to full card height */
.pt-team-card > .e-con:first-child {
    align-self: stretch !important;
}

.pt-team-card > .e-con:first-child .elementor-widget-image {
    height: 100% !important;
}

.pt-team-card > .e-con:first-child .elementor-widget-image a,
.pt-team-card > .e-con:first-child .elementor-widget-image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
}

.pt-team-name .elementor-heading-title {
    font-family: var(--pt-font-head) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    color: var(--pt-black) !important;
}

.pt-team-title p {
    font-family: var(--pt-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--pt-gray-400) !important;
}

.pt-team-contact p {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--pt-gray-600) !important;
    margin-bottom: 4px !important;
}

.pt-team-contact a {
    color: var(--pt-gray-600) !important;
}

.pt-team-contact a:hover {
    color: var(--pt-red) !important;
}


/* ============================================================
   CALLOUT / QUOTE BLOCK
   Apply class .pt-callout to a container.
============================================================ */

.pt-callout {
    border-left: 3px solid var(--pt-red) !important;
    background-color: var(--pt-white) !important;
    padding: 32px 36px !important;
}

.pt-callout p {
    font-size: 17px !important;
    line-height: 1.65 !important;
    color: var(--pt-gray-700) !important;
    font-style: italic !important;
    font-weight: 300 !important;
    margin: 0 !important;
}

/* Dark variant for dark section backgrounds */
.pt-callout-dark {
    border-left: 3px solid var(--pt-red) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    padding: 32px 36px !important;
}

.pt-callout-dark p {
    font-size: 17px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-style: italic !important;
    font-weight: 300 !important;
    margin: 0 !important;
}


/* ============================================================
   LOAN TAG CLOUD
   Apply class .pt-tag-cloud to the container.
============================================================ */

.pt-tag-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.pt-tag {
    font-family: var(--pt-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 8px 14px !important;
    border: 1px solid var(--pt-gray-200) !important;
    color: var(--pt-gray-600) !important;
    background-color: var(--pt-white) !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    cursor: default !important;
}

.pt-tag:hover {
    background-color: var(--pt-gray-50) !important;
}

.pt-tag.pt-tag-featured {
    background-color: var(--pt-off-black) !important;
    color: var(--pt-white) !important;
    border-color: var(--pt-off-black) !important;
}


/* ============================================================
   STAT BOXES — Numbers row (light and dark variants)
============================================================ */

.pt-stat-num .elementor-heading-title {
    font-family: var(--pt-font-bold) !important;
    font-size: 38px !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    color: var(--pt-black) !important;
}

.pt-stat-num-white .elementor-heading-title {
    font-family: var(--pt-font-bold) !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    color: var(--pt-white) !important;
}

.pt-stat-label p {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--pt-gray-400) !important;
    margin: 6px 0 0 !important;
}

/* Dark stat cell container */
.pt-stat-cell {
    background-color: var(--pt-off-black) !important;
    padding: 28px 20px !important;
    text-align: center !important;
}


/* ============================================================
   VIDEO BOXES
============================================================ */

.pt-video-wrap {
    position: relative !important;
    background-color: #0d0d0d !important;
    overflow: hidden !important;
}

.pt-video-wrap .elementor-widget-video {
    display: block !important;
}

/* Video badge label */
.pt-video-badge p {
    font-family: var(--pt-font-body) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--pt-white) !important;
    background-color: var(--pt-red) !important;
    display: inline-block !important;
    padding: 5px 10px !important;
    margin: 0 !important;
}


/* ============================================================
   WHY US ITEMS
============================================================ */

.pt-why-item {
    border-top: 1px solid var(--pt-gray-200) !important;
    padding-top: 26px !important;
    padding-bottom: 26px !important;
}

.pt-why-item:last-child {
    border-bottom: 1px solid var(--pt-gray-200) !important;
}

.pt-why-num .elementor-heading-title {
    font-family: var(--pt-font-head) !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    color: var(--pt-red) !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
}

.pt-why-label .elementor-heading-title {
    font-family: var(--pt-font-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--pt-black) !important;
    margin-bottom: 8px !important;
}


/* ============================================================
   TESTIMONIAL SECTION
============================================================ */

.pt-testimonial-quote .elementor-heading-title {
    font-family: var(--pt-font-bold) !important;
    font-size: clamp(20px, 2.2vw, 28px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    color: var(--pt-black) !important;
    line-height: 1.45 !important;
}

.pt-testimonial-cite p {
    font-family: var(--pt-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--pt-gray-400) !important;
    margin: 0 !important;
}

.pt-quote-mark .elementor-heading-title {
    font-family: Georgia, serif !important;
    font-size: 80px !important;
    color: var(--pt-red) !important;
    line-height: 0.5 !important;
    font-style: normal !important;
}


/* ============================================================
   VALUES LIST (Life Transitions section)
============================================================ */

.pt-values-item {
    border-bottom: 1px solid var(--pt-gray-200) !important;
    padding: 18px 0 !important;
    display: flex !important;
    gap: 20px !important;
    align-items: baseline !important;
}

.pt-values-label p {
    font-family: var(--pt-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--pt-red) !important;
    min-width: 90px !important;
    margin: 0 !important;
}

.pt-values-text p {
    font-size: 14px !important;
    font-weight: 300 !important;
    color: var(--pt-gray-600) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}


/* ============================================================
   LOAN LIST BOX (sidebar in transitions section)
============================================================ */

.pt-loan-list-box {
    background-color: var(--pt-white) !important;
    border: 1px solid var(--pt-gray-200) !important;
    border-left: 3px solid var(--pt-red) !important;
    padding: 36px !important;
}

.pt-loan-list-label p {
    font-family: var(--pt-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--pt-red) !important;
    margin-bottom: 16px !important;
}

.pt-loan-list-box p {
    font-size: 14px !important;
    line-height: 2.0 !important;
    color: var(--pt-gray-600) !important;
    font-weight: 300 !important;
}


/* ============================================================
   SECTION DIVIDER RULE
   Full-width horizontal rule with eyebrow label.
============================================================ */

.pt-section-rule {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 52px !important;
}

.pt-section-rule::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background-color: var(--pt-gray-200) !important;
    display: block !important;
}


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

.elementor-location-footer {
    background-color: var(--pt-off-white) !important;
    border-top: 1px solid var(--pt-gray-200) !important;
}

.pt-footer-brand p {
    font-family: var(--pt-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--pt-gray-600) !important;
    line-height: 1.9 !important;
    margin: 0 !important;
}

.pt-footer-legal p {
    font-size: 12px !important;
    line-height: 1.9 !important;
    color: var(--pt-gray-400) !important;
    margin: 0 !important;
}

.pt-footer-legal a {
    color: #777777 !important;
    text-decoration: none !important;
}

.pt-footer-legal a:hover {
    color: var(--pt-black) !important;
}


/* ============================================================
   ELEMENTOR STICKY HEADER OVERRIDE
   Prevents Elementor Pro's sticky module from conflicting.
============================================================ */

.elementor-sticky--active {
    background-color: rgba(255, 255, 255, 0.99) !important;
}


/* ============================================================
   RESPONSIVE — Tablet (max 1024px)
============================================================ */

@media (max-width: 1024px) {
    :root {
        --pt-pad-x: 48px;
        --pt-pad-y: 80px;
    }
}


/* ============================================================
   RESPONSIVE — Mobile (max 767px)
============================================================ */

@media (max-width: 767px) {
    :root {
        --pt-pad-x: 24px;
        --pt-pad-y: 60px;
    }

    #content,
    .site-main,
    .elementor-location-single {
        padding-top: 68px;
    }

    .pt-team-card {
        grid-template-columns: 1fr !important;
    }
}