@charset "utf-8";


/* main content styling */
.main-intro {
    padding: 10px;   /* moves the lead text down */
    background-color: #FAFAFA;
    background: none;
}



.main-intro .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
                url('images/hero-bg.jpg') no-repeat center center/cover;   /* 0.5 is 50% dark. increase to 0.7 for darker, decrease to 0.3 for lighter */
}



.legal-content {
    display: block;
    max-width: 1200px;
    width: 95%;
    margin: 0 auto 30px auto;   /* centers the box and adds bottom spacing */
    box-sizing: border-box;
    background-color: #fafafa;   /* change this to your desired color */
    text-align: left;
    padding: 20px;
    border-radius: inherit;
    box-shadow: none;
    border: none;   /* nice light border : 1px solid #eeeeee */
    overflow: hidden;   /* hides the corners of the darker box exposed by the rounded corners */
}



/* add this to your CSS to target ONLY the first instance */
.legal-content:first-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}



/* target the second one to remove its top padding */
.legal-content:nth-of-type(2) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}



.legal-content .cookie-table {
    width: 100%;
    max-width: 990px;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #ffffff;
    table-layout: fixed;   /* this is key for the column widths below to work */
}



.legal-content .cookie-table th:nth-child(1), 
.legal-content .cookie-table td:nth-child(1) {
    width: 25%;   /* cookie name */
}


.legal-content .cookie-table th:nth-child(2), 
.legal-content .cookie-table td:nth-child(2) {
    width: 55%;   /* purpose / description */
}



.legal-content .cookie-table th:nth-child(3), 
.legal-content .cookie-table td:nth-child(3) {
    width: 20%;   /* expiry */
}



/* this specifically controls the H3 text area */
.legal-content h3 {
    color: #212427;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: 400;
}



.legal-content p {
    margin-top: 5px;   /* adds extra space above the paragraph */
    line-height: 1.8;
    color: #212427;
}



#cookie-data-section {
    max-width: 1200px;      /* exactly the width you want */
    margin: 0 auto;        /* centers the table box on the screen */
    padding: 0 20px;       /* stops the table from touching screen edges on mobile */
    display: block;
    clear: both;           /* prevents other elements from "leaning" on it */
}



.table-actions {
    text-align: left;   /* puts the button on the right side above the table */
    margin-bottom: 10px;
}



/* Print Button Style */
.print-btn {
    background-color: #F40000;   /* matches your header/nav color */
    color: #ffffff;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 200;
    transition: background 0.3s;
}



.print-btn:hover {
    background-color: #008000;   /* signature red on hover */
}



.print-icon {
    margin-right: 5px;
}



/* 4-Column Table Widths */
#cookie-data-section .cookie-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    table-layout: fixed;
}



#cookie-data-section .cookie-table {
    width: 100%;   /* forces the table to fill the full width of the box and no more */
    margin: 20px 0;
    border-collapse: collapse;
    background-color: #ffffff;
    table-layout: fixed;   /* this makes your column widths stick */
}



#cookie-data-section .cookie-table th {
    /* Font Weight Options: 
       400 = Regular, 
       600 = Semi-Bold, 
       700 = Bold, 
       800 = Extra Bold 
    */
    font-weight: 400; 
    
    /* optional: makes the headers feel more 'official' */
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    font-size: 0.85rem;   /* slightly smaller headers often look more modern */
    padding: 15px;   /* ensure the padding remains comfortable */
    background-color: #454c52;
    color: #ffffff;
    text-align: left;
    border-bottom: 4px solid #f40000;
}



/* setting your specific column widths for the 4-column layout */
#cookie-data-section .cookie-table th:nth-child(1) { width: 20%; }
#cookie-data-section .cookie-table th:nth-child(2) { width: 50%; }
#cookie-data-section .cookie-table th:nth-child(3) { width: 15%; }
#cookie-data-section .cookie-table th:nth-child(4) { width: 15%; }



.cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    background-color: #ffffff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}



.cookie-table th {
    background-color: #454c52;    /* #454c52 matches the flyout background */
    color: #ffffff;   /* text in the table column headings */
    text-align: left;
    padding: 15px;
    border-bottom: 4px solid #f40000;    /* signature red line */
}



.cookie-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
    color: #353b3;   /* text in the table */
    font-size: 15px;
}



.cookie-table tr:hover {
    background-color: #f9f9f9;    /* subtle highlight when hovering over a row */
}



.cookie-alert {
    background-color: #fff5f5;    /* very light red tint */
    border-left: 5px solid #f40000;    /* signature red thick line on the left */
    border-right: 5px solid #f40000;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 20px 25px;           /* space inside the box */
    margin: 30px 0;               /* space above and below the box */
    color: #454c52;               /* charcoal grey text */
    font-size: 1.1rem;
    line-height: 1.8;
    border-radius: 8px;   /* rounds the right corners only */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);   /* adds a subtle "official" shadow */
    font-style: italic;   /* optional: looks great if it's slightly italicised */
}



/* optional: add a small bold label before the text */
.cookie-alert::before {
    content: "PLEASE NOTE: ";
    font-weight: bold;
    color: #f40000;
    font-style: normal;
    margin-right: 5px;
}



/* --- PRINT ONLY RULES --- */
@media print {
    /* Hide the Nav, Footer, and Cookie Banner when printing */
    header, footer, #cookie-banner, .print-btn, #backToTop {
        display: none !important;
    }
    
    /* Ensure the table takes the full paper width */
    #cookie-data-section {
        max-width: 100%;
        padding: 0;
    }
    
    .cookie-table {
        box-shadow: none !important;
        border: 1px solid #ccc;
    }
}