/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
*/
:root {
    /* Colors */
    --color-white:  #FFFFFF;
    --color-black:  #000000;
    --color-navy:   #003049;
    --color-copper: #87341D;
    --color-orange: #DE682D;
    --color-yellow: #F4C142;
    --color-beige:  #F4F0EA;

    --gf-local-border-color: var(--color-copper) !important;

    /* Font families */
    --font-heading: "Montserrat", sans-serif;
    --font-subhead: "Playfair Display", serif;
    --font-body:    "Source Sans Pro", sans-serif;

    /* Font weights */
    --fw-extrabold: 800;
    --fw-bold:      700;
    --fw-regular:   400;
    --fw-light:     300;

    /* Font sizes (exact from XD) */
    --fs-h1: 56px;  --fs-h2: 48px;  --fs-h3: 40px;
    --fs-h4: 32px;  --fs-h5: 24px;  --fs-h6: 20px;
    --fs-subhead-lg: 48px; --fs-subhead-md: 32px; --fs-subhead-sm: 28px;
    --fs-overline-lg: 20px; --fs-overline-sm: 16px;
    --fs-body-lg: 20px; --fs-body-md: 18px; --fs-body-sm: 16px;

    /* Spacing + layout (defaults - verify vs XD) */
    --space-3xs: 4px;  --space-2xs: 8px;  --space-xs: 12px; --space-sm: 16px;
    --space-md: 24px;  --space-lg: 32px;  --space-xl: 48px; --space-2xl: 64px;
    --space-3xl: 96px; --space-4xl: 128px;
    --container-max: 1280px;
    --gutter: 24px;
}

/*
    Edge cases only.
    Everything visual should live in Elementor Atomic (Variables, Global Classes, Components).
    Add rules here ONLY for what Atomic + Interactions cannot express, e.g.:
      - complex @keyframes animations beyond built-in Interactions
      - niche ::before/::after pseudo-element tricks
      - print styles
      - third-party plugin overrides
    Target Global Class names (e.g. .t-h1, .section) so overrides stay consistent.
*/

/*
    Secondary button (.btn-secondary)
    Apply to an Elementor button/link that contains ONLY the label text (no Elementor icon).
    The orange circle + white arrow is drawn with ::before, so no extra markup is needed.
    Hover: the circle moves to the right of the label and the label turns copper.
*/
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-sm);
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-navy);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color 0.25s ease;
}

.btn-secondary::before {
    content: "";
    order: 0;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M23.263,0,22.142,1.178l2.84,2.988H12V5.834H24.982L22.141,8.822,23.262,10,28,5Z' transform='translate(-12 0)' fill='%23fff'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-orange) 0%, var(--color-yellow) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 16px 10px, cover;
}

/* Hover / keyboard focus: circle slides to the right of the label, label recolors */
.btn-secondary:hover,
.btn-secondary:focus-visible {
    color: var(--color-copper);
}

.btn-secondary:hover::before,
.btn-secondary:focus-visible::before {
    order: 1;
}

/*
    High-impact button (.btn-high-impact)
    Filled pill with an orange arrow badge on the left; white uppercase label.
    Hover: background changes copper -> navy and the badge moves to the right.
    Apply to an Elementor button/link that contains ONLY the label text (no Elementor icon).
*/
.elementor .e-button-base.btn-high-impact {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-2xs) var(--space-2xs);
    border-radius: 999px;
    background-color: var(--color-copper);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-sm);
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background-color 0.25s ease;
    width: 100%;
    justify-content: flex-start;
    box-sizing: border-box;
}

.elementor .e-button-base.btn-high-impact::before {
    content: "";
    order: 0;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M23.263,0,22.142,1.178l2.84,2.988H12V5.834H24.982L22.141,8.822,23.262,10,28,5Z' transform='translate(-12 0)' fill='%23fff'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-orange) 0%, var(--color-yellow) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 16px 10px, cover;
}

/* Hover / keyboard focus: pill turns navy and the badge slides to the right */
.elementor .e-button-base.btn-high-impact:hover,
.elementor .e-button-base.btn-high-impact:focus-visible {
    background-color: var(--color-navy);
    padding-left: 1rem;
}

.elementor .e-button-base.btn-high-impact:hover::before,
.elementor .e-button-base.btn-high-impact:focus-visible::before {
    order: 1;
    margin-inline-start: auto;
}



/* block buttons */

.btn-block .elementor-icon-box-content {
    /*display: none; */
    white-space: nowrap;
    opacity: 0;
    transition: opacity .25s ease;
}

.btn-block:hover .elementor-icon-box-content {
    display: block;
    opacity: 1;
}

.btn-block .elementor-element.elementor-widget-icon-box {
    width: 40px;
    transition: width .25s ease;
}

.btn-block:hover .elementor-element.elementor-widget-icon-box {
    width: 180px;
}

body a.btn-block:hover {
    text-decoration: none;
}



/* box buttons */

.btn-box .elementor-icon-box-content {
    /*display: none; */
    white-space: nowrap;
    opacity: 0;
    transition: opacity .25s ease;
}

.btn-box:hover .elementor-icon-box-content {
    display: block;
    opacity: 1;
}

.btn-box .elementor-element.elementor-widget-icon-box {
    width: 40px;
    transition: width .25s ease;
}

.btn-box:hover .elementor-element.elementor-widget-icon-box {
    width: 170px;
}



/* PressBlock */

.PressBlock a:hover {
    text-decoration: none;
    color: inherit;
}

.PressBlock a:hover .pressheader .elementor-heading-title {
    text-decoration: underline;
    text-decoration-color: var(--color-yellow);
}

.PressBlock a:hover u {
    color: var(--color-orange);
}

.PressBlock a p {
    margin-block-end: 0;
}


/* press list */


.elementor-pagination .current {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    color: var(--color-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: linear-gradient(135deg, var(--color-orange) 0%, var(--color-yellow) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover;
    margin: 0 !important;
}


/* Event styles */

.tribe-events .tribe-events-calendar-list__event-date-tag-datetime {
    display: none;
}