:root {    
            --primary-red: #B34100; /* Ackee Red */
            --primary-green: #768526; /* Ackee Leaf Deep */
            --ackee-red: #B34100; /* Ackee Red */
            --ackee-leaf: #ABB93D; /* Ackee Leaf */
            --ackee-leaf-deep: #768526; /* Ackee Leaf Deep */
            --charcoal: #0F1412;
            --warm-sand: #F5EFE2;
            --soft-ivory: #FCF8EF;
            --accent-plum: #844C5A;
            --pa-blue: #0b5f7a;
        }

        html, body{
          overflow-x: hidden;
        }

        body {
            font-family: 'Georgia', serif;
            line-height: 1.8;
            color: var(--charcoal);
            background-color: var(--soft-ivory);
            margin: 0;
            padding: 0;
        }

        /* Hero Image Container - No Screen */
        /*.fr-hero-banner {
            width: 100%;
            height: 450px;
            background: url('../images/pa.jpeg') center/cover no-repeat;
            border-bottom: 5px solid var(--primary-green);
        }*/

        /* Branding and Title Area below image */
        .fr-header-content {
            text-align: center;
            padding: 40px 20px 20px;
            background-color: var(--soft-ivory);
        }

        .fr-brand-icon {
            width: 45px;
            height: auto;
            margin-bottom: 10px;
        }

        .fr-breadcrumb {
            font-family: 'Helvetica', sans-serif;
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 2px;
            color: var(--warm-sand);
            display: block;
            margin-bottom: 15px;
            opacity: 0.7;
            /* background-color: var(--charcoal); /* Contrast for readability if needed */
        }

        .fr-header-content h1 {
            font-size: 2.8rem;
            color: var(--charcoal);
            margin: 0;
            font-weight: normal;
            letter-spacing: 1px;
        }

        .fr-tagline {
            font-style: italic;
            font-size: 1.2rem;
            color: var(--accent-plum);
            margin-top: 5px;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 40px 60px 60px;
            background: white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        h2 { color: var(--primary-red); border-bottom: 2px solid var(--primary-green); padding-bottom: 8px; margin-top: 40px; }
        h3 { color: var(--accent-plum); font-variant: small-caps; letter-spacing: 1px; margin-top: 25px; }

        .definition-box {
            font-style: italic;
            font-size: 1rem;
            color: #222;
            border-left: 4px solid var(--primary-green);
            padding: 20px;
            margin: 30px 0;
            background: #f9f9f9;
        }

        .book-insight {
            background-color: var(--warm-sand);
            border: 1px solid #e0d8c3;
            padding: 35px;
            margin: 45px 0;
        }

        .itinerary-table {
            width: 100%;
            border-collapse: collapse;
            margin: 30px 0;
            font-size: 0.9rem;
        }

        .itinerary-table th { background: var(--charcoal); color: white; padding: 12px; text-align: left; }
        .itinerary-table td { padding: 12px; border-bottom: 1px solid #eee; vertical-align: top; }

        .timeline {
            background: #f4f6f2; 
            padding: 30px;
            border-radius: 4px;
            margin: 40px 0;
        }

        /* --- Text Alignment Utilities --- */

        /* Aligns text to the left */
        .text-left {
            text-align: left !important;
        }
        
        /* Aligns text to the right */
        .text-right {
            text-align: right !important;
        }
        
        /* Aligns text to the center */
        .text-center {
            text-align: center !important;
        }
        
        /* --- Block Alignment Utilities --- */
        
        /* Floats a block element (like an image) to the left with margin for text wrapping */
        .pull-left {
            float: left !important;
            margin-right: 20px;
            margin-bottom: 10px;
        }
        
        /* Floats a block element to the right with margin for text wrapping */
        .pull-right {
            float: right !important;
            margin-left: 20px;
            margin-bottom: 10px;
        }
        
        /* Centers a block element (like a div or image) and clears floats */
        .center-block {
            display: block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            float: none !important;
        }
        
        /* Clearfix utility (useful to add to a parent container if using pull-left/right) */
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

        .timeline ul { list-style: none; padding: 0; }
        .timeline li { margin-bottom: 15px; padding-left: 20px; border-left: 2px solid var(--primary-red); }
        .timeline strong { display: block; color: var(--primary-red); }

        footer { text-align: center; padding: 40px; background: var(--charcoal); color: #999; margin-top: 60px; }

        .next-chapter {
            text-align: right;
            margin-top: 50px;
            font-family: 'Helvetica', sans-serif;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }

        .next-chapter a {
            color: var(--primary-red);
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.85rem;
        }

        .project-close a {
            color: var(--primary-red);
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 1px;
        }

        /* BTN -- Explore */

        .btn-teal{
            display:inline-block;
            margin-top:10px;
            padding:7px 16px;
            border-radius:9px;
            text-decoration:none;
            font-size:.95rem;
            font-weight:600;
        
            background:linear-gradient(135deg,#0b5f7a,#17a2b8);
            color:#fff;
            border:1px solid rgba(0,0,0,.15);
        
            box-shadow:0 6px 16px rgba(23,162,184,.25);
            transition:.2s ease;
          }
        
          .btn-explore:hover{
            transform:translateY(-1px);
            box-shadow:0 10px 22px rgba(23,162,184,.35);
          }

/* NEW: Chapter Navigation Grid */
        .chapter-nav {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 50px;
        }

        .chapter-card {
            border: 1px solid #eee;
            border-left-color: var(--pa-blue);
            padding: 20px;
            text-decoration: none;
            color: var(--charcoal);
            transition: all 0.3s ease;
            transform:translateY(-1px);
            //box-shadow:0 10px 22px rgba(23,162,184,.35);
            //background:linear-gradient(135deg,#0b5f7a,#17a2b8);;
        }

        .chapter-card:hover {
            border-color: var(--pa-blue);
            background: var(--soft-ivory);
            box-shadow:0 10px 22px rgba(23,162,184,.35);
        }

        .chapter-card span {
            display: block;
            font-family: 'Helvetica', sans-serif;
            font-size: 0.7rem;
            text-transform: uppercase;
            color: var(--primary-red);
            margin-bottom: 5px;
        }

        .chapter-card h3 {
            margin: 0;
            font-size: 1.2rem;
            font-weight: normal;
        }

        .fr-hero-banner{
          width: 100%;
          overflow: hidden;
        }

        /* Master Banner Class - Desktop */
        .fr-hero-banner {
          width: 100%;
          height: 450px;
          /*background-image: var(--hero);*/
          background-position: center center;
          background-size: cover;
          background-repeat: no-repeat;
          border-bottom: 5px solid var(--primary-green);
          background-color: #2b2b2b;
        }

        /* Banner Class - Mobile */
        @media screen and (max-width: 768px) {
          .fr-hero-banner {
            height: 160px;
            /*background-position: 55% 70%;*/
          }
        }



        /*OLD -- Master Banner Class 
        .fr-hero-banner {
            width: 100%;
            height: 450px;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            border-bottom: 5px solid var(--primary-green);
            background-color: #2b2b2b; /* Fallback color *
        }*/
        
        /*OLD -- Master Banner Class - Mobile Reflow*
        @media screen and (max-width: 768px) {
            .fr-hero-banner {
                height: 200px !important;
                background-position: center bottom !important; 
            }
        }*/

        /*@media screen and (max-width: 768px) {
          .fr-hero-banner {
            height: 200px !important;
            background-size: contain !important;
            background-position: center center !important;
          }
        }*/

        footer { text-align: center; padding: 40px; background: var(--charcoal); color: #999; margin-top: 60px; }

/* --- MOBILE RESPONSIVE OVERRIDES --- */
@media screen and (max-width: 768px) {
    
    
    /* Scale title for smaller screens */
    .fr-header-content h1 {
        font-size: 1.8rem !important;
        padding: 0 10px !important;
    }

    /* Reflow container padding and width for mobile */
    .container {
        padding: 30px 20px 40px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
    }

    /* Force chapter cards to stack vertically */
    .chapter-nav {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Reset span for full-width featured cards */
    .chapter-card[style*="grid-column"] {
        grid-column: auto !important;
    }

    /* Make large tables scrollable horizontally on phones */
    .itinerary-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Prevent images or large blocks from overflowing */
    .pull-left, .pull-right {
        float: none !important;
        display: block !important;
        margin: 0 auto 20px !important;
        max-width: 100% !important;
    }
    /* New block for stacking columns on Chrome */
    /* 1. Force the Chapter Navigation to abandon the grid */
    .chapter-nav {
        display: block !important; /* Disables the 2-column grid completely */
        width: 100% !important;
    }

    /* 2. Force each Card to be full-width and clear any floats */
    .chapter-card {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        clear: both !important;
    }

    /* 3. Ensure the container isn't forcing a desktop width */
    .container {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
}