/*
 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
*/

/* ==========================================================================
   Custom Fonts
   ========================================================================== */

@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;
}

/* ==========================================================================
   Apply Meta Serif Pro to Secondary Font
   ========================================================================== */

:root {
    --uk-secondary-font-family: 'Meta Serif Pro', Georgia, serif;
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
h1, h2, h3, h4, h5, 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 {
    font-family: 'Meta Serif Pro', Georgia, serif;
}

.uk-font-secondary {
    font-family: 'Meta Serif Pro', Georgia, serif !important;
}

a {
    transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}


.uk-slider-items > * :hover {
    opacity: 1 !important;
}

.uk-slider-items .uk-transition-opaque:hover {
    opacity: 1 !important;
}

.hero__scroll {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.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%; }
}

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

.uk-section.Earthy {
    background-color: #7f8674 !important;
}
.uk-section.yellowearthy {
    background-color: #d6b779 !important;
}

/* ========================================
   DEFINE HEADING ANIMATION - FAST + DRAMATIC
   Add this CSS to YOOtheme > Custom CSS
   ======================================== */

/* Animation container */
.define-heading-animate {
    overflow: hidden;
}

/* Initial hidden state with full blur */
.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 cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Visible state - crystal clear */
.define-heading-animate.is-visible h1 {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* First heading */
.define-heading-animate h1:first-child {
    transition-delay: 0s;
}

/* Second heading - tight stagger */
.define-heading-animate h1:nth-child(2) {
    transition-delay: 0.1s;
}

/* ========================================
   Sliding fill button animation
   ======================================== */

.uk-button {
    margin: 0;
    border: none;
    overflow: visible;
    font: inherit;
    color: inherit;
    text-transform: none;
    -webkit-appearance: none;
    border-radius: 0;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 30px;
    vertical-align: middle;
    font-size: 12px;
    line-height: 48px;
    text-align: center;
    text-decoration: none;
    transition: .2s ease-in-out;
    transition-property: color,background-color,background-position,background-size,border-color,box-shadow;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: normal;
    border-radius: 500px;
    background-origin: border-box;
}

.uk-button:not(.uk-button-text):not(.uk-button-link) {
    background-position: 50% 100%;
    background-size: 0;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.165,0.85,0.45,1);
}

.uk-button:not(:disabled) {
    cursor: pointer;
}

.uk-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.uk-button:hover {
    text-decoration: none;
}

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

.uk-button.uk-active:not(.uk-button-text):not(.uk-button-link),.uk-button:active:not(.uk-button-text):not(.uk-button-link) {
    transition-duration: 0s;
}

.uk-button-default {
    background-color: #fff !important;
    color: #445553 !important;
    background-image: radial-gradient(circle at 50% 100%,#445553 1%,transparent 1%) !important;
}

.uk-button-default:hover {
    background-color: #445553 !important;
    color: #fff !important;
    background-color: #445553 !important;
}

.uk-button-default.uk-active,.uk-button-default:active {
    background-color: #dfe6ed !important;
    color: #fff !important;
    background-image: none;
}

.uk-button-primary {
    background-color: #445553 !important;
    color: #fff;
    background-image: radial-gradient(circle at 50% 100%, #e7b946 1%, transparent 1%);
}

.uk-button-primary:hover {
    background-color: #e7b946;
    color: #fff;
    background-color: #e7b946;
}

.uk-button-primary.uk-active,.uk-button-primary:active {
    background-color: #445553 !important;
    color: #e7b946 !important;
	background-image: none;
}

.uk-button-secondary {
    background-color: #fff;
    color: #e7b946;
    background-image: radial-gradient(circle at 50% 100%,#e7b946 1%,transparent 1%)
}

.uk-button-secondary:hover {
    background-color: #e7b946;
    color: #fff;
    background-color: #e7b946;
}

.uk-button-secondary.uk-active,.uk-button-secondary:active {
    background-color: #f6a645;
    color: #fff;
    background-image: none;
}

.uk-button-danger {
    background-color: #f7af58;
    color: #fff;
    background-image: radial-gradient(circle at 50% 100%,#f6a645 1%,transparent 1%);
}

.uk-button-danger:hover {
    background-color: #f6a645;
    color: #fff;
    background-color: #f7af58;
}

.uk-button-danger.uk-active,.uk-button-danger:active {
    background-color: #f59c31;
    color: #fff;
    background-image: none;
}

.uk-button-danger:disabled,.uk-button-default:disabled,.uk-button-primary:disabled,.uk-button-secondary:disabled {
    background-color: #f6f8fa;
    color: #9a9eb5;
    background-image: none;
    box-shadow: none;
}

/* ========================================
   Nav link hover colour / H1 Subtitle colour
   ======================================== */

.uk-nav-secondary > li › a hover {
	color: #E0EBE4 !important;
}

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

/* ===========================================
   CUSTOM
   =========================================== */

.el-item:hover .el-image {
  border-radius: 15% !important;
}
.uk-h3.uk-text-emphasis {
    font-family: 'Meta Serif Pro Book Italic', Georgia, serif !important;
    font-style: italic;
}

.el-item {
    border-radius: 14px;
    transition: border-radius 0.4s ease;
}

.el-item:hover {
    border-radius: 15%;
}

.el-item .el-image {
    border-radius: 14px;
    transition: border-radius 0.4s ease;
}

.el-item:hover .el-image {
    border-radius: 15%;
}

.el-item:hover::after {
    border-radius: 15%;
}

.el-item .uk-position-bottom-left {
    position: relative;
    z-index: 2;
}
.uk-heading-small.uk-margin-large.uk-margin-remove-bottom.uk-text-left.uk-scrollspy-inview {
    padding-top: 40px;
}

.el-meta.uk-text-meta.uk-text-success.uk-margin-small-top {
    font-family: 'Meta Serif Pro Book Italic', Georgia, serif !important;
    text-transform: none;
    font-style: italic;
}
h2.el-title.uk-h4.uk-text-primary.uk-margin-top.uk-margin-remove-bottom {
    font-family: 'Meta Serif Pro', Georgia, serif;
}
h2.el-title.uk-h4.uk-text-primary.uk-margin-remove-top.uk-margin-remove-bottom {
    font-family: 'Meta Serif Pro';
}
/* ===========================================
   CUSTOM
   =========================================== */
.uk-subnav-pill>*>:first-child {
    padding: 7px 14px;
    background: 0 0;
    color: #445553;
    border-radius: 14px;
}