/* ==========================================================================
   hgvCPC.com - Laptop & Tablet Screen Optimization
   Targets: Tablets to 15" Laptops (768px to 1600px Viewports)
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1600px) {
    
    
    /* 1. HERO CONTAINER: Force it to expand to match whatever is inside it */
    html body .hero {
        height: auto !important;
        min-height: unset !important; /* Removes any broken rigid height restrictions */
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        display: block !important;
        position: relative !important;
    }

    /* Force the content wrapper to clear floats and grow naturally */
    html body .hero-content {
        height: auto !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centers text and buttons */
        text-align: center !important;
    }

    /* TARGET & ENLARGE DVSA LOGO on laptops/tablets */
    html body .hero-corner-logo {
        position: relative !important;
        top: unset !important;
        left: unset !important;
        right: unset !important;
        bottom: unset !important;
        display: block !important;
        
        /* Adjust these values to get the exact size you want */
        width: 320px !important;     /* Forces the image width up */
        max-width: 90% !important;   /* Prevents it from breaking small tablet screens */
        height: auto !important;     /* Keeps the aspect ratio perfect */
        
        /* Spacing */
        margin: 30px auto !important; /* Centers the logo and gives it breathing room */
    }

    /* FIX FOR BUTTONS: Forces them into standard layout order */
    html body .hero-buttons {
        position: relative !important;
        top: unset !important;
        bottom: unset !important;
        margin-top: 25px !important;
        display: flex !important;
        gap: 15px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* BENEFITS SECTION: Extra protection to ensure it stays below everything */
    html body .benefits {
        position: relative !important;
        clear: both !important;
        margin-top: 50px !important;
        display: block !important;
    }

    
    
    /* 2. LAYOUT CONTAINERS: Shrink rigid pixel boundaries and force dead-center alignment */
    html body main.content-wrapper,
    html body .content-container,
    html body .container {
        width: 94% !important;
        max-width: 1240px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        
        /* The Missing Links: Forces the entire content block to center on wide screens */
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important; /* Kills any rogue desktop floats pushing it left */
    }
    
    
    

    /* 3. MULTI-COLUMN GRIDS: Tighten gaps for two-column setups and about-us page */
    html body .content-box-2col,
    html body .content-box-2col-alt,
    html body .about-flex-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 25px !important;
        width: 100% !important;
    }

    /* Keep main text blocks and sidebars proportional on smaller viewports */
    html body .main-text {
        width: 65% !important;
    }
    
    html body .sidebar-column {
        width: 32% !important;
    }

    /* Protect the unique about-us text & image containers */
    html body .about-flex-container .benefits-text {
        flex: 1 !important;
        width: auto !important;
        display: block !important;
    }

    html body .about-flex-container .benefits-image {
        width: 40% !important;
        max-width: 450px !important;
        display: block !important;
    }

    /* 4. CALL TO ACTION BUTTONS: Neutralize rigid desktop floats causing line-breaks */
    html body .btn-primary, 
    html body .btn-secondary,
    html body .return-btn {
        display: inline-block !important;
        float: none !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important; /* Lets long button text safely wrap onto two lines if squeezed */
    }

    /* 5. COOKIE BANNER: Streamline padding and sizes so it sits neatly at the bottom */
    html body #cookie-banner.cookie-container {
        padding: 10px 20px !important;
        height: auto !important;
    }

    html body #cookie-banner .cookie-content {
        max-width: 900px !important;
    }

    html body #cookie-banner .cookie-content p {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    html body #cookie-banner .cookie-btn {
        padding: 6px 14px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    /* 6. TYPOGRAPHY: Balance the card headings and paragraphs to eliminate orphans */
    html body .benefit-card h3,
    html body .benefit-card p,
    html body .main-intro p,
    html body .column p {
        text-align: center !important;
        text-wrap: balance !important; /* Forces the browser to split lines evenly */
    }
    
    
    /* 7. COLUMN BUTTON ALIGNMENT: Center align the buttons under the intro columns */
    html body .main-intro .column {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centers all content inside the column */
        text-align: center !important;  /* Centers the text headers and paragraphs */
    }

    html body .main-intro .column .btn-main {
        display: inline-block !important;
        margin: 15px auto 0 auto !important; /* Forces the button to center horizontally */
        text-align: center !important;
        width: max-content !important; /* Keeps the button wrapped tightly around its text */
        max-width: 100% !important;
    }
    
    /* 8. FOOTER LINKS: Perfectly balanced 3-column split layout */
    html body footer, 
    html body .footer-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Left Zone: The Links */
    html body .footer-links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 15px !important;              /* Clean spacing between the 3 links */
        flex: 1 !important;                 /* Takes up exactly 1/3 of the space */
        justify-content: flex-start !important; /* Aligns links strictly to the left */
    }

    html body footer a, 
    html body .footer-links a {
        display: inline-block !important;
        white-space: nowrap !important;
        font-size: 12.5px !important;       /* Slightly smaller to guarantee no overlap */
    }

    /* Center Zone: The Copyright */
    html body footer .copyright,
    html body footer p:not(.footer-links) {
        flex: 1 !important;                 /* Takes up exactly 1/3 of the space */
        text-align: center !important;      /* Forces text dead-center inside its zone */
        margin: 0 !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        position: static !important;        /* Resets the overlap issue */
        transform: none !important;         /* Clears previous translation */
    }

    /* Right Zone: The Counter-Weight Phantom Spacer */
    html body footer::after,
    html body .footer-container::after {
        content: "" !important;
        flex: 1 !important;                 /* Takes up exactly 1/3 of the space */
        display: block !important;
    }
    
    
    
   /* ==========================================================================
       9. DROP NAV MENU: Left Shift Alignment & Custom First-Menu Position
       ========================================================================== */

    /* 1. Applies the working negative left shift to ALL child dropdown menus */
    html body div.header-container ul.main-menu li.parent ul.child,
    html body div.header-container ul.main-menu li ul.w-small,
    html body div.header-container ul.main-menu li ul.w-medium,
    html body div.header-container ul.main-menu li ul.w-large,
    html body div.header-container ul.main-menu li ul.w-xlarge {
        right: auto !important;
        left: -220px !important; 
    }

    /* 2. UNIQUE OVERRIDE: Pulls ONLY the first dropdown (Scheduled Online Courses) back to the right */
    html body div.header-container ul.main-menu > li.parent:first-child ul.child,
    html body div.header-container ul.main-menu > li.parent:first-child ul.w-small,
    html body div.header-container ul.main-menu > li.parent:first-child ul.w-medium,
    html body div.header-container ul.main-menu > li.parent:first-child ul.w-large,
    html body div.header-container ul.main-menu > li.parent:first-child ul.w-xlarge {
        left: -40px !important; /* Adjust this value to position it perfectly on the screen */
    }
    
    
    

   /* ==========================================================================
       10. COURSE SCHEDULE PAGES & TABLES (Laptop & Tablet Optimization)
       ========================================================================== */

    /* Ensure the wrapper container spans fully and centers its child blocks */
    html body .courses-section {
        padding: 40px 0 !important;
        background-color: #ffffff !important;
        width: 100% !important;
        display: block !important;
        margin-left: auto !important;  /* Cooperates to center the container */
        margin-right: auto !important; /* Cooperates to center the container */
    }

    /* Force the table to span 100% of its parent block and align smoothly */
    html body .course-table {
        width: 100% !important;        /* Breaks out of the 90% choke hold */
        max-width: 100% !important;
        border-collapse: collapse !important;
        margin: 20px auto !important;  /* "auto" on sides forces perfect dead-center alignment */
        font-family: 'Open Sans', sans-serif !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        table-layout: fixed !important; /* Forces columns to strictly respect assigned percentages */
    } 
    
    
    /* Force the header container to stay in the natural structural flow */
    html body .course-table thead {
        display: table-header-group !important;
        position: static !important; /* Completely strips out absolute floating/glitches */
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Force the header row to lock cleanly above row one */
    html body .course-table thead tr {
        display: table-row !important;
        position: static !important;
        height: auto !important;
    }
    
    
    
    /* --- TOTAL CONTROL: FLUID TABLE HEADER ALIGNMENT --- */
    
    /* 1. Baseline header styles - allowing text to wrap naturally */
    html body .course-table th {
        background-color: #16171a !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 11px !important;          /* Slid down half a pixel to help layout room */
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;    
        padding: 12px 8px !important;        /* Tightened slightly for laptop screens */
        vertical-align: middle !important;
        white-space: normal !important;      /* THE FIX: Allows long headings to stack cleanly on 2 lines */
        line-height: 1.3 !important;
    }
    
    
    
    /* --- HEADER POSITIONING & OVERLAP RESET --- */
    
    /* Force the header elements to span the full grid width of the table layout container */
    html body table.course-table thead {
        display: table-header-group !important;
        width: 100% !important;
        position: static !important;
        float: none !important;
    }

    html body table.course-table thead tr {
        display: table-row !important;
        width: 100% !important;
        position: static !important;
        height: auto !important;
    }

    /* Keep table cells processing as native structural nodes */
    html body table.course-table th {
        display: table-cell !important;
        height: auto !important;
        position: static !important;
    }

    /* Force the first row of data to clear the full width bar naturally */
    html body table.course-table tbody {
        display: table-row-group !important;
    }

    html body table.course-table tbody tr:first-child {
        position: relative !important;
        height: auto !important;
    }

    html body table.course-table tbody tr:first-child td {
        padding-top: 18px !important; /* Adds a reliable visual safety gap under the black bar */
    }
    
    
    

    /* 2. Dead-Center ALL data column headers */
    html body .course-table th.col-logo,
    html body .course-table th.col-date,
    html body .course-table th.col-reg,
    html body .course-table th.col-start,
    html body .course-table th.col-duration,
    html body .course-table th.col-price,
    html body .course-table th.col-dvsa {
        text-align: center !important;
    }

    /* 3. Keep the final booking column right-aligned over the buttons */
    html body .course-table th.col-book {
        text-align: right !important;
        padding-right: 15px !important;
    }
    
    
    
    /* Force ALL text and spans in the price column to align dead-center */
    html body table.course-table td.col-price,
    html body table.course-table td.col-price * {
        text-align: center !important;
    }
    
    

    /* Center-align headers for visual balance where needed */
    html body .course-table th.col-logo,
    html body .course-table th.col-dvsa {
        text-align: center !important;
    }

    /* Align action header to match the row buttons below it */
    html body .course-table th.col-book {
        text-align: right !important;
        padding-right: 15px !important;
    }

    html body .course-table tr {
        position: relative !important;
        height: auto !important;       /* Forces data rows to respect content height */
    }
    
    /* Alternate Row Shading */
    html body .course-table tbody tr:nth-child(even) {
        background-color: #f8f9fa !important;
    }

    /* Expanded from 10% to give the logo room to breathe */
    html body .course-table .col-logo {
        width: 16% !important;
        text-align: center !important;
    }
    
    html body .course-table .col-logo img {
        width: 125px !important; 
        height: auto !important;
        border-radius: 4px !important;
        display: block !important;
        margin: 0 auto !important;
    }

   
   html body .course-table .col-date {
        width: 16% !important;
        line-height: 1.4 !important;
        text-align: center !important; 
    }

    /* --- DATE COLUMN: Absolute Unified Scale Fix --- */
    html body table.course-table td[class*="date"],
    html body table.course-table td.col-date,
    html body table.course-table .col-date span,
    html body table.course-table .force-date-style {
        color: #16171a !important;
        font-size: 12px !important; 
        font-weight: 700 !important;
        display: inline-block !important; 
        text-align: center !important;    
        width: 100% !important;           
        margin: 0 auto !important;
        transform: scale(0.85) !important;
        transform-origin: center center !important;
        -webkit-text-size-adjust: none !important;
    }

    
    /* Fully Booked Text/Badge in Date Column */
    html body .course-table .status-badge.status-fully-booked {
        display: inline-block !important;
        background-color: #e02424 !important;
        color: #ffffff !important;
        font-size: 11px !important;       /* Bumped up from 9px for better visibility */
        font-weight: 800 !important;
        padding: 4px 10px !important;     /* Increased padding to make the red box larger */
        border-radius: 4px !important;
        margin-top: 6px !important;
        letter-spacing: 0.5px !important;
        transform: none !important;        /* Prevents the parent column's shrink rule from touching it */
    }
    
    

    html body .course-table .col-reg {
        width: 13% !important;
        font-weight: 600 !important;
        color: #555555 !important;
    }

    html body .course-table .col-start {
        width: 12% !important;
        font-size: 13px !important;
    }

    html body .course-table .col-start strong {
        color: #16171a !important;
        font-weight: 700 !important;
    }

    html body .course-table .col-duration {
        width: 13% !important;
        line-height: 1.3 !important;
    }

    html body .course-table .course-duration {
        display: block !important;
        font-weight: 700 !important;
        color: #16171a !important;
    }

    html body .course-table .course-note {
        display: block !important;
        font-size: 11px !important;
        color: #777777 !important;
    }

    html body .course-table .col-dvsa {
        width: 12% !important;
        text-align: center !important;
    }

    html body .course-table .col-dvsa img {
        width: 65px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* --- PRICE COLUMN: Targeted Layout Fix --- */
    html body .course-table .col-price {
        width: 12% !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Target ONLY the main price number block */
    html body table.course-table td.col-price .price-value {
        color: #16171a !important;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 18px !important; /* Brought back up to a crisp, readable laptop size */
        font-weight: 700 !important;   /* Keeps the number bold and prominent */
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        transform: none !important;    /* Absolute reset to prevent shrinking */
    }

    /* Target ONLY the secondary text line (+DVSA upload fee / +VAT) */
    html body table.course-table td.col-price .price-note,
    html body table.course-table td.col-price span:not(.price-value) {
        display: block !important;
        color: #666666 !important;
        font-family: 'Open Sans', sans-serif !important;
        font-size: 11px !important;    /* Normal readable footnote text */
        font-weight: 400 !important;   /* STRIP BOLD: Restores it to regular weight */
        text-align: center !important;
        width: 100% !important;
        margin: 3px auto 0 auto !important;
        transform: none !important;    /* Absolute reset to prevent shrinking */
    }
    
    
    
    /* Force ALL text and spans in the price column to align dead-center */
    html body table.course-table td.col-price,
    html body table.course-table td.col-price * {
        text-align: center !important;
    }
    
   
    
    /* Gives the booking column a bit more width allocation */
    html body .course-table .col-book {
        width: 14% !important; 
        text-align: right !important;
        padding-right: 15px !important; /* Keeps it inside the table frame */
    }

    /* Ensures the button stays bounded inside its cell parent */
    html body .course-table .book-btn,
    html body .course-table .btn-fully-booked {
        display: block !important;       /* Changed from inline-block */
        width: 100% !important;          /* Scales to the exact width of the cell */
        max-width: 120px !important;     /* Hard ceiling so it doesn't get too wide */
        margin-left: auto !important;    /* Keeps it aligned to the right side */
        text-align: center !important;
        box-sizing: border-box !important; 
    }
    
    /* Vibrant Red Accent Hover State */
    html body .course-table .book-btn:hover {
        background-color: #2b8a3e !important;
        color: #ffffff !important;
    }

    
    /* Muted "Fully Booked" Button */
    html body .course-table .btn-fully-booked {
        display: block !important;       /* Consistent block flow with standard button */
        background-color: #e4e7eb !important;
        color: #718096 !important;
        text-align: center !important;   /* Forces horizontal center alignment */
        padding: 8px 0 !important;       /* Removed side padding to prevent text squishing */
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        cursor: not-allowed !important;
        width: 100% !important;          /* Matches parent cell framework */
        max-width: 120px !important;     /* Identical width to standard book button */
        margin-left: auto !important;    /* Keeps it right-aligned in the cell */
        line-height: 1.2 !important;     /* Tightens vertical centering */
    }
    
    
    /* 1. FORCE WHITE COLOR: Overrides the rogue grey color on the registration heading */
    html body table.course-table th.col-price,
    html body table.course-table th.col-price * {
        color: #ffffff !important;
    }

    /* 2. UNIFY TEXT SIZES: Forces the start time text to match the exact size of all other headings */
    html body table.course-table th.col-start,
    html body table.course-table th.col-start * {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        line-height: 1.3 !important;
    }
    
    
    /* FORCE WHITE COLOR BY POSITION: Target the 6th and 7th columns explicitly */
    html body table.course-table th:nth-child(6),
    html body table.course-table th:nth-child(6) *,
    html body table.course-table th:nth-child(7),
    html body table.course-table th:nth-child(7) * {
        color: #ffffff !important;
    }
    
    
    /* THE ULTIMATE OVERRIDE: Clear out any remaining color variables or text shadows across all headers */
    html body table.course-table thead th,
    html body table.course-table thead th *,
    html body table.course-table thead tr th span,
    html body table.course-table thead tr th strong {
        color: #ffffff !important;
        text-shadow: none !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #ffffff !important; /* Forces Safari/WebKit to obey white text */
    }
    
}