/*
Theme Name: TrackerRMS Child Theme
Template: generatepress
Author: Stefan Ianache
Author URI: https://stefanianache.com/
Description: TrackerRMS child theme extends GeneratePress theme.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0
Text Domain: trms
*/


:root {
    --gradient-main-green: linear-gradient(90deg, #A4D64D 0%, #2C7D03 100%);
    --gradient-orange: linear-gradient(90deg, #FFB917 0%, #F04C24 100%);
    --gradient-grue: linear-gradient(90deg, #6AB31D 2.42%, #00478F 100%);
    --gradient-grue-vertical: linear-gradient(180deg, #6AB31D 2.42%, #00478F 100%);
    --thick-green: #2C7D03;
    --dark-green: #183F04;
}

.block-editor-iframe__body {
    background: #ffffff;
}

.trms-text-color-gradient-grue{
    color: var(--gradient-grue);
}

.trms-background-gradient-main-green{
    background: var(--gradient-main-green);
}

/* Gradient Border Button
   ========================================================================== */
.trms-btn-gradient-border {
    position: relative;
    border-radius: 8px;
}

.trms-btn-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px; /* border thickness */
    background: var(--wp--preset--gradient--main-green);
    border-radius: inherit;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.trms-btn-gradient-border:hover::before,
.trms-btn-gradient-border:focus::before {
    background: var(--wp--preset--gradient--grue);
}

/* ==========================================================================
   Floating Cards Layout
   ========================================================================== */
.trms-floating-cards {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* Adjust as needed for your container proportions */
}

.trms-floating-cards__item {
    position: absolute;
    max-width: 100%;
    height: auto;
}

/* Top-left card (David message) */
.trms-floating-cards__item--top-left {
    top: 2%;
    left: 0%;
    width: clamp(200px, 30%, 380px);
    z-index: 2;
}

/* Bottom-left card (D-3 Update tokens) */
.trms-floating-cards__item--bottom-left {
    bottom: 2%;
    left: 3%;
    width: clamp(180px, 25%, 320px);
    z-index: 1;
}

/* Right card (Feedback/Improve readability) */
.trms-floating-cards__item--right {
    top: 45%;
    right: 2%;
    width: clamp(220px, 32%, 400px);
    z-index: 3;
}


/* ==========================================================================
   Hero Section Background Elements
   ========================================================================== */

/* Hero Container - must have position relative */
.trms-hero-section {
    position: relative;
    overflow: visible;
}

/* Hero Section Container with Blurred Green Dots as Pseudo Elements
   ========================================================================== */
.trms-hero-section-container {
    position: relative;
}

/* Shared styles for blur dot pseudo elements */
.trms-hero-section-container::before,
.trms-hero-section-container::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

/* Left blur dot (::before) */
.trms-hero-section-container::before {
    width: clamp(300px, 40vw, 600px);
    height: clamp(300px, 40vw, 600px);
    background: radial-gradient(circle, rgba(164, 214, 77, 0.45) 0%, transparent 70%);
    top: 50%;
    left: max(-45%, calc(50% - 850px)); /* won't go further left than ~750px from center */
}

/* Right blur dot (::after) */
.trms-hero-section-container::after {
    width: clamp(400px, 50vw, 800px);
    height: clamp(400px, 50vw, 800px);
    background: radial-gradient(circle, rgba(106, 179, 29, 0.4) 0%, transparent 70%);
    top: -50%;
    right: max(-35%, calc(50% - 900px));
}

/* Small Decorative SVG Icons
   ========================================================================== */
.trms-hero-decoration {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

/* Orange decorations */

.trms-hero-decoration--orange-left {
    top: 0%;
    left: max(30%, calc(50% - 750px));
}

.trms-hero-decoration--orange-middle {
    top: 15%;
    left: max(55%, calc(50% - 750px));
}

.trms-hero-decoration--orange-right {
    top: 34%;
    right: max(3%, calc(50% - 750px));
}


.trms-hero-decoration--green-middle {
    top: 2%;
    right: max(30%, calc(50% - 750px));
}

/* Green decorations */
.trms-hero-decoration--green-right {
    top: -10%;
    right:max(-3%, calc(50% - 750px));
}


.trms-hero-decoration--green-left {
    top: 33%;
    left: max(45%, calc(50% - 750px));
}

/* Animation classes (ready for future use)
   ========================================================================== */
@keyframes trms-float-elements-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes trms-float-elements-medium {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}


.trms-animate-float-slow {
    animation: trms-float-elements-slow 4s ease-in-out infinite;
}

.trms-animate-float-medium {
    animation: trms-float-elements-medium 4s ease-in-out infinite;
}

/* Animation delays for varied movement */
.trms-animate-delay-1 { animation-delay: 0.5s; }
.trms-animate-delay-2 { animation-delay: 1s; }
.trms-animate-delay-3 { animation-delay: 1.25s; }
.trms-animate-delay-4 { animation-delay: 1.5s; }
.trms-animate-delay-5 { animation-delay: 1.75s; }

/* Responsive adjustments
   ========================================================================== */

   @media (max-width:1100px) {
    .trms-btn-hide-label-1100 .gb-text{
        display: none;
    }   
}

/*  Gravity forms styles
    ========================================================================== */

    .gfield_required .gfield_required_text {
        display: none;
    }

    .gform-theme--foundation .gform_fields{
        row-gap: 20px !important;
    }
    
    .gform-theme--foundation .gfield input, .gform-theme--foundation .gfield textarea {
        box-shadow: none !important;
    }