/* Reset and Base Styling */body {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    background-image: url('G-bgd.png');
    background-repeat: repeat;
    background-attachment: fixed;
    font-family: "Oswald", Arial, sans-serif;  
    line-height: 1.8;
    color: #777700;
}
	.header { 
	    text-align: center;
	    /* Top padding halved to 30px, bottom padding reduced to 15px */
	    padding: 30px 0px 20px 0px; 
	    border-bottom: 1px solid #eee;
	}
        .header img {
            width: 450px;
            max-width: 90%;
        }

	/* Container to house the LOGO header  */
	.container1 {
	    width: 95%;
	    max-width: 800px;
	    margin: 20px auto 0px auto;  /* top and bottom space added here */
	    background-color: #8E881C;   /* was white, then, 'none' meaning: transparent, then as is */
	    border-radius: 5px;
	    border: 3px solid #D4AF37;    /* removed background, was 2px */
	}



/* Container to handle margins */
.container {
    width: 95%;
    max-width: 800px;
    margin: 0px auto 0 auto;
}

/* --- Responsive Chessboard Grid --- */
.chessboard-grid {
    display: grid;
    /* Base: 2 columns for mobile phones */
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 100px;
    gap: 1px;
    width: 100%;
    margin: 0 auto;
    border: 4px solid #D4AF37;
    box-sizing: border-box;

    /* =====================================================
       FULL-GRID BACKGROUND IMAGE
       This places a single faded image across the entire
       chessboard grid. Adjust opacity to taste (0.0–1.0).
       ===================================================== */
    position: relative;
    background-image: url('strategy_200w140feint.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Faded overlay for the full-grid background image.
   The ::before sits behind all cells.
   Opacity here controls the whole-grid image intensity. */
.chessboard-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('strategy_200w140feint.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
}

/* Desktop View: 4 columns */
@media (min-width: 600px) {
    .chessboard-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 140px;
    }
}

/* All grid items are flex containers */
.grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D4AF37;
    height: 100px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;  /* ensures cell sits above the grid ::before layer */
    z-index: 1;
}

/* Links fill the space and also centre their own content */
.grid-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    text-align: center;
    font-weight: bold;
    font-family: "Oswald", Arial, sans-serif !important;
    background-color: transparent;
    position: relative;
    z-index: 2;
}

/* Multi-line text helper */
.grid-item a span {
    display: block;
    line-height: 1.2;
}

.grid-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: auto;
}

/* Desktop overrides */
@media (min-width: 600px) {
    .grid-item {
        font-size: 23px;
        height: 140px;
    }
}

/* Mobile text override to prevent overflow */
@media (max-width: 600px) {
    .grid-item { font-size: 13px; }
}


/* =====================================================
   INDIVIDUAL CELL COLOUR CLASSES
   (replaces all inline background-color styling)
   ===================================================== */

/* Row 1 */
.cell-chariot      { background-color: #811E10; color: #808000; }   /* image cell — chariot */
.cell-leadership   { background-color: #DDDDDD; color: #808000; }   /* Leadership */
.cell-efficiency   { background-color: #EFE7EA; color: #808000; }   /* Efficiency */
.cell-logo         { background-color: #FFFFFF; color: #808000; }   /* image cell — logo */

/* Row 2 */
.cell-personality  { background-color: #ECEAEE; color: #808000; }   /* Personality frameworks */
.cell-library      { background-color: #E6E2E9; color: #808000; }   /* our Library */
.cell-negotiation  { background-color: #DDDDDD; color: #808000; }   /* Negotiation Skills */
.cell-decoding     { background-color: #E7DCE0; color: #808000; }   /* Decoding Behaviour */

/* Row 3 */
.cell-articles     { background-color: #EBE2E6; color: #808000; }   /* Articles */
.cell-meetings     { background-color: #757172; color: #808000; }   /* image cell — meetings */
.cell-strategy     { background-color: #EBE2E6; color: #808000; }   /* Winning Strategy */
.cell-comms        { background-color: #E6E2E9; color: #808000; }   /* Powerful Communication */


/* =====================================================
   INDIVIDUAL CELL BACKGROUND IMAGE CLASSES
   Apply these IN ADDITION to the cell colour class.
   The image is placed via ::before so it never
   interferes with the cell's background-color.
   Adjust opacity (0.0–1.0):
   0.0 = invisible, 1.0 = fully opaque image.
   ===================================================== */

/* All cells that have a hover reveal need ::after positioned */
/* Required on the parent so ::before positions correctly */
.bg-leadership,
.bg-efficiency,
.bg-personality,
.bg-library,
.bg-negotiation,
.bg-decoding,
.bg-articles,
.bg-meetings,
.bg-strategy,
.bg-comms {
    position: relative;
}

/* The pseudo-element carries the image, sitting behind all content */
.bg-leadership::before,
.bg-efficiency::before,
.bg-personality::before,
.bg-library::before,
.bg-negotiation::before,
.bg-decoding::before,
.bg-articles::before,
.bg-meetings::before,
.bg-strategy::before,
.bg-comms::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: 0;
}

.bg-leadership::before {
    background-image: url('leadership_200w140feint.png');
}

.bg-efficiency::before {
    background-image: url('productivity_200w140tr.png');
}

.bg-personality::before {
    background-image: url('personality_200w140feint.png');
}

.bg-library::before {
    background-image: url('library_200w140feint.png');
}

.bg-negotiation::before {
    background-image: url('negotiation_200w140feint.png');
}

.bg-decoding::before {
    background-image: url('decoding_200w140feint.png');
}

.bg-articles::before {
    background-image: url('articles_200w140feint.png');
}

.bg-meetings::before {
    background-image: url('Meetings_202w138.jpg');
}

.bg-strategy::before {
    background-image: url('strategy_200w140feint.png');
}

.bg-comms::before {
    background-image: url('communication_200w140feint.png');
}



/* The reveal layer — hidden by default */
.bg-leadership::after,
.bg-efficiency::after,
.bg-personality::after,
.bg-library::after,
.bg-negotiation::after,
.bg-decoding::after,
.bg-articles::after,
.bg-strategy::after,
.bg-comms::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}

/* Individual reveal images — same files as ::before but full opacity */
.bg-leadership::after    { background-image: url('leadership_200w140feint.png'); }
.bg-efficiency::after    { background-image: url('productivity_200w140tr.png'); }
.bg-personality::after   { background-image: url('personality_200w140feint.png'); }
.bg-library::after       { background-image: url('library_200w140feint.png'); }
.bg-negotiation::after   { background-image: url('negotiation_200w140feint.png'); }
.bg-decoding::after      { background-image: url('decoding_200w140feint.png'); }
.bg-articles::after      { background-image: url('articles_200w140feint.png'); }
.bg-strategy::after      { background-image: url('strategy_200w140feint.png'); }
.bg-comms::after         { background-image: url('communication_200w140feint.png'); }

/* Trigger: fade in on hover */
.grid-item:hover::after {
    opacity: 1;
}

/* Gold glow on the cell border, matching your hologram effect */
.grid-item:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.grid-item:hover a {
    color: #FFD700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}


/* =====================================================
   DIVIDER
   ===================================================== */
.divider {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border: none;
    padding: 0;
}


/* =====================================================
   CONTENT SECTION (below the grid)
   ===================================================== */
.content {
    background-color: #ffffff;
    margin: 5px auto 20px auto;     /* auto left/right = centred */
    padding: 20px 30px 30px 30px;   /* equal sides, valid values only */
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: left;
    font-family: "PT Sans", Arial, sans-serif;
    font-size: 1.1rem;
    color: #2A2A2A;
}

.content h1,
.content h2,
.content h3 {
    color: #B9B900;
    font-family: Oswald, "PT Sans", Arial, sans-serif;
}

.content p {
    color: #444444;
    line-height: 1.6;
}


.audit-header {
    text-align: center;
    border-bottom: 1px solid var(--gladiator-gold);
    padding-bottom: 20px;
    margin: 40px auto 40px auto;
}


.audit-header h1 {
    letter-spacing: 5px;
    color: #B9B900;
    font-size: 2rem;
    margin-bottom: 10px;
}



/* =====================================================
   PERSONALITY/STRATEGY GRIDS
   Two-row grids: row 1 = images (fixed height),
   row 2 = captions (auto height, text only).
   ===================================================== */

.people-grid-wrapper {
    width: 100%;
    max-width: 800px;   /* matches .content width */
    margin: 20px auto;
    box-sizing: border-box;
}

/* Grid 1: 5 columns */
.people-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 8px;
    background-color: #F4F1EA;
    padding: 15px;
    border: 2px solid #c5a059; 
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
}

/* Grid 2: 7 columns */
.people-grid-7 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 6px;
    background-color: #F4F1EA;
    padding: 15px;
    margin-top: 12px;
    border: 2px solid #c5a059; 
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
}

/* Shared image rules — consistent height per grid via aspect-ratio */
.people-grid-5 img,
.people-grid-7 img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;   /* favours faces over chests */
    display: block;
    border-radius: 4px;
}

.people-grid-5 .caption {
    font-size: 0.75rem;
    text-align: center;
    color: #2A2A2A;
    line-height: 1.3;
    padding-top: 4px;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

.people-grid-7 .caption {
    font-size: 0.72rem;
    text-align: center;
    color: #2A2A2A;
    line-height: 1.3;
    padding-top: 4px;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

/* Mobile caption size reduction */
@media (max-width: 600px) {
    .people-grid-5 .caption {
        font-size: 0.56rem;
    }
    .people-grid-7 .caption {
        font-size: 0.5rem;
    }
}


.template-box {
    max-width: 600px;               /* was missing semicolon — broke everything below it */
    background: #f0f0f0;
    padding: 10px 80px;             /* simplified — "10 auto 10 35px" is invalid */
    margin: 20px auto;              /* centred, not offset */
    font-style: italic;
    color: #525F25;
    font-family: Oswald, Arial, sans-serif;   /* removed stray space before sans-serif */
}






/* --- GLOBAL SOVEREIGN FOOTER --- */
footer {
    background-color: #fff;
    border-top: 1px solid var(--gladiator-gold);
    padding: 10px 20px 40px;
    margin-top: 0px;
    text-align: center;
    width: 100%; /* Ensures footer takes full width */
}

.footer-logo-btn {
    display: block;
    margin: 0 auto 30px;
    width: 60px !important; /* Force the size on mobile */
    max-width: 60px;
    height: auto;
    transition: transform 0.3s ease;
}

.footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.footer-nav a {
    text-decoration: none !important; /* Forces no underline on phone */
    color: #666 !important; /* Forces grey instead of blue link */
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--sovereign-gold) !important;
}

.copyright-text {
    margin-top: 40px;
    font-size: 0.7rem;
    color: #808080;
    letter-spacing: 1px;
    text-align: center;
}

/* --- SINGLE MOBILE RESPONSIVENESS BLOCK --- */
/* We combine the 600px and 768px into one clean instruction */
@media (max-width: 768px) {
    .footer-nav {
        flex-direction: column !important; /* Stacks links vertically */
        align-items: center !important;
        gap: 10px !important;
    }
    
    .footer-nav a {
        font-size: 0.9rem !important;
        display: block !important;
        padding: 12px 0 !important;
        width: 100%;
        border-bottom: 1px solid #eeeeee; /* Subtle separator */
        text-align: center;
    }

    .footer-nav a:last-child {
        border-bottom: none !important;
    }

    .footer-logo-btn {
        width: 50px !important; /* Slightly smaller for phone */
    }
}

.footer-logo-link {
    text-decoration: none !important;
    display: inline-block;
    margin-bottom: 30px;
}

.footer-next-text {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    color: var(--sovereign-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: -10px; /* Pulls it closer to the logo */
    font-weight: bold;
    transition: letter-spacing 0.3s ease;
}

.footer-logo-link:hover .footer-next-text {
    letter-spacing: 4px; /* Subtle animation on hover */
    color: var(--gladiator-gold);
}



/* =====================================================
   WIKI-STYLE PREVIEW BOX  (IMAGE ONLY version)
   Floats centred on screen on hover
   ===================================================== */

.image-preview-box {
    visibility: hidden !important;
    width: 430px !important;
    max-width: 90vw !important; 
    height: 250px !important;
    max-height: 50vw !important; 

    background-color: #ffffff !important;
    border: 2px solid #7E7918 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    
    /* Pins it to the browser window globally */
    position: fixed !important;
    z-index: 99999 !important;
    
    /* Forces the exact mathematical centre of the active screen */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    overflow: hidden !important; 
    opacity: 0 !important;
    transition: opacity 0.3s, visibility 0.3s !important;
    pointer-events: none !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Forces the image behavior inside the document */
.image-preview-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
}

/* Forced Hover Trigger */
.wiki-preview:hover .image-preview-box {
    visibility: visible !important;
    opacity: 1 !important;
}

.wiki-preview {
    position: relative;
    cursor: pointer;
    display: inline;
    border-bottom: 1px dotted #DD0053;
}

.wiki-preview .preview-box {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 430px !important;
    max-width: 90vw !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}

/* The old "invisible mouse bridge" was built for a tooltip that
   sat directly above the trigger word. Now the box floats in
   the centre of the screen instead, so the bridge would sit in
   the wrong place — switch it off for this page. */
.wiki-preview .preview-box::before {
    content: none !important;
}

@media (max-width: 600px) {
    .wiki-preview .preview-box {
        flex-direction: column !important;
        width: 90vw !important;
        max-height: 75vh !important;
    }
    .wiki-preview .preview-box .preview-img {
        width: 100% !important;
        max-height: 180px !important;
        border-right: none !important;
        border-bottom: 1px solid #eee !important;
    }
}




/* =====================================================
   WIKI PREVIEW — TYPE 2: Image + Text
   Trigger class: wiki-preview-text
   Safe to use alongside wiki-preview (Type 1)
   ===================================================== */

.wiki-preview-text {
    position: relative;
    color: #8B6914;
    cursor: pointer;
    border-bottom: 1px dotted #8B6914;
    display: inline;
}

.wiki-preview-text .preview-box {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;

    width: 430px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;

    background-color: #ffffff;
    border: 1px solid #D4AF37;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    padding: 0;

    display: flex;
    flex-direction: row;

    transition: opacity 0.3s, visibility 0.3s;
}

.wiki-preview-text .preview-box::before {
    content: none;
}

.wiki-preview-text:hover .preview-box {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.wiki-preview-text .preview-img {
    width: 160px;
    min-width: 160px;
    max-height: 100%;
    object-fit: cover;
    border-right: 1px solid #eee;
    border-radius: 8px 0 0 8px;
    display: block;
}

.wiki-preview-text .preview-text {
    padding: 15px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #2A2A2A;
    font-family: "PT Sans", Arial, sans-serif;
    border-bottom: 1px dotted #8B6914;
    overflow-y: auto;
}

/* Mobile: stack image above text */
@media (max-width: 600px) {
    .wiki-preview-text .preview-box {
        flex-direction: column;
        width: 90vw;
        max-height: 75vh;
    }
    .wiki-preview-text .preview-img {
        width: 100%;
        min-width: unset;
        max-height: 160px;
        border-right: none;
        border-bottom: 1px solid #eee;
        border-radius: 8px 8px 0 0;
    }
}



/* =====================================================
   WIKI PREVIEW — TYPE 3: Text Only
   Trigger class: wiki-preview-textonly
   Same width as other variants, half the height
   ===================================================== */

.wiki-preview-textonly {
    position: relative;
    display: inline-block;   /* changed from inline — keeps positioning reliable */
    color: #8B6914;
    cursor: pointer;
    border-bottom: 1px dotted #8B6914;
}

.wiki-preview-textonly .preview-box {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    position: absolute;
    top: 100%;              /* sits right below the trigger text */
    left: 50%;
    transform: translateX(-50%);   /* centres it horizontally under the text */
    margin-top: 0px;        /* zero gap — not enough to lose hover */

    z-index: 9999;

    width: 430px;
    max-width: 90vw;
    height: 200px;
    max-height: 40vw;
    overflow-y: auto;

    background-color: #ffffff;
    border: 2px solid #45420E;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);

    display: flex;
    align-items: flex-start;

    transition: opacity 0.3s, visibility 0.3s;
}

.wiki-preview-textonly .preview-box::before {
    content: none;
}

.wiki-preview-textonly:hover .preview-box {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.wiki-preview-textonly .preview-text {
    padding: 15px 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #2A2A2A;
    font-family: "PT Sans", Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .wiki-preview-textonly .preview-box {
        width: 90vw;
        max-height: 40vh;
        left: 0;
        transform: none;   /* avoids overflow off-screen on narrow phones */
    }
}