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

/*
    Add your custom styles here
*/

/* Hide Screen Reader Button "Skip to Content" */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}

/* ==========================================================================
   GLOBAL CSS — Elementor / WordPress Template
   Wired to Elementor Global Colours for dynamic site-wide control
   ========================================================================== */
 
 
/* --------------------------------------------------------------------------
   COLOUR REFERENCE (Elementor Global Colours)
   --------------------------------------------------------------------------
   --e-global-color-primary         Brand primary
   --e-global-color-secondary       Brand secondary
   --e-global-color-text            #1A1A1A  Body text
   --e-global-color-accent          Brand accent
   --e-global-color-3e46775         #000000  Pure black
   --e-global-color-5919f7b         #323232  Dark grey
   --e-global-color-2ce16e2         #FFFFFF  Pure white
   --e-global-color-e39ffec         #F2F2F2  Light grey (backgrounds)
   --e-global-color-6b27774         #E5E5E5  Border grey
   --e-global-color-f4cdb9a         #CCCCCC  Muted grey
   --e-global-color-d9ddfb3         #B3B3B3  Disabled / placeholder
   --e-global-color-045c56d         #00000080  Black 50% opacity
   --e-global-color-77f959d         #00000040  Black 25% opacity
   --e-global-color-b446b51         #FFFFFF80  White 50% opacity
   --e-global-color-3536ceb         #FFFFFF40  White 25% opacity
   --e-global-color-3723d97         #00000000  Transparent
   -------------------------------------------------------------------------- */
 
 
/* --------------------------------------------------------------------------
   1. SMOOTH SCROLLING & REDUCED MOTION
   -------------------------------------------------------------------------- */
 
html {
    scroll-behavior: smooth;
}
 
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
 
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
 
 
/* --------------------------------------------------------------------------
   2. TRANSITIONS (targeted properties only)
   -------------------------------------------------------------------------- */
 
*,
*::before,
*::after {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform, filter !important;
    transition-duration: 0.3s !important;
    transition-timing-function: ease !important;
}
 
 
/* --------------------------------------------------------------------------
   3. FOCUS STYLES
   --------------------------------------------------------------------------
   Uses --primary so the focus ring matches the brand automatically.
   -------------------------------------------------------------------------- */
 
:focus {
    outline: none;
}
 
:focus-visible {
    outline: 2px solid var(--e-global-color-primary);
    outline-offset: 3px;
    border-radius: 2px;
}
 
 
/* --------------------------------------------------------------------------
   4. LINK STYLES
   --------------------------------------------------------------------------
   Inherits text colour by default. Underline starts in --muted grey
   and shifts to --primary on hover for a subtle brand-aware effect.
   -------------------------------------------------------------------------- */
 
p a,
li a,
td a,
dd a,
blockquote a {
    text-decoration: underline;
    text-decoration-color: var(--e-global-color-f4cdb9a);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    color: inherit;
}
 
p a:hover,
li a:hover,
td a:hover,
dd a:hover,
blockquote a:hover {
    text-decoration-color: var(--e-global-color-primary);
    text-underline-offset: 0.35em;
    text-decoration-thickness: 2px;
}