/*
 * Custom Styles for Kadence Child - Sistema Gigantes
 * Version: 1.0.0
 */

/* === GLOBAL STYLES === */
body {
    font-family: 'Open Sans', sans-serif; /* Example font, choose one that matches */
    /* Add other global styles if Kadence Customizer isn't enough */
}

/* Orange Color: #FFA500 (approx) / #F58220 (common orange) - Adjust to match video */
/* Teal/Turquoise Color: #40E0D0 (approx) / #20c997 (common teal) - Adjust to match video */
/* Dark Blue Gradient: Use Kadence Row Layout background settings */

.btn-orange {
    background-color: #F58220 !important; /* Adjust color */
    color: #ffffff !important;
    padding: 12px 25px !important;
    border-radius: 5px !important;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none !important;
    display: inline-block;
    border: none !important;
    transition: background-color 0.3s ease;
}
.btn-orange:hover {
    background-color: #e07010 !important; /* Darker orange */
}

.btn-teal {
    background-color: #20c997 !important; /* Adjust color */
    color: #ffffff !important;
    padding: 12px 25px !important;
    border-radius: 5px !important;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none !important;
    display: inline-block;
    border: none !important;
    transition: background-color 0.3s ease;
}
.btn-teal:hover {
    background-color: #1aa076 !important; /* Darker teal */
}

.section-heading { /* For headings like "Conheça o Sistema Gigantes" */
    color: #F58220; /* Orange */
    font-size: 28px; /* Adjust */
    font-weight: bold;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* === HEADER === */
/* Use Kadence Header Builder for logo, menu, "ENTRAR" button, cart. */
/* Custom CSS for language switcher if using the PHP function example */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}
.language-switcher .lang-flag img {
    width: 24px; /* Adjust size */
    height: auto;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
/* Style the "ENTRAR" button specifically if needed beyond Kadence options */
/* Example: .kadence-header .widget_block .wp-block-button__link (inspect and target Kadence classes) */
.header-button-entrar .wp-block-button__link { /* Assuming you add this class to button in Kadence Header Builder */
    background-color: #F58220 !important;
    color: white !important;
    /* Add other styles from .btn-orange if needed */
}


/* === HERO SECTION (0:00 - 0:12) === */
/* This section is best built with Kadence Row Layout block.
   Set background to dark blue gradient.
   Inside: 2 columns. Left for quote, Right for image.
   For the slider functionality, use Kadence Blocks Advanced Gallery (as carousel) or a dedicated slider plugin,
   or the custom JS solution below (hero-slider.js / hero-slider.css).
*/
.hero-section-custom { /* Add this class to your Kadence Row Layout block for the hero */
    padding-top: 80px;
    padding-bottom: 80px;
    /* Background gradient managed by Kadence Blocks settings */
    color: #ffffff;
    min-height: 70vh; /* Adjust as needed */
    display: flex;
    align-items: center;
}

.hero-quote-column { /* For the column with the quote */
    /* Styles for the quote text */
}
.hero-quote-column .quote-text {
    font-size: 24px; /* Adjust */
    font-style: italic;
    margin-bottom: 15px;
    line-height: 1.5;
}
.hero-quote-column .quote-author {
    font-size: 18px; /* Adjust */
    font-weight: bold;
}

/* Styles for hero slider navigation arrows and dots will be in hero-slider.css */

/* === INTRO SECTION (0:12 - 0:18) - "Conheça o Sistema Gigantes" === */
/* Kadence Row Layout: 2 columns. Left: Advanced Image block. Right: Advanced Text blocks. */
.intro-section .kt-inside-inner-col { /* Target inner content of columns */
    padding-top: 40px;
    padding-bottom: 40px;
}
.intro-section .section-heading {
    /* Already defined globally */
}
.intro-section p {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
}
.intro-section .device-mockup-image img { /* If you use a specific class for the mockup */
    max-width: 100%;
    height: auto;
}

/* === PLATFORM INTRO / VIDEO SECTION (0:18 - 0:21) === */
/* Kadence Row Layout.
   Left column (or section): Advanced Image (video thumbnail) + Advanced Text.
   Right column (or section): Advanced Text blocks for description, list, and two Advanced Button blocks.
*/
.platform-video-section .section-heading {
    /* ... */
}
.platform-video-section .video-thumbnail-wrapper { /* Wrapper for the video thumbnail */
    margin-bottom: 20px;
    position: relative; /* For play icon overlay if you add one */
}
.platform-video-section .video-thumbnail-wrapper img {
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.platform-video-section .feature-list {
    list-style: none;
    padding-left: 0;
}
.platform-video-section .feature-list li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
    font-size: 16px;
}
.platform-video-section .feature-list li::before {
    content: '?'; /* Replace with checkmark icon (FontAwesome via Kadence Icon Block or CSS content) */
    position: absolute;
    left: 0;
    color: #F58220; /* Orange */
    font-weight: bold;
}
.platform-video-section .wp-block-buttons { /* Container for the two buttons */
    margin-top: 30px;
}
/* .btn-teal already defined */


/* === AGENDA SECTION (0:21 - 0:24) === */
/* Kadence Row Layout.
   Use Advanced Text for headings.
   Advanced Image for the "AGENDA SEMESTRAL" image.
   Kadence Shortcode block for [MEC id="868"].
*/
.agenda-section .section-heading {
    text-align: center;
    margin-bottom: 30px;
}
.agenda-section .agenda-image {
    display: block;
    margin: 0 auto 30px auto;
    max-width: 100%;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.agenda-section .mec-shortcode-wrapper { /* If you wrap the shortcode block */
    text-align: center; /* Or style MEC output directly */
}

/* === BOOK OF THE MONTH / CLUB SECTION (0:24 - 0:28) === */
/* Kadence Row Layout: 2 columns.
   Left: Advanced Text ("LIVRO DO MÊS"), Advanced Image (book cover), Advanced Text.
   Right: Advanced Text ("Club del Libro"), Advanced Text.
   If this is a carousel, use Kadence Advanced Gallery (carousel mode) or a custom JS solution.
*/
.book-club-section {
    padding-top: 40px;
    padding-bottom: 40px;
}
.book-club-section .book-image img {
    max-width: 200px; /* Adjust */
    height: auto;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.book-club-section h3 { /* For "LIVRO DO MÊS", "Club del Libro" */
    font-size: 22px;
    color: #333;
    margin-bottom: 10px;
}
.book-club-section .zoom-link, .book-club-section .youtube-link {
    display: block;
    margin-bottom: 8px;
    color: #F58220; /* Orange for links */
    word-break: break-all;
}

/* === GIGAOFFICE PLATFORM SECTION (0:28 - 0:31) === */
/* Similar to Intro Section. Kadence Row Layout: 2 columns.
   Left: Advanced Image. Right: Advanced Text (heading, list), Advanced Button.
*/
.gigaoffice-platform-section {
    padding: 40px 0;
}
.gigaoffice-platform-section .platform-logo img {
    max-width: 250px; /* Adjust */
    margin-bottom: 20px;
}
.gigaoffice-platform-section h2 { /* "PLATAFORMA COMPLETA GIGAOFFICE" */
    color: #1E3A5F; /* Dark Blue */
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 15px;
}
.gigaoffice-platform-section ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}
.gigaoffice-platform-section ul li {
    margin-bottom: 8px;
    color: #555;
}
/* .btn-teal already defined */


/* === BASIC TOOLS / TRAINING SECTION (0:31 - 0:33) === */
/* Kadence Row Layout: 2 columns.
   Each column: Info Box block or Advanced Text + Advanced Image + Advanced Button.
*/
.basic-tools-training-section {
    padding: 40px 0;
}
.basic-tools-training-section .tool-item,
.basic-tools-training-section .training-item {
    text-align: center;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
}
.basic-tools-training-section .tool-item img,
.basic-tools-training-section .training-item img {
    max-width: 100%; /* Or fixed width/height */
    height: 150px; /* Example */
    object-fit: cover;
    margin-bottom: 15px;
    border-radius: 5px;
}
.basic-tools-training-section h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 15px;
}
/* .btn-teal already defined */


/* === BOOKS OF NEXT MONTHS SECTION (0:33 - 0:35) === */
/* Kadence Row Layout: Full width, dark blue background.
   Inside: Advanced Text for heading.
   The table-like list: Can be done with Kadence Row Layouts (multiple rows/columns) or an HTML block if complex.
   If carousel, use Kadence Advanced Gallery or custom JS.
*/
.next-books-section {
    background-color: #1E3A5F; /* Dark Blue - or gradient via Kadence settings */
    color: #ffffff;
    padding: 50px 0;
    text-align: center;
}
.next-books-section h2 {
    font-size: 28px;
    margin-bottom: 30px;
}
.next-books-section .book-list-item {
    margin-bottom: 10px;
    font-size: 16px;
}
.next-books-section .book-month { font-weight: bold; }
.next-books-section .book-title { font-style: italic; }
/* For a table layout: */
.next-books-section .books-table {
    display: flex;
    flex-wrap: wrap; /* Or use CSS Grid */
    justify-content: space-around; /* Example */
    text-align: left;
    max-width: 900px; /* Adjust */
    margin: 0 auto;
}
.next-books-section .books-table-column {
    width: calc(33.333% - 20px); /* Example for 3 columns */
    margin-bottom: 20px;
}
.next-books-section .books-table-column h4 { /* Month */
    font-size: 18px;
    border-bottom: 1px solid #4A6A8F; /* Lighter blue */
    padding-bottom: 5px;
    margin-bottom: 10px;
}


/* === MANIFESTO / HOW IT WORKS SECTION (0:35 - 0:39) === */
/* Kadence Row Layout: 2 columns for Manifesto text + Video.
   Below: Kadence Row Layout for "HOW IT WORKS".
   Hexagonal icons: Kadence Icon blocks or Advanced Image blocks, styled.
   This might require some ::before/::after pseudo-elements for hexagon shape if not using SVGs/images.
   Alternatively, use FontAwesome icons if they suffice.
*/
.manifesto-section { padding: 40px 0; }
.manifesto-section .video-embed-wrapper iframe {
    width: 100%;
    min-height: 300px; /* Adjust */
    border: none;
}
/* .btn-orange already defined */

.how-it-works-section { padding: 40px 0; text-align: center; }
.how-it-works-section .section-heading { /* ... */ }
.how-it-works-section .hexagon-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Space between hexagons */
    margin-bottom: 30px;
}
.how-it-works-section .hexagon-item {
    /* For actual hexagon shape, you'd use SVG, image, or complex CSS clip-path/transforms */
    /* Simple placeholder styling: */
    background-color: #20c997; /* Teal */
    color: white;
    width: 120px; /* Adjust */
    height: 100px; /* Adjust */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px; /* Simplified from hexagon */
    padding: 10px;
    font-size: 14px;
    text-align: center;
}
.how-it-works-section .hexagon-item .kadence-icon { /* If using Kadence Icon block */
    margin-bottom: 8px;
}
.how-it-works-section .hexagon-item .kadence-icon svg {
    width: 30px;
    height: 30px;
    fill: white;
}

/* === NETWORKER PRO & LEADERSHIP PLATFORM (0:39 - 0:41) === */
/* Very similar to GigaOffice Platform section. Reuse styles or create specific ones. */
.networker-pro-section { /* ... similar to .gigaoffice-platform-section ... */ }


/* === NUMBERS / STATS SECTION (0:41 - 0:48) === */
/* Kadence Row Layout: Full width, blue gradient background.
   Inside: Advanced Text for heading.
   Stats boxes: Kadence Info Box blocks or Row Layout with multiple columns.
*/
.numbers-section {
    /* background: blue gradient via Kadence settings */
    padding: 50px 0;
    color: white;
    text-align: center;
}
.numbers-section h2 { /* "OS NÚMEROS DOS GIGANTES" */
    font-size: 28px;
    margin-bottom: 40px;
}
.numbers-section .stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* or space-between */
    gap: 20px;
}
.numbers-section .stat-item {
    background-color: rgba(255,255,255, 0.9); /* Semi-transparent white boxes */
    color: #1E3A5F; /* Dark blue text */
    padding: 20px;
    border-radius: 8px;
    min-width: 180px; /* Adjust */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.numbers-section .stat-item .stat-number {
    font-size: 36px; /* Adjust */
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #F58220; /* Orange for numbers */
}
.numbers-section .stat-item .stat-label {
    font-size: 14px; /* Adjust */
    text-transform: uppercase;
}

/* === OFFICIAL TRAINERS SECTION (0:48 - 0:57) === */
/* Kadence Row Layout. Advanced Text for heading.
   Carousel: Kadence Advanced Gallery (carousel mode), Testimonial Block (if it fits structure), or custom JS slider.
   Each item: Image, Name, Title.
*/
.trainers-section { padding: 40px 0; text-align: center; }
.trainers-section .section-heading { /* ... */ }
/* Styling for a generic carousel item (adjust if using specific Kadence Block) */
.trainer-carousel .swiper-slide, /* If using Swiper.js */
.trainer-carousel .kt-blocks-gallery-item { /* If using Kadence Gallery */
    text-align: center;
}
.trainer-carousel .trainer-image img {
    width: 150px; /* Adjust */
    height: 150px; /* Adjust */
    border-radius: 50%; /* Circular images */
    object-fit: cover;
    margin: 0 auto 15px auto;
    border: 3px solid #20c997; /* Teal border */
}
.trainer-carousel .trainer-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}
.trainer-carousel .trainer-title {
    font-size: 14px;
    color: #777;
    margin-bottom: 15px;
}
.trainer-carousel .trainer-title .verified-icon { /* For the green checkmark */
    color: #28a745; /* Green */
    margin-left: 5px;
    font-size: 12px; /* Adjust for icon size */
}
/* .btn-orange already defined */
/* Carousel navigation/pagination will need specific styling based on implementation */


/* === TESTIMONIALS SECTION (0:57 - 1:00) === */
/* Kadence Row Layout. Advanced Text for heading.
   Testimonial boxes: Kadence Testimonial Block (ideal) or custom structure.
   Likely a carousel.
*/
.testimonials-section { padding: 40px 0; background-color: #f7f7f7; }
.testimonials-section .section-heading { text-align: center; }
/* Kadence Testimonial Block has its own styling options. This is for custom structure or overrides. */
.testimonial-item {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 20px; /* Or handle spacing via carousel gap */
}
.testimonial-item .testimonial-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.testimonial-item .testimonial-avatar img {
    width: 60px; /* Adjust */
    height: 60px; /* Adjust */
    border-radius: 50%;
    margin-right: 15px;
}
.testimonial-item .testimonial-author-name {
    font-size: 17px;
    font-weight: bold;
    color: #333;
}
.testimonial-item .testimonial-author-title {
    font-size: 13px;
    color: #777;
}
.testimonial-item .testimonial-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    font-style: italic;
}
.testimonial-item .testimonial-ver-mais {
    display: inline-block;
    margin-top: 10px;
    color: #F58220; /* Orange */
    font-size: 14px;
    text-decoration: underline;
}

/* === CTA - SEJA GIGAOFFICE (1:00 - 1:05) === */
/* Kadence Row Layout: Full width, dark blue gradient background.
   Content: Advanced Text (heading, subheading), Advanced Button.
*/
.cta-gigaoffice-section {
    /* background: dark blue gradient via Kadence settings */
    padding: 60px 20px;
    text-align: center;
    color: white;
}
.cta-gigaoffice-section h2 { /* "SEJA GIGAOFFICE!" */
    font-size: 32px; /* Adjust */
    font-weight: bold;
    margin-bottom: 10px;
}
.cta-gigaoffice-section p { /* "UTILIZE AS FERRAMENTAS..." */
    font-size: 18px; /* Adjust */
    margin-bottom: 30px;
}
/* .btn-orange for "ASSINE AGORA!" already defined */


/* === CONTACT FORM SECTION (1:05 - 1:10) === */
/* Kadence Row Layout. Advanced Text for heading.
   Form: Kadence Form Block (recommended) or Contact Form 7.
*/
.contact-form-section { padding: 50px 0; }
.contact-form-section .section-heading { /* ... */ }
/* Styling for Kadence Form Block (it has many built-in options) */
.wp-block-kadence-form .kadence-blocks-form-field .kb-forms-label {
    font-weight: bold;
    color: #444;
}
.wp-block-kadence-form .kadence-blocks-form-field input[type="text"],
.wp-block-kadence-form .kadence-blocks-form-field input[type="email"],
.wp-block-kadence-form .kadence-blocks-form-field textarea {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    width: 100%;
}
.wp-block-kadence-form .kadence-blocks-form-field textarea {
    min-height: 120px;
}
.wp-block-kadence-form .kb-submit-field .kb-forms-submit {
    /* Use .btn-orange class or style directly */
    background-color: #F58220 !important;
    color: white !important;
    /* ... other .btn-orange styles ... */
    width: auto; /* Or 100% if desired */
}
/* reCAPTCHA styling if needed */
.contact-form-section .grecaptcha-badge { /* Example to hide if using invisible v3 and it's mispositioned */
    /* visibility: hidden; */
}


/* === FOOTER (1:10 - End) === */
/* Use Kadence Footer Builder. Set background to black.
   Add HTML widgets or Kadence Blocks for the columns.
   Left: Site Logo/Identity Block.
   Middle: HTML block for "CONTATO" info.
   Right: HTML block for "REDES SOCIAIS" icons/links.
   Copyright: Kadence Footer Copyright element.
*/
.site-footer { /* Targets Kadence footer wrapper */
    background-color: #000000 !important; /* Ensure it overrides */
    color: #cccccc;
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}
.site-footer a {
    color: #ffffff;
    text-decoration: none;
}
.site-footer a:hover {
    color: #F58220; /* Orange on hover */
}
.footer-widget-area .widget-title { /* If using traditional widgets in footer */
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.footer-contact-info p, .footer-contact-info a {
    margin-bottom: 8px;
    display: block; /* For phone numbers to stack nicely */
}
.footer-social-icons {
    display: flex;
    gap: 15px;
}
.footer-social-icons a i { /* Assuming FontAwesome icons */
    font-size: 20px; /* Adjust icon size */
}
.footer-hashtag { /* "#ORGULHODESERGIGANTE" above footer */
    text-align: center;
    padding: 20px 0;
    background-color: #f0f0f0; /* Light gray background, or match page */
    color: #20c997; /* Teal */
    font-size: 20px;
    font-weight: bold;
}

/* === TRAINERS PAGE (0:55 - 1:09 in video implies a separate page) === */
/* Hero section for Trainers page */
.page-template-page-trainers .trainers-page-hero {
    background-color: #1E3A5F; /* Dark blue, or image with overlay */
    /* Add background image if shown (silhouettes) */
    background-image: url('path/to/your/silhouette-image.jpg');
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    text-align: center;
    color: white;
}
.page-template-page-trainers .trainers-page-hero h1 {
    font-size: 40px; /* Adjust */
    margin-bottom: 15px;
}
.page-template-page-trainers .trainers-page-hero p {
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 20px auto;
}

/* Grid of trainers on Trainers page */
.trainers-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive grid */
    gap: 30px;
    padding: 40px 0;
}
.trainers-archive-grid .trainer-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.trainers-archive-grid .trainer-card .trainer-image img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px auto;
    border: 3px solid #eee;
}
.trainers-archive-grid .trainer-card .trainer-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}
.trainers-archive-grid .trainer-card .trainer-title {
    font-size: 14px;
    color: #777;
    margin-bottom: 15px;
}
.trainers-archive-grid .trainer-card .trainer-title .verified-icon {
    color: #28a745;
    margin-left: 5px;
}
/* .btn-orange for "CONHEÇA MAIS" already defined */


/* === RESPONSIVENESS === */
@media (max-width: 991px) { /* Kadence tablet breakpoint */
    .hero-section-custom {
        text-align: center;
    }
    .hero-section-custom .hero-quote-column {
        margin-bottom: 30px;
    }
    .hero-section-custom .hero-image-column img { /* If right column has image */
        max-width: 70%;
        margin: 0 auto;
    }
    .numbers-section .stat-item {
        min-width: calc(50% - 10px); /* 2 items per row */
    }
    .next-books-section .books-table-column {
        width: calc(50% - 10px); /* 2 columns */
    }
}

@media (max-width: 767px) { /* Kadence mobile breakpoint */
    .section-heading {
        font-size: 24px;
    }
    .hero-quote-column .quote-text {
        font-size: 20px;
    }
    .numbers-section .stat-item {
        min-width: 100%; /* 1 item per row */
    }
    .next-books-section .books-table-column {
        width: 100%; /* 1 column */
    }
    .trainers-archive-grid {
        grid-template-columns: 1fr; /* Single column for trainers on mobile */
    }
    .footer-widget-area > div { /* Make footer columns stack */
        margin-bottom: 30px;
    }
    .footer-social-icons {
        justify-content: center;
    }
}