/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */



:root {
/* --- 1. BRAND COLORS --- */
    --color-primary: #ffffff;
    --color-secondary: #000000;
    --color-accent: #1e2d27;
	--color-light: #ffffff;
	--color-dark: #000000;
    --color-glass-bg: rgba(30, 30, 30, 0.2);
	--color-glass-bg-light: rgba(155, 155, 155, 0.05); 
    --color-glass-border: rgba(255, 255, 255, 0.05);
    --color-overlay: rgba(0, 0, 0, 0.8);
	--color-btn-border: #1e2d27;
	--btn-corner-color-light: var(--color-primary);
	--btn-corner-color-dark: var(--color-secondary);
	--color-overlay-dark: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);

/* --- 2. TYPOGRAPHY --- */
    --font-h1: 'Cormorant Garamond', serif;
	--font-logo: 'Cormorant Garamond', serif;
	--font-tagline: 'Lato', sans-serif;
    --font-body: 'Lato', sans-serif;
	--font-btn: 'Lato', sans-serif;
	--font-nav: 'Lato', sans-serif;
	--font-accent: 'WindSong', cursive;
    
    /* Font Sizes */
    --fs-logo: 2.2rem;
	--fs-logo-mobile: 1.8rem;
    --fs-h1: 3rem;
    --fs-h1-mobile: 2.5rem;
    --fs-nav: 1.2rem;
	--fs-nav-mobile: 1.6rem;
    --fs-body: 1.8rem;
	--fs-body-mobile: 1.5rem;
    --fs-btn: 1.1rem;
	--fs-btn-mobile: 0.9rem;
	--fs-progress-bar: 1.3rem;
	--fs-tagline: 0.8rem;
	--fs-tagline-mobile: 0.65rem;
	--fs-accent: 4rem;

    /* Spacing */
    --letter-spacing-lg: 4px;
    --letter-spacing-md: 2px;
	--letter-spacing-sm: 1px;
	--letter-spacing-btn: 1.5px;
	--letter-spacing-logo: 2px;
	--letter-spacing-logo-mobile: 3px;
	--letter-spacing-h1: 4px;
	--letter-spacing-h1-mobile: 3px;
	--letter-spacing-tagline: 4px;
	--letter-spacing-tagline-mobile: 3px;
	--letter-spacing-accent: 1px;
	--letter-spacing-accent-mobile: 1px;
	
	/* Weight */
	--fw-logo: 800;
	--fw-h1: 600;
	--fw-h1-mobile: 600;
	--fw-body: 400;
	--fw-body-mobile: 400;
	--fw-btn: 600;
	--fw-accent: 400;
	
	/* Line Height */
	--fh-logo: 1;
	--fh-logo-mobile: 1.2;
	--fh-h1: 1;
	--fh-h1-mobile: 1.2;
	--fh-body: 1.6;
	--fh-body-mobile: 1.6;
	--fh-accent: 2px;
	--fh-accent-mobile: 1px;
	--fh-tagline: 2;
	--fh-tagline-mobile: 2;
	
	/* Decoration */
	--fd-logo: none;
	--fd-nav: none;
	--fd-h1: none;
	--fd-body: none;
	--fd-btn: none;
	--fd-accent: none;
	
	/* Text Transform */
	--ft-logo: uppercase;
	--ft-nav: uppercase;
	--ft-h1: uppercase;
	--ft-body: none;
	--ft-btn: uppercase;
	--ft-tagline: uppercase;
	--ft-accent: uppercase;

/* --- 3. SPECIAL EFFECTS --- */
    --glass-blur: blur(15px);
    --glass-blur-heavy: blur(20px);
    --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    --text-shadow-soft: 0 1px 5px rgba(0,0,0,0.2);
	--text-shadow-heavy: 0 2px 10px rgba(0,0,0,0.2);
	--tagline-opacity: 0.8;
	
	/* Transitions */
	--transition-btn: background 0.3s ease, color 0.3s ease;
	--transition-btn-corner: width 0.25s ease, height 0.25s ease, opacity 0.15s ease;
	--transition-btn-corner-hover: width 0.3s ease, height 0.3s ease, opacity 0s linear;
	--transition-mobile-menu-toggle: all 0.3s ease-in-out;
	--transition-mobile-menu-drawer: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0);
	
	
	/* Buttons */
	--btn-padding: 20px 40px;
	--btn-padding-mobile: 14px 30px;
	--btn-margin-top: 15px;
	--btn-margin-top-mobile: 20px;
	
	/* Button Corners */
	--btn-corner-style: solid;
	--btn-corner-width-hover: 10px; /* <-- Line Length */
	--btn-corner-height-hover: 10px;
	--btn-corner-transition-delay: 0.05s;
	--btn-corner-bottom-before: 8px;
	--btn-corner-left-before: 8px;
	--btn-corner-top-after: 8px;
	--btn-corner-right-after: 8px;
	--btn-corner-width-before: 0 0 1px 1px;
	--btn-corner-width-after: 1px 1px 0 0;
	
	/* Hero Slider */
	--slider-img-fit: cover;
	--hero-block-width: 95%;
	--hero-block-width-mobile: 80%;
	--hero-block-text-max-width: 500px;
	--hero-block-text-max-width-mobile: 100%;
	--hero-block-text-background: transparent;
	--hero-block-padding-mobile: 60px 20px;
	--hero-body-max-width: 800px;
	--hero-body-max-width-mobile: 800px;
	--hero-block-placement: translate(-50%, -50%);
	--hero-block-placement-mobile: translate(-50%, -50%);
	--hero-block-text-placement: translate(-50%, -10%);
	--mobile-hero-block-text-placement: translate(-50%, -10%);
	
	
	/* Slick Dots */
	--sd-hero-bottom: 30px;
	--sd-hero-bottom-mobile: 20px;
	--sd-hero-padding: 0;
	--sd-hero-margin: 0;
	--sd-hero-gap: 15px;
	--sd-hero-gap-mobile: 10px;
	--sd-hero-transition: gap 0.4s ease;
	--sd-hero-btn
	--sd-hero-btn-opacity: 0.4;
	--sd-hero-btn-active-opacity: 1;
	--sd-hero-btn-transition: opacity 0.3s ease;
	--sd-hero-btn-border: none;
	--sd-hero-btn-background: none;
	--sd-hero-btn-padding: 0;
	--sd-hero-li-gap: 10px;
	--sd-hero-progress-bar-width: 0;
	--sd-hero-progress-bar-active-width: 40px;
	--sd-hero-progress-bar-active-width-mobile: 30px;
	--sd-hero-progress-bar-height: 2px;
	--sd-hero-progress-bar-background: rgba(255,255,255,0.2);
	--sd-hero-progress-bar-overflow: hidden;
	--sd-hero-progress-bar-transition: width 0.4s ease;
	
/* --- 4. LAYOUT & SIZING --- */
    --header-height: 80px;
    --nav-max-width: 1400px;
    --banner-max-width: 1200px;
    --transition-speed: 0.3s;
	--drawer-content-gap: 20px;
	--nav-gap: 30px;
	--nav-side-gap: 30px;
	
	
	
	/* Padding & Margins */
	--nav-padding: 20px 40px;
	--nav-padding-mobile: 15px 20px;
	--nav-margin: 0 auto;
	--nav-item-padding: 10px 25px;
	--mobile-menu-item-padding: 10px 15px;
	
	--logo-padding-left: 100px;
	--logo-padding-right: 100px;
	--hero-padding: 150px 100px;
	--hero-content-padding: 25px;
	--hero-content-padding-mobile: 20px;
	--hero-h1-margin-bottom: 20px;
	--hero-h1-margin-bottom-mobile: 15px;
	--hero-body-margin: 0 auto;
	--hero-body-padding-mobile: 0 10px;
	--hero-body-margin-mobile: 0 auto;
	--tagline-margin-top: 1rem;
	--hero-body-last-paragraph-margin-bottom: 1.5em;
    
/* --- 5. MOBILE MENU --- */
	--hamburger-width: 20px;
	--hamburger-height: 20px;
	--mobile-menu-toggle-width: 100%;
	--mobile-menu-toggle-height: 2px;
	--mobile-drawer-width: 50%;
	--mobile-x-rotate-top: translateY(9.5px) rotate(45deg);
	--mobile-x-rotate-bottom: translateY(-9.5px) rotate(-45deg);
	--drawer-content-width:
	--drawer-content-height: 15px;


/* --- 6. ABOUT ME --- */
	--bio-section-padding: 40px 20px;
	--bio-container-gap: 60px;
	--bio-container-gap-mobile: 40px;
	--bio-img-gap: 20px;
	--bio-content-flex: 1.2;
	--bio-text-margin-bottom: 20px;
	--bio-btns-gap: 35px;
	--bio-btns-gap-mobile: 50px;
	--bio-text-max-width-mobile: 600px;

}