/*
 Theme Name:    Define Child
 Theme URI:     https://marketingxp.co.uk/
 Description:   Child theme for YOOtheme Define theme
 Author:        Marketing XP
 Author URI:    https://marketingxp.co.uk/
 Template:      yootheme
 Version:       1.0.0
 License:       GNU General Public License v2 or later
 License URI:   http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:   define-child
*/

/* ==========================================================================
   1. VARIABLES & FONTS
   ========================================================================== */

:root {
    --uk-secondary-font-family: 'Meta Serif Pro', Georgia, serif;
    --brand-primary: #445553;
    --brand-accent: #e7b946;
    --brand-hover: #e8b53c; /* The Yellow/Gold color */
    --brand-earthy: #7f8674;
    --brand-yellow-earthy: #d6b779;
}

@font-face {
    font-family: 'Meta Serif Pro';
    src: local('Meta Serif Pro Book'), local('Meta-Serif-Pro-Book'),
        url('fonts/MetaSerifPro-Book.woff2') format('woff2'),
        url('fonts/MetaSerifPro-Book.woff') format('woff'),
        url('fonts/MetaSerifPro-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Meta Serif Pro';
    src: local('Meta Serif Pro Book Italic'), local('Meta-Serif-Pro-Book-Italic'),
        url('fonts/MetaSerifPro-BookItalic.woff2') format('woff2'),
        url('fonts/MetaSerifPro-BookItalic.woff') format('woff'),
        url('fonts/MetaSerifPro-BookItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY & ELEMENTS
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge, .uk-heading-2xlarge,
.uk-article-title, .uk-card-title, .uk-nav-header, .uk-navbar-nav > li > a,
.tm-font-secondary, [class*='uk-text-lead'], .uk-logo,
h2.el-title.uk-h4.uk-text-primary {
    font-family: var(--uk-secondary-font-family);
}

.uk-font-secondary {
    font-family: var(--uk-secondary-font-family) !important;
}

/* Italicized Elements */
.uk-h3.uk-text-emphasis,
.el-meta.uk-text-meta.uk-text-success {
    font-family: 'Meta Serif Pro Book Italic', Georgia, serif !important;
    font-style: italic;
    text-transform: none;
}

h1.uk-h3.uk-text-secondary {
    color: #E9B74B !important;
}

a {
    transition: color 0.4s cubic-bezier(0.165, 0.85, 0.45, 1), 
                opacity 0.4s ease, 
                transform 0.4s ease;
    text-decoration: none !important;
}

input.uk-search-input {
    border-radius: 8px;
}

/* ==========================================================================
   3. NAVIGATION & HOVER STATES
   ========================================================================== */

/* Universal Transitions for Links and Icons */
.uk-navbar-nav > li > a,
.uk-navbar-dropdown a,
.uk-nav-default a,
.el-link,
.uk-navbar-toggle svg,
.uk-icon-link,
ul.el-nav.uk-subnav-pill > li > a {
    transition: all 0.4s cubic-bezier(0.165, 0.85, 0.45, 1) !important;
}

/* Navbar Light/Primary Overrides */
.uk-light .uk-navbar-nav > li > a,
.uk-light .uk-navbar-item,
.uk-light .uk-icon-link,
.uk-light .uk-navbar-toggle {
    color: #ffffff;
}

/* Yellow Hover States (Navbar, Nav Lists, and Footer) */
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-parent > a:hover,
.uk-navbar-nav > li:hover > a,
.uk-navbar-dropdown a:hover,
.uk-navbar-dropdown .el-title:hover,
.uk-nav-default a:hover,
.uk-nav-default .el-link:hover,
.uk-nav-secondary > li > a:hover,
.uk-navbar-toggle:hover,
.uk-icon-link:hover,
[data-id^="footer#"] a:hover,
[data-id^="footer#"] .el-link:hover {
    color: var(--brand-hover) !important;
}

/* SVG Icon Hovers */
.uk-navbar-toggle:hover svg,
.uk-navbar-toggle:hover svg rect,
.uk-navbar-toggle:hover svg path,
.uk-icon-link:hover svg {
    fill: var(--brand-hover) !important;
}

/* Subnav Pills */
.uk-subnav-pill > * > :first-child {
    padding: 7px 14px;
    background: transparent;
    color: var(--brand-primary);
    border-radius: 14px;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

/* Global UIkit Button Base */
.uk-button {
    border-radius: 500px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 30px;
    font-size: 12px;
    line-height: 48px;
    transition: 0.5s cubic-bezier(0.165, 0.85, 0.45, 1);
    transition-property: color, background-color, background-position, background-size;
}

.uk-button:not(.uk-button-text):not(.uk-button-link) {
    background-position: 50% 100%;
    background-size: 0;
    background-origin: border-box;
}

.uk-button:hover:not(.uk-button-text):not(.uk-button-link) {
    background-size: 15000%;
    text-decoration: none;
}

/* Variant: Gradient Slide Button (Apply to: a.el-content.uk-button.uk-button-default) */
a.el-content.uk-button.uk-button-default {
    position: relative !important;
    display: inline-block !important;
    padding: 14px 28px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    background-color: transparent !important;
    background-image: linear-gradient(to right, #f4c15c 50%, transparent 50%) !important;
    background-size: 200% 100% !important;
    background-position: 100% 0 !important;
    border: 1px solid #ffffff !important;
    border-radius: 0 !important;
    transition: background-position 0.45s cubic-bezier(0.65, 0, 0.35, 1),
                color 0.45s cubic-bezier(0.65, 0, 0.35, 1),
                border-color 0.45s cubic-bezier(0.65, 0, 0.35, 1) !important;
    overflow: hidden !important;
    text-transform: none !important;
}

a.el-content.uk-button.uk-button-default:hover {
    color: var(--brand-primary) !important;
    background-position: 0 0 !important;
    border-color: #f4c15c !important;
}

/* Standard YOOtheme Button Colors */
.uk-button-primary { background-color: var(--brand-primary) !important; color: #ffffff; }
.uk-button-primary:hover { background-color: var(--brand-accent) !important; }
.uk-button-secondary { background-color: #ffffff; color: var(--brand-accent); }
.uk-button-secondary:hover { background-color: var(--brand-accent); color: #ffffff; }

/* ==========================================================================
   5. YOOtheme ELEMENT SPECIFIC (CARDS, SLIDERS, SECTIONS)
   ========================================================================== */

/* Grid Item & Image Border Radius Transitions */
.el-item, .el-item .el-image {
    border-radius: 14px;
    transition: border-radius 0.4s ease;
}

.el-item:hover, .el-item:hover .el-image, .el-item:hover::after {
    border-radius: 15% !important;
}

/* Sections & Z-Index */
.uk-section.Earthy { background-color: var(--brand-earthy) !important; }
.uk-section.yellowearthy { background-color: var(--brand-yellow-earthy) !important; }
.uk-panel.uk-padding-small.uk-margin-remove-first-child { z-index: 9; }
.el-item .uk-position-bottom-left { position: relative; z-index: 2; }

/* Sliders */
.uk-slider-items > * :hover,
.uk-slider-items .uk-transition-opaque:hover {
    opacity: 1 !important;
}

/* ==========================================================================
   6. ANIMATIONS
   ========================================================================== */

/* Hero Scroll Indicator */
.hero__scroll {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
    font-size: 0.85rem;
    text-transform: uppercase;
}
.hero__scroll-line {
    width: 60px;
    height: 1px;
    background: #66b2a9;
    position: relative;
    overflow: hidden;
}
.hero__scroll-line::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 100%;
    background: #f4c15c;
    animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
    0% { left: -20px; }
    100% { left: 100%; }
}

/* Heading Entrance Animation */
.define-heading-animate { overflow: hidden; }
.define-heading-animate h1 {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    filter: blur(20px);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), 
                filter 0.5s ease;
}
.define-heading-animate.is-visible h1 {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}
.define-heading-animate h1:nth-child(2) { transition-delay: 0.1s; }

/* ==========================================================================
   7. RESPONSIVE & MOBILE OVERRIDES
   ========================================================================== */

/* Category Select Dropdown (Mobile) */
.df-category-select {
    display: none;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 12px 32px 12px 4px;
    font-family: 'DM Sans', sans-serif;
    color: #455554;
    border: none;
    border-bottom: 1.5px solid rgba(69, 85, 84, 0.3);
    background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23455554' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 4px center;
    background-size: 12px 8px;
    appearance: none;
}

@media (max-width: 768px) {
    .df-category-filter .uk-subnav { display: none !important; }
    .df-category-filter .df-category-select { display: block !important; }
    a.el-content.uk-button.uk-button-default { padding: 12px 24px !important; font-size: 14px !important; }
}

@media (max-width: 959px) {
    .uk-navbar-toggle-icon svg { width: 26px; height: 26px; }
}