/* Created on : 6 Jun 2026
   Author     : duncan
   Updated    : Unified 5-Color Variables Framework & Strict Architecture
*/

/*************************************************************
Unified Color Palette Variables
*************************************************************/
:root {
    /* 1. Base Canvas Background */
    --Bg-Canvas:       #f4f6f4; 
    
    /* 2. Primary Deep Typography & High Contrast Borders */
    --Text-Primary:    #2c3e50; 
    
    /* 3. Main Brand / Success / Highlight Action (Forest Green) */
    --Brand-Primary:   #2e7d32; 
    --Brand-Hover:     #1b5e20;
    
    /* 4. Subdued Soft Container Fills (Cards, Alternating Rows) */
    --Bg-Card-Light:   #ffffff;
    --Bg-Card-Dark:    #e8ebe8;
    
    /* 5. Warning / Error States */
    --State-Error:     #d32f2f;

    /* Structural & Typography Variables */
    --FontBig: 45px;
    --FontMed: 28px;
    --FontSma: 16px;
    
    --BorderBend: 16px;
    --BorderBendSmall: 8px;
    --BorderThickness: 2px;
}

/*************************************************************
Base Element Resets
*************************************************************/
* {
    box-sizing: border-box;
}

/* Force the absolute root elements to clip any side overflow */
html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden !important;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%; /* Changed from 100vw to 100% so it binds to HTML, not the window */
    overflow-x: hidden !important;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--Bg-Canvas);
    color: var(--Text-Primary);
    text-align: center;
    font-size: var(--FontSma);
    line-height: 1.5;
}

h1, h2, h3 {
    color: var(--Text-Primary);
    margin-bottom: 15px;
}

h1 { font-size: var(--FontBig); }
h2 { font-size: var(--FontMed); }

img {
    border-radius: var(--BorderBendSmall);
    max-width: 100%;
    height: auto;
}

/*************************************************************
Layout Structure
*************************************************************/
.row {
    width: 100%;
    max-width: 1000px; /* Snugger width look */
    margin: 15px auto;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
}

[class^="column"] {
    padding: 10px;
    border-radius: var(--BorderBendSmall);
}

/* Base Desktop Percentages */
.column10  { width: 10%; }
.column30  { width: 30%; }
.column33  { width: 33.33%; }
.column40  { width: 40%; }
.column50  { width: 50%; }
.column60  { width: 60%; }
.column70  { width: 70%; }
.column100 { width: 100%; }

/*************************************************************
Site Interface Components
*************************************************************/

/* The Secret Gateway Link */
.secret-gate {
    color: var(--Text-Primary);
    text-decoration: none;
    opacity: 0.4; /* Blends nicely out of sight */
    font-size: 0.85rem;
    cursor: pointer;
}
.secret-gate:hover {
    opacity: 1.0; /* Highlights easily when hovered */
}

/* Header Container */
.mypageheader {
    border: var(--BorderThickness) solid var(--Text-Primary);
    border-radius: var(--BorderBend);
    background-color: var(--Bg-Card-Light);
    display: inline-block;
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
}

/* Generic Action Buttons */
.button {
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: var(--BorderBendSmall);
    background-color: var(--Brand-Primary);
    color: var(--Bg-Card-Light);
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.button:hover {
    background-color: var(--Brand-Hover);
}

/*************************************************************
Admin Forms & Inputs
*************************************************************/
.editorlayout {
    width: 100%;
    border-radius: var(--BorderBend);
    background-color: var(--Bg-Card-Light);
    border: var(--BorderThickness) solid var(--Bg-Card-Dark);
    padding: 20px;
    text-align: left;
}

label {
    width: 100%;
    display: block;
    text-align: left;
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--Text-Primary);
    padding: 5px 0;
}

input[type=text], input[type=password], input[type=number], select, textarea {
    width: 100%;
    border: var(--BorderThickness) solid var(--Bg-Card-Dark);
    border-radius: var(--BorderBendSmall);
    padding: 10px;
    font-size: 1rem;
    background-color: var(--Bg-Card-Light);
    color: var(--Text-Primary);
    outline: none;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus {
    border-color: var(--Brand-Primary);
}

.error {
    color: var(--State-Error);
    font-weight: bold;
}

/*************************************************************
Data Tables (Editor Dashboard List)
*************************************************************/
.editorlistcontainer {
    background-color: var(--Bg-Card-Light);
    border-radius: var(--BorderBend);
    border: var(--BorderThickness) solid var(--Bg-Card-Dark);
    padding: 15px;
    width: 100%;
}

#editorlisttable {
    border-collapse: collapse;
    width: 100%;
}

#editorlisttable th {
    text-align: left;
    background-color: var(--Bg-Card-Dark);
    color: var(--Text-Primary);
    padding: 12px;
    font-weight: bold;
}

#editorlisttable td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid var(--Bg-Card-Dark);
}

#editorlisttable tr:nth-child(even) { background-color: rgba(0,0,0,0.01); }
#editorlisttable tr:hover { background-color: var(--Bg-Card-Dark); }

#editorlisttable a {
    color: var(--Brand-Primary);
    text-decoration: none;
    font-weight: bold;
}
#editorlisttable a:hover { text-decoration: underline; }

/*************************************************************
Display Stream Content Elements (Frontend)
*************************************************************/
.media-stream {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.media-block {
    background-color: var(--Bg-Card-Light);
    border: var(--BorderThickness) solid var(--Bg-Card-Dark);
    border-radius: var(--BorderBend);
    padding: 20px;
    text-align: left;
}

.text-block p {
    color: var(--Text-Primary);
    font-size: 1.1rem;
    margin: 0;
}

.image-block { text-align: center; }

.pdf-embed-view {
    width: 100%;
    height: 600px;
    border: none;
    border-radius: var(--BorderBendSmall);
}

.iframe-container {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: var(--BorderBendSmall);
    border: var(--BorderThickness) solid var(--Bg-Card-Dark);
    overflow: hidden;
}
.iframe-container iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0; left:0; border:0;
}

/*************************************************************
Responsive Mobile Overrides
*************************************************************/
@media (max-width: 600px) {
    /* 1. Force the absolute root containers to never exceed screen width */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative;
    }

    /* 2. Strip margins that can push rows out of bounds */
    .row {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        margin: 10px 0 !important;
        box-sizing: border-box !important;
    }

    /* 3. Force columns to wrap and stack strictly at 100% inside the parent */
    [class^="column"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 5px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 4. Ensure container blocks inside columns don't spill over */
    .media-block, .editorlayout, .editorlistcontainer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. Keep embedded frames perfectly responsive */
    .iframe-container { 
        width: 100% !important;
        max-width: 100% !important;
        height: 320px !important; 
    }
    
    .pdf-embed-view { display: none !important; }
    
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.5rem !important; }
}