/* ========================================
   SAUGUS IRON WORKS - INTRODUCTION SECTION
   Modern CSS with 2000s Aesthetic
   ======================================== */

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    background-color: #FFFFFF;
    color: #000000;
    max-width: 840px;
    margin: 0 auto;
    padding: 20px;
}

/* Typography */
h1 {
    color: #000066;
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2;
}

h2 {
    color: #000066;
    font-size: 36px;
    font-weight: bold;
    margin: 20px 0;
}

h3 {
    color: #000066;
    font-size: 28px;
    font-weight: bold;
    margin: 15px 0;
}

/* Layout Components */
.ranger-section {
    display: grid;
    grid-template-columns: 216px 1fr;
    gap: 20px;
    margin-bottom: 30px;
    align-items: start;
}

.ranger-image {
    width: 216px;
    height: 216px;
}

.ranger-text {
    padding: 10px;
}

.ranger-face {
    margin: 20px 0;
}

.content-section {
    margin-bottom: 30px;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   INTRO PAGE 3 > INTRO_2 SPECIFIC STYLES
   ======================================== */

/* Horizontal image row */
.images-horizontal {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
    margin: 30px 0 50px 0;
}

/* Question and Answer Section */
.qa-section {
    margin: 40px 0;
}

.qa-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.qa-table tr {
    margin-bottom: 20px;
}

.qa-table td {
    padding: 15px 20px;
    vertical-align: middle;
}

.qa-table td.question {
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    width: 60%;
}

.qa-table td.answer {
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    width: 40%;
}

/* Color classes for questions and answers */
.color-new-england { color: #000066; }
.color-state { color: #990066; }
.color-coast { color: #009933; }
.color-direction { color: #FF6600; }

/* ========================================
   INTRO PAGE 4 > INTRO_3 SPECIFIC STYLES
   ======================================== */

/* Upper Half: Two Column Layout */
.intro3-upper {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 20px;
    margin-bottom: 30px;
}

.intro3-left {
    padding-right: 20px;
}

.intro3-right {
    display: flex;
    align-items: flex-start;
}

/* Maps Side by Side */
.maps-side-by-side {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 20px;
}

.intro-text {
    color: #000066;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* Passport Section with Styling */
.passport-section {
    background-color: #FFF9E6;
    border: 2px solid #CC0033;
    padding: 20px;
    width: 100%;
}

.passport-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.passport-text {
    color: #CC0033;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
}

/* Bottom Half: Full Width Text */
.intro3-lower {
    margin: 30px 0;
}

.info-text {
    color: #000066;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.4;
    margin: 20px 0;
}

.maps-row {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 20px 0;
}

/* ========================================
   INTRO PAGE 5 >TASK1_STAMPS SPECIFIC STYLES
   ======================================== */

/* Two Column Layout: 70% / 30% */
.task1-container {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 20px;
    margin-bottom: 30px;
}

.task1-left {
    padding-right: 20px;
}

.task1-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
}

/* Left Column Text Styles */
.task1-intro {
    color: #000066;
    font-size: 28px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 20px;
    line-height: 1.3;
}

.task1-callout {
    color: #000066;
    font-size: 36px;
    font-weight: bold;
    margin: 0;
}

.task1-instructions {
    color: #000066;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
    line-height: 1.3;
}

/* Green Background Boxes */
.green-box {
    background-color: #00CC00;
    padding: 15px 20px;
    margin-bottom: 15px;
}

.green-box.center-text {
    text-align: center;
}

/* Stamp Level Boxes */
.stamp-level {
    padding-left: 30px;
}

.stamp-level p {
    color: #000066;
    font-size: 32px;
    font-weight: bold;
    margin: 0;
}

/* Right Column Elements */
.right-item {
    width: 100%;
    padding-top: 80px;
}

/* Rewards Container */
.rewards-container {
    text-align: center;
}

.rewards-images {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 10px;
}

.rewards-text {
    color: #000066;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    margin-top: 10px;
}

/* ========================================
   INTRO PAGE 6 > TASK2_PORTFOLIO SPECIFIC STYLES
   ======================================== */

/* Top Section: Ranger Ron with Instructions */
.portfolio-header {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 40px;
}

.portfolio-intro {
    flex: 1;
}

.portfolio-intro p {
    color: #000066;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}

/* Middle Section: Portfolio Formula */
.portfolio-formula {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 40px 0;
}

.formula-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.formula-label {
    color: #000066;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 0;
}

.formula-symbol {
    display: flex;
    align-items: center;
}

/* Navigation Tip Section */
.anvil-tip-section {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 40px 0;
}

.tip-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tip-text p {
    margin: 0;
    line-height: 1.3;
}

/* ========================================
   INTRO PAGE 7 > QUICKFACTS1 SPECIFIC STYLES
   ======================================== */

/* Top Section: Text/Ranger Ron aligned with Mill Image */
.quickfacts-top {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.quickfacts-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 285px;
    justify-content: space-between;
}

.quickfacts-intro {
    color: #000066;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}

.quickfacts-right {
    flex-shrink: 0;
}

/* Assignment Section: Portfolio Icon and Text */
.assignment-section {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 40px 0;
}

.assignment-text {
    flex: 1;
}

.assignment-text p {
    color: #000066;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}

/* ========================================
   INTRO PAGE 8 > QUICKFACTS2 SPECIFIC STYLES
   Cloud-to-Oval Interactive Reveal
   ======================================== */

/* Body width override - needed for 3-column cloud grid (3×300px + 2×20px gap = 940px) */
body:has(.cloud-grid) {
    max-width: 1000px;
}

/* CSS Variables for Quickfacts2 */
:root {
  --qf2-cloud-width: 300px;
  --qf2-cloud-height: 180px;
  --qf2-gap: 20px;
  --qf2-oval-fill: #CB6666;
  --qf2-focus-outline: #FFD700;
  --qf2-blue-cloud: #3265CB;
  --qf2-purple-cloud: #9866C9;
}

/* Header Section */
.quickfacts2-header {
    text-align: center;
    margin-bottom: 30px;
}

.quickfacts2-header h1 {
    color: #000000;
    font-size: 56px;
    font-weight: bold;
    margin-bottom: 10px;
}

.instruction-text {
    color: #FF0000;
    font-size: 24px;
    font-weight: bold;
}

/* Centered Grid: 3 columns, 2 rows */
.cloud-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--qf2-cloud-width));
    gap: var(--qf2-gap);
    justify-content: center;
    max-width: calc(3 * var(--qf2-cloud-width) + 2 * var(--qf2-gap));
    margin: 0 auto 40px auto;
}

/* Cloud Item Container */
.cloud-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Interactive Cloud Button */
.cloud-btn {
    position: relative;
    width: var(--qf2-cloud-width);
    height: var(--qf2-cloud-height);
    border: 0;
    padding: 0;
    background: transparent;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

/* Focus Outline - Gold/Yellow */
.cloud-btn:focus {
    outline: 4px solid var(--qf2-focus-outline);
    outline-offset: 8px;
    border-radius: 12px;
}

/* Cloud SVG fills the button */
.cloud-svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Cloud Label (Question Text) */
.cloud-label {
    position: relative;
    z-index: 2;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 8px;
    color: #111;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
    display: inline-block;
    width: 60%;
    box-sizing: border-box;
}

/* Checkmark (Top-Right) */
.checkmark {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 4;
    opacity: 0;
    transform: translateY(-6px) scale(0.9);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
    pointer-events: none;
}

/* Show Checkmark When Revealed */
.cloud-btn.revealed .checkmark {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Oval Element (Hidden by Default) */
.oval {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    width: calc(var(--qf2-cloud-width) - 8px);
    height: calc(var(--qf2-cloud-height) - 8px);
    border-radius: 999px;
    background: var(--qf2-oval-fill);
    border: 5px solid #000;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.2, 0.9, 0.2, 1);
    text-align: center;
}

/* Oval Inner Content */
.oval-inner {
    color: #fff;
    width: 100%;
}

.oval-question {
    font-weight: 800;
    margin-bottom: 6px;
    font-size: 1rem;
}

.oval-answer {
    font-size: 1.05rem;
    line-height: 1.2;
}

/* Revealed State: Show Oval */
.cloud-btn.revealed .oval {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* Hide Cloud Label When Revealed */
.cloud-btn.revealed .cloud-label {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Fade Cloud SVG When Revealed */
.cloud-btn.revealed .cloud-svg {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Responsive: 2 columns on tablets */
@media (max-width: 920px) {
    .cloud-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
        max-width: 720px;
    }
}

/* Responsive: 1 column on phones */
@media (max-width: 520px) {
    :root {
        --qf2-cloud-width: 220px;
        --qf2-cloud-height: 120px;
    }
    
    .cloud-grid {
        grid-template-columns: repeat(1, minmax(160px, 1fr));
        max-width: 320px;
    }
    
    .cloud-label {
        font-size: 0.95rem;
    }
    
    .oval-question {
        font-size: 0.9rem;
    }
    
    .oval-answer {
        font-size: 0.95rem;
    }
    
    .quickfacts2-header h1 {
        font-size: 36px;
    }
    
    .instruction-text {
        font-size: 18px;
    }
}

/* =================================================
   INTRO PAGE 9 > TASK_BRIEFSUMMARY SPECIFIC STYLES
   ================================================ */

/* Top Section: Portfolio Icon and Text */
.summary-header {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 40px;
    padding-left: 25px;
}

.summary-text {
    flex: 1;
}

.summary-text p {
    color: #000066;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}

/* Middle Section: Ranger Ron and Blue Links Box */
.summary-middle {
    display: grid;
    grid-template-columns: 0.4fr 1fr;
    gap: 30px;
    margin: 40px 0;
}

.blue-links-box {
    background-color: #0033FF;
    padding: 30px 10px;
    text-align: center;
}

.blue-links-box p {
    margin: 15px 0;
}

.blue-links-box a {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: bold;
    text-decoration: underline;
    line-height: 1.5;
}

.blue-links-box a:hover {
    background-color: #FFFF99;
    color: #0033FF;
}

/* Bottom Section: Passport Stamp and Extra Credit */
.summary-bottom {
    display: grid;
    grid-template-columns: 0.5fr 100px 1fr;
    gap: 30px;
    margin: 30px 0;
}

/* Passport Stamp Box */
.passport-stamp-box {
    background-color: #FFF9E6;
    border: 2px solid #CC0033;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stamp-reminder-text {
    color: #CC0033;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 10px 0;
}

/* Extra Credit Box */
.extra-credit-box {
    background-color: #00FF00;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.extra-text {
    color: #000066;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    margin: 0;
}

/* ====================================================
   INTRO PAGE 9A > HISTORY ESSAY PAGES SPECIFIC STYLES
   ==================================================== */

/* Essay Header */
.essay-header {
    margin-bottom: 30px;
}

.essay-header h1 {
    color: #003366;
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

/* Essay Images */
.essay-image-full {
    display: block;
    width: 500px;
    height: auto;
    margin: 20px auto;
}

.essay-image-right {
    float: right;
    width: 239px;
    height: 157px;
    margin: 20px 0 20px 20px;
}

.essay-image-side {
    width: 370px;
    height: auto;
}

/* Essay Content with Paragraph Spacing */
.essay-content {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
}

.essay-content p {
    margin-bottom: 1.5em; /* White line between paragraphs */
    text-align: justify;
}

/* Paragraph with Image Layout */
.essay-paragraph-with-image {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 1.5em;
}

.essay-text-column p {
    margin-bottom: 0;
}

/* Essay Questions Section */
.essay-questions {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #003366;
}

.essay-questions p {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 1.5em;
}

/* ==================================================
   INTRO PAGE 10 > INTRO_4MEETSAMLIZ SPECIFIC STYLES
   ================================================== */

/* Top Section: Ranger Ron Left + Text */
.meet-top-section {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 40px;
}

.meet-text {
    flex: 1;
}

.meet-text p {
    color: #000066;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}

/* Middle Section: Text + Ranger Ron Right */
.meet-middle-section {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 40px;
}

.meet-text-center {
    flex: 1;
    text-align: center;
}

.meet-text-center p {
    color: #000066;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}

/* Bottom Section: Elizabeth and Samuel */
.meet-bottom-section {
    display: flex;
    grid-template-columns: 1fr 80px 1fr;
    gap: 10px;
    margin: 30px 0;
}

/* Individual Character Introduction */
.character-intro {
    display: flex;
    gap: 15px;
    align-items: column;
}

.character-text {
    flex: 1;
    text-align: right;
}

.character-text p {
    color: #000066;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}

/* ========================================
   INTRO PAGE 11 > THELETTER SPECIFIC STYLES
   ======================================== */

/* Header Section */
.letter-header {
    margin-bottom: 30px;
}

.letter-header h1 {
    color: #003366;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

/* Main Container: Audio + Location/Certificate */
.audio-location-container {
    display: flex;                    /* Creates flexible container */
    justify-content: space-between;   /* Pushes items to opposite edges */
    align-items: flex-end;            /* Aligns items to BOTTOM of container */
    gap: 20px;                        /* Space between left and right sections */
    margin: 30px 0;
}

/* Left Section: Audio Player */
.audio-player-section {
    display: flex;                    /* Makes ear icon + controls horizontal */
    align-items: center;              /* Centers ear icon vertically with audio */
    gap: 20px;                        /* Space between ear and audio controls */
    height: 80px;                     /* Sets container height */
}

.audio-icon {
    flex-shrink: 0;                   /* Prevents ear icon from shrinking */
}

.ear-icon {
    width: 84px;
    height: 68px;
    transition: filter 0.3s ease;
}

.ear-icon:hover {
    filter: hue-rotate(180deg) brightness(1.2);
}

.audio-controls {
    display: flex;
    flex-direction: column;           /* Stacks label above audio player */
    gap: 5px;
    justify-content: center;          /* Centers content vertically */
}

.audio-label {
    color: #000066;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

/* Style the HTML5 audio player */
audio {
    width: 100%;
    max-width: 350px;
    height: 40px;
    outline: 2px solid #4169E1;
    border-radius: 4px;
}

audio:focus {
    outline: 3px solid #FFD700;
    outline-offset: 2px;
}

/* Right Section: Location Header + Certificate */
.location-certificate-section {
    display: flex;                    /* Makes text + image vertical stack */
    flex-direction: row;           /* Stacks vertically */
    align-items: flex-end;            /* Right-aligns both text and image */
    justify-content: flex-end;        /* Pushes content to bottom */
    gap: 5px;                         /* Small gap between text and image */
}

.letter-location {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;              /* Keeps text on one line */
}

/* Letter Content */
.letter-content {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin: 30px 0;
}

.letter-content p {
    margin-bottom: 1.5em; /* White line between paragraphs */
    text-align: left;
}

.letter-signature {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    text-align: right;
    margin-right: 150px;              /* 100px from right edge */
    margin-bottom: 0.5em !important;
}

/* Character Images at Bottom */
.letter-characters {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 30px 0;
}

/* =====================================================
   INTRO PAGE 12 > TIMEWARP_TOIRONWORKS SPECIFIC STYLES
   ==================================================== */

/* Top Section: 3 Column Layout */
.timewarp-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
}

/* Column 1: Time Warp Machine Label + Image */
.timewarp-col1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.timewarp-label {
    color: #660099;
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

/* Column 2: Let's Travel Text */
.timewarp-col2 {
    background-color: #00FF00;
    padding: 20px 30px;
    text-align: center;
}

.timewarp-col2 h1 {
    color: #000066;
    font-size: 42px;
    font-weight: bold;
    margin: 0 0 20px 0;
}

.travel-instructions {
    color: #000066;
    font-size: 28px;
    font-weight: bold;
    margin: 5px 0;
    line-height: 1.3;
}

/* Column 3: Ranger Ron */
.timewarp-col3 {
    display: flex;
    align-items: center;
}

/* Middle Section: Motion Blur Time Travel Effect */
.timewarp-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 40px 0;
    flex-wrap: wrap;
}

/* Bottom Section: Welcome Message and Forge */
.timewarp-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    margin: 40px 0;
}

.welcome-text p {
    color: #000066;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
}

.forge-image {
    flex-shrink: 0;
}

/* Character Section */
.timewarp-characters {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

/* ==================================================
   INTRO PAGE 13 > IRONMAKINGDIAGRAM SPECIFIC STYLES
   ================================================== */

/* Page Title */
.iron-diagram-title {
    color: #000066;
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}

/* Top Section: Firewood to Charcoal */
.iron-flow-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.firewood-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.charcoal-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.flow-label {
    color: #000066;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

.flow-label-under {
    color: #000066;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

.flow-arrow-horizontal {
    flex-shrink: 0;
}

/* Main Flow Section */
.iron-flow-main {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 40px;
    margin: 40px 0;
    align-items: start;
}

/* Left Column: Materials */
.materials-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.material-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.material-label {
    color: #000066;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

.plus-symbol {
    margin: 10px 0;
}

.flow-arrow-down {
    margin-top: 20px;
}

/* Right Side: Process Explanation */
.process-explanation {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.process-text {
    color: #000066;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
}

.characters-section {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Rollover Instruction */
.rollover-instruction {
    color: #FF0000;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 30px 0 20px 0;
}

/* Buildings Section */
.buildings-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 30px 0 40px 0;
}

.building-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Building Image Button (Interactive) */
.building-button {
    position: relative;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    width: 100%;
    max-width: 280px;
    margin-bottom: 15px;
}

/* Building Images */
.building-exterior,
.building-interior {
    display: block;
    width: 100%;
    height: auto;
    border: 2px solid #666666;
}

/* Hide interior by default */
.building-interior {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show interior on hover/focus */
.building-button:hover .building-interior,
.building-button:focus .building-interior {
    opacity: 1;
}

/* Touch device support - tap to toggle */
.building-button:active .building-interior {
    opacity: 1;
}

/* Focus outline for keyboard navigation */
.building-button:focus {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
}

/* Building Title */
.building-title {
    color: #000066;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 10px 0;
}

/* Building Description */
.building-description {
    color: #000066;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    text-align: left;
    padding: 0 10px;
    margin: 0;
}

/* ======================================================
   INTRO PAGE 14 > COLONIAL_PP1_POSTCARD SPECIFIC STYLES
   ====================================================== */

/* Page Header */
.postcard-header {
    text-align: center;
    margin-bottom: 30px;
}

.postcard-header h1 {
    color: #000066;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

.passport-assignment {
    color: #990099;
}

.postcard-header h2 {
    color: #000066;
    font-size: 32px;
    font-weight: bold;
    margin: 10px 0;
}

/* Top Section: Icons and Instructions */
.postcard-top {
    display: grid;
    grid-template-columns: 0.2fr 1fr;
    gap: 5px;
    align-items: center;
    margin-bottom: 10px;
}

/* Column 1: Postcard images Ron and passport */
.postcard-col1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.postcard-instructions {
    flex: 1;
}

.postcard-instructions p {
    color: #000066;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 1em;
}

/* Middle Section: Green Instruction Box */
.postcard-middle {
    display: grid;
    grid-template-columns: 0.35fr .65fr;
    gap: 30px;
    margin: 30px 0;
}

/* Icons */
.portfolio-stamp-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 10px 0;
}

.postcard-instruction-box {
    background-color: #00FF00;
    padding: 15px 30px;
    margin: 5px auto;
    max-width: 700px;
    text-align: center;
}

.postcard-instruction-box p {
    color: #000066;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
}

.postcard-instruction-box a {
    color: #0000FF;
    text-decoration: underline;
}

.postcard-instruction-box a:hover {
    background-color: #FFFF99;
}

/* Bottom Section: Map and Question */
.postcard-bottom {
    margin: 40px 0;
}

.map-question-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.question-ron {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.map-question {
    color: #000066;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 0;
}

.england-map {
    border: 2px solid #0066FF;
    background-color: #0066FF;
    padding: 5px;
}

/* ====================================================
   INTRO PAGE 14A > SIW_POSTCARDS PAGE SPECIFIC STYLES
   ==================================================== */

/* Page Title */
.postcards-title {
    color: #003366;
    font-size: 42px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.postcards-intro {
    color: #000066;
    font-size: 20px;
    text-align: center;
    margin-bottom: 30px;
}

/* Postcards Table */
.postcards-table {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px auto;
    border-collapse: collapse;
    border: 2px solid #003366;
}

.postcards-table thead {
    background-color: #003366;
    color: #FFFFFF;
}

.postcards-table th {
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    border: 1px solid #FFFFFF;
}

.postcards-table td {
    padding: 15px;
    border: 1px solid #CCCCCC;
    vertical-align: top;
}

.postcards-table tbody tr:nth-child(odd) {
    background-color: #F5F5F5;
}

.postcards-table tbody tr:nth-child(even) {
    background-color: #FFFFFF;
}

/* Postcard Number Column */
.postcard-number {
    font-size: 24px;
    font-weight: bold;
    color: #003366;
    text-align: center;
    width: 80px;
}

/* Postcard Image Column */
.postcard-image-cell {
    text-align: center;
    width: 400px;
}

.postcard-thumbnail {
    max-width: 350px;
    height: auto;
    border: 2px solid #666666;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.postcard-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.postcard-caption {
    font-size: 14px;
    font-style: italic;
    color: #333333;
    margin-top: 10px;
}

/* Credit Column */
.postcard-credit {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    width: 200px;
}

/* =====================================================
   INTRO PAGE 15 > PROCESS.HTML - CHOOSE YOUR ADVENTURE
   Triangle Layout: SM at top, two cards at bottom
   ==================================================== */

/* Container for entire process page */
main {
    max-width: 815px;
    margin: 0 auto;
}

/* Top row: Orange boxes flank SM card with no gaps */
.process-top-row {
    display: grid;
    grid-template-columns: 207.5px 400px 207.5px; /* Total: 815px */
    gap: 0; /* No gaps between elements */
    align-items: stretch;
    margin-bottom: 20px; /* 20px gap to bottom row */
}

/* Orange text boxes - equal widths */
.process-orange-box {
    background-color: #FF6633;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    width: 100%;
    height: 100%; /* Match height of SM card */
}

.orange-box-text {
    color: #000099;
    font-size: 24px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap; /* Keeps FORGE AHEAD on one line */
}

/* Specific spacing for FORGE AHEAD and MAKE YOUR CHOICE */
.orange-box-text.forge-ahead {
    margin-bottom: 0;
}

.orange-box-text.make-choice {
    margin-top: 20px;
    margin-bottom: 0;
}

/* Adventure card with image and overlay - clickable */
.process-adventure-card {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    outline-offset: 4px;
}

.process-adventure-card:focus {
    outline: 3px solid #FFD700;
}

.process-adventure-card:focus .adventure-overlay {
    outline: 2px solid #FFFFFF;
    outline-offset: -2px;
}

/* All adventure card images - exactly 400px wide */
.adventure-image {
    width: 400px;
    height: auto;
    display: block;
    border: 3px solid #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Green overlay box at top of image */
.adventure-overlay {
    position: absolute;
    top: 10px; /* 10px from top to show image above */
    left: 40px; /* 40px from left edge */
    right: 40px; /* 40px from right edge */
    width: calc(100% - 80px); /* Total width minus 80px (40px each side) */
    height: 40px;
    background-color: rgba(0, 204, 0, 0.80); /* Green overlay 80% opacity */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    border-top: 2px solid #006600;
    border-bottom: 2px solid #006600;
    border-left: 2px solid #006600; /* Add left border for definition */
    border-right: 2px solid #006600; /* Add right border for definition */
    transition: background-color 0.3s ease;
    pointer-events: none;
}

.adventure-title {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.adventure-subtitle {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Hover effects */
.process-adventure-card:hover {
    transform: translateY(-5px);
}

.process-adventure-card:hover .adventure-image {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    border-color: #00CC00;
}

.process-adventure-card:hover .adventure-overlay {
    background-color: rgba(0, 255, 0, 0.98);
    border-bottom-color: #00FF00;
}

/* Active/pressed state */
.process-adventure-card:active {
    transform: translateY(-2px);
}

.process-adventure-card:active .adventure-overlay {
    background-color: rgba(0, 180, 0, 0.98);
}

/* Bottom row: Two adventure cards side by side */
.process-bottom-row {
    display: flex;
    justify-content: center;
    gap: 15px; /* 15px between the two cards */
    margin-bottom: 40px;
}

/* Ensure bottom row cards are also 400px */
.process-bottom-row .process-adventure-card {
    width: 400px;
    flex-shrink: 0; /* Don't shrink below 400px */
}

/* ===============================================
   TEACHER PAGE 2 > WORKSHEET MATRIX PAGE STYLES
   =============================================== */

.worksheet-header {
    text-align: center;
    margin-bottom: 40px;
}

.worksheet-header h1 {
    color: #003366;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.3;
}

.worksheet-intro {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* Worksheet table */
.worksheet-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
}

.worksheet-cell {
    padding: 20px;
    text-align: center;
    vertical-align: top;
    border: 1px solid #CCCCCC;
}

.worksheet-cell-wide {
    padding: 20px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #CCCCCC;
}

.worksheet-section-header {
    background-color: #003366;
    padding: 15px;
    text-align: center;
    border: none;
}

.worksheet-section-header h2 {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.worksheet-label {
    color: #003366;
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 15px 0;
}

/* Worksheet thumbnail links */
.worksheet-link {
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.worksheet-link:focus {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
}

.worksheet-thumb {
    max-width: 200px;
    height: auto;
    border: 2px solid #666;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.worksheet-link:hover .worksheet-thumb {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-color: #003366;
}

/* Checklist HTML/PDF links */
.checklist-links {
    margin-top: 10px;
}

.checklist-html-link,
.checklist-pdf-link {
    color: #0000FF;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
    transition: background-color 0.2s ease;
}

.checklist-html-link:hover,
.checklist-pdf-link:hover {
    background-color: #FFFF99;
}

.checklist-html-link:focus,
.checklist-pdf-link:focus {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
}

.link-separator {
    margin: 0 10px;
    color: #666;
}

/* =========================================================
   TEACHER PAGE 2A > CHECKLIST PAGE STYLES (Print-Friendly)
   ========================================================= */

.checklist-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.checklist-header {
    margin-bottom: 30px;
}

.checklist-header h1 {
    color: #003366;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}

.checklist-header h2 {
    color: #003366;
    font-size: 22px;
    font-weight: bold;
    margin: 0;
}

/* Checklist table */
.checklist-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.checklist-table tr {
    border-bottom: 1px solid #DDDDDD;
}

.checklist-table tr:last-child {
    border-bottom: none;
}

/* Checkbox column */
.checkbox-cell {
    width: 50px;
    text-align: center;
    vertical-align: middle;
    padding: 15px 10px;
}

/* Hide default checkbox, create custom one */
.task-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom checkbox visual */
.checkbox-visual {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid #003366;
    background-color: #FFFFFF;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-visual:hover {
    border-color: #0066CC;
    box-shadow: 0 0 5px rgba(0, 102, 204, 0.3);
}

/* Focus state */
.task-checkbox:focus + .checkbox-visual {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
}

/* Checked state - show checkmark */
.task-checkbox:checked + .checkbox-visual::after {
    content: '✓';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: bold;
    color: #003366;
}

/* Stamp cell (no checkbox) */
.stamp-cell {
    padding: 10px;
}

.stamp-link {
    display: inline-block;
    transition: transform 0.3s ease;
}

.stamp-link:focus {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
    border-radius: 3px;
}

.passport-stamp {
    width: 49px;
    height: 45px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.stamp-link:hover .passport-stamp {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.stamp-link:focus .passport-stamp {
    transform: scale(1.15);
}

/* Task number column */
.task-number {
    width: 50px;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    font-weight: bold;
    color: #003366;
    padding: 15px 10px;
}

/* Task description column */
.task-description {
    text-align: left;
    vertical-align: middle;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    padding: 15px 20px;
}

/* Checklist footer */
.checklist-footer {
    margin: 30px 0;
    padding: 20px;
    background-color: #F0F8FF;
    border: 2px solid #003366;
    text-align: center;
}

.checklist-footer p {
    font-size: 18px;
    font-weight: bold;
    color: #003366;
    margin: 0;
}

/* ========================================
   COLONIAL LIFE (CL1.HTML) STYLES
   ======================================== */

/* Top section: Ranger Ron + Title */
.colonial-header {
    display: grid;
    grid-template-columns: 0.3fr 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 40px;
}

.colonial-ranger {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 50px;
}

.colonial-title-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.colonial-main-title {
    color: #000066;
    font-size: 48px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

.colonial-subtitle {
    color: #000066;
    font-size: 36px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

.colonial-intro-text {
    color: #000066;
    font-size: 28px;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
}

/* Four Quadrant Grid */
.colonial-quadrants {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.colonial-quadrant {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    min-height: 250px;
    text-decoration: none;
    border: 3px solid #333;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.colonial-quadrant:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.colonial-quadrant:focus {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
}

.colonial-quadrant:active {
    transform: translateY(-2px);
}

/* Quadrant color backgrounds */
.quadrant-blue {
    background-color: #ADD8E6; /* Light blue */
}

.quadrant-yellow {
    background-color: #FFFF00; /* Yellow */
}

.quadrant-red {
    background-color: #FF0000; /* Red */
}

.quadrant-green {
    background-color: #00CC33; /* Green */
}

/* Quadrant text styling */
.quadrant-question-intro {
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 15px;
    width: 100%;
}

.quadrant-question-main {
    color: #000000;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
}

/* Bottom section - Centered elements with gap */
.colonial-bottom {
    display: flex;
    justify-content: center;  /* CHANGED: Center horizontally */
    align-items: center;
    gap: 50px;  /* ADDED: 50px gap between elements */
    margin-top: 40px;
}

.colonial-more-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.anvil-link {
    display: inline-block;
    transition: transform 0.3s ease;
}

.anvil-link:hover {
    transform: scale(1.1);
}

.anvil-link:focus {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
}

.more-info-text {
    font-weight: bold;
    color: #000066;
    font-size: 16px;
    margin: 0;
}

/* ============================================
   COLONIAL Q&A ANSWER PAGES (CL1ANSWER*.HTML)
   ============================================= */

.colonial-qa-page {
    max-width: 800px;
    margin: 0 auto 40px auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Question Box (maintains original color) */
.qa-question-box {
    padding: 30px;
    border: 3px solid #333;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qa-blue {
    background-color: #ADD8E6; /* Light blue - same as quadrant */
}

.qa-yellow {
    background-color: #FFFF00; /* Yellow */
}

.qa-red {
    background-color: #FF0000; /* Red */
}

.qa-green {
    background-color: #00CC33; /* Green */
}

.qa-question-intro {
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    margin: 0;
}

.qa-question-main {
    color: #000000;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    margin: 0;
}

/* Answer Box (Light Beige) */
.qa-answer-box {
    background-color: #F5F5DC; /* Beige */
    border: 3px solid #333;
    border-top: none; /* Connect to question box */
    padding: 40px;
    text-align: center;
}

.qa-answer-title {
    color: #333333;
    font-size: 48px;
    font-weight: bold;
    margin: 0 0 30px 0;
}

.qa-answer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.qa-answer-list li {
    color: #333333;
    font-size: 48px;
    font-weight: bold;
    margin: 15px 0;
    padding-left: 100px;
    text-align: left;
}

.qa-answer-list li::before {
    content: '• ';
    color: #333333;
}

/* Text-based answer (for answers without bullet lists) */
.qa-answer-text {
    max-width: 600px;
    margin: 0 auto;
}

.qa-answer-text p {
    color: #333333;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
    text-align: center;
}

/* ========================================
   COLONIAL LIFE CL2.HTML STYLES
   ======================================== */

/* Top section: 3 columns with vertically centered content */
.cl2-top-section {
    display: grid;
    grid-template-columns: 1fr 500px 1fr;
    gap: 10px;
    align-items: center; /* Vertically center all columns */
    margin-bottom: 40px;
}

/* Column 1: Ranger Ron + Right-aligned text */
.cl2-column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding-right: 5px;
}

.cl2-ranger-image {
    display: block;
}

.cl2-text-right {
    color: #000099;
    font-size: 24px;
    font-weight: bold;
    text-align: right;
    margin: 0;
    line-height: 1.3;
    max-width: 250px;
}

/* Column 2: Main photo */
.cl2-column-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cl2-main-image {
    display: block;
    border: 3px solid #666;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Column 3: Ranger Ron face + Left-aligned text */
.cl2-column-3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding-left: 10px;
}

.cl2-ranger-face {
    display: block;
}

.cl2-text-left {
    color: #000099;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    margin: 0;
    line-height: 1.3;
    max-width: 250px;
}

/* Bottom section: 4 Fact Clouds - FIXED */
.cl2-fact-clouds {
    display: grid;
    grid-template-columns: repeat(4, 243px); /* Fixed width columns to match cloud size */
    gap: 0px; /* Reduced gap */
    margin-bottom: 40px;
    justify-content: center; /* Center the entire grid */
    max-width: 1000px; /* Prevent overflow */
    margin-left: auto;
    margin-right: auto;
}

.cl2-fact-item {
    display: flex;
    justify-content: center;
}

/* Fact cloud container - LARGER SIZE */
.cl2-fact-cloud {
    position: relative;
    width: 243px;  /* 25% larger than 194px */
    height: 156px; /* 25% larger than 125px */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cloud SVG - FILLS CONTAINER */
.fact-cloud-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Fact text - SLIGHTLY LARGER */
.fact-text {
    position: relative;
    z-index: 2;
    text-align: center;
    font-weight: bold;
    font-size: 20px; /* Increased from 18px */
    padding: 5px;
    color: #000000;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
    display: inline-block;
    width: 70%;
}

/* Cloud colors */
.fact-aquamarine svg path {
    fill: #7FFFD4 !important; /* Aquamarine */
}

.fact-lightpurple svg path {
    fill: #DDA0DD !important; /* Light purple (Plum) */
}

.fact-lightgreen svg path {
    fill: #90EE90 !important; /* Light green */
}

.fact-lightorange svg path {
    fill: #FFB347 !important; /* Light orange */
}

/* ========================================
   CL2 RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1000px) {
    .cl2-top-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cl2-column-1,
    .cl2-column-3 {
        align-items: center;
        padding: 0;
    }

    .cl2-text-right,
    .cl2-text-left {
        text-align: center;
        max-width: 100%;
    }

    .cl2-main-image {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 800px) {
    .cl2-fact-clouds {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .cl2-text-right,
    .cl2-text-left {
        font-size: 22px;
    }

    .fact-text {
        font-size: 16px;
    }
}

@media (max-width: 500px) {
    .cl2-fact-clouds {
        grid-template-columns: 1fr;
    }

    .cl2-text-right,
    .cl2-text-left {
        font-size: 18px;
    }

    .fact-text {
        font-size: 14px;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .cl2-fact-cloud {
        page-break-inside: avoid;
    }
}

/* ========================================
   COLONIAL LIFE CL3.HTML STYLES
   ======================================== */

/* Top section: Ranger Ron (30%) + Text (70%) */
.cl3-top-section {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 20px;
    align-items: center;
    margin-bottom: 40px;
}

.cl3-ranger-column {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.cl3-text-column {
    display: flex;
    align-items: center;
}

.cl3-intro-text {
    color: #000066;
    font-size: 28px;
    font-weight: bold;
    text-align: left;
    line-height: 1.4;
    margin: 0;
}

/* Middle section: Passport icon + Assignment title */
.cl3-middle-section {
    margin-bottom: 40px;
}

.cl3-passport-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.cl3-passport-icon {
    flex-shrink: 0;
}

.cl3-assignment-text {
    flex: 1;
}

.cl3-assignment-title {
    color: #000066;
    font-size: 36px;
    font-weight: bold;
    margin: 0 0 10px 0;
}

.cl3-assignment-subtitle {
    color: #000066;
    font-size: 28px;
    margin: 0;
}

/* Bottom section: Stamp box + Anvil link */
.cl3-bottom-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.cl3-stamp-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cl3-anvil-column {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cl3-anvil-link {
    display: inline-block;
    transition: transform 0.3s ease;
}

.cl3-anvil-link:hover {
    transform: scale(1.1);
}

.cl3-anvil-link:focus {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
}

.cl3-directions-text {
    color: #000066;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}

/* ========================================
   CL_PP2_COMPARISON.HTML STYLES
   ======================================== */

.comparison-header {
    text-align: left;
    margin-bottom: 30px;
}

.comparison-header h1 {
    color: #000066;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

.comparison-header h2 {
    color: #000066;
    font-size: 28px;
    font-weight: bold;
    margin: 10px 0;
}

.comparison-instructions {
    max-width: 900px;
    margin: 0 auto 40px auto;
}

.comparison-intro {
    color: #000066;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 30px;
}

/* Scholastic link section */
.comparison-link-section {
    display: flex;
    justify-content: flex-end;
    padding-right: 100px;
    gap: 20px;
    margin-bottom: 40px;
}

.anvil-resource-link {
    display: inline-block;
    transition: transform 0.3s ease;
}

.anvil-resource-link:hover {
    transform: scale(1.1);
}

.anvil-resource-link:focus {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
}

.resource-text {
    color: #000066;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
}

/* Portfolio assignments */
.comparison-assignments {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
}

.portfolio-assignment {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.portfolio-icon {
    flex-shrink: 0;
}

.assignment-content {
    flex: 1;
}

.assignment-text {
    color: #000066;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
}

/* ========================================
   CL3 RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 900px) {
    .cl3-top-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cl3-ranger-column {
        justify-content: center;
    }

    .cl3-intro-text {
        font-size: 22px;
        text-align: center;
    }

    .cl3-bottom-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cl3-anvil-column {
        justify-content: center;
    }

    .cl3-assignment-title {
        font-size: 28px;
    }

    .cl3-assignment-subtitle {
        font-size: 22px;
    }

    .comparison-link-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .portfolio-assignment {
        flex-direction: column;
        align-items: center;
    }

    .assignment-text {
        font-size: 22px;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .cl3-intro-text {
        font-size: 18px;
    }

    .cl3-assignment-title {
        font-size: 24px;
    }

    .cl3-assignment-subtitle {
        font-size: 18px;
    }

    .comparison-intro,
    .resource-text,
    .assignment-text {
        font-size: 18px;
    }
}

/* ==============================================
   removed SPIDER_DINNER.HTML STYLES - separate
   ============================================== */



/* ========================================
   CSS-BASED NAVIGATION ARROWS
   ======================================== */

.navigation {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 30px 0;
    align-items: center;
}

/* Navigation Button Base - Replicate original arrow appearance */
.nav-button {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    display: inline-block;
    text-decoration: none;
}

/* Arrow SVG Container */
.nav-button svg {
    width: 40px;
    height: 40px;
    display: block;
}

/* Back Arrow - Blue gradient background */
.nav-button.back {
    background: linear-gradient(135deg, #4169E1 0%, #1E90FF 50%, #87CEEB 100%);
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Forward Arrow - Blue gradient background */
.nav-button.forward {
    background: linear-gradient(-135deg, #4169E1 0%, #1E90FF 50%, #87CEEB 100%);
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Hover State - Brightens and slightly enlarges */
.nav-button:hover {
    transform: scale(1.05);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1);
    transition: all 0.2s ease;
}

/* Active/Click State */
.nav-button:active {
    transform: scale(0.98);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    filter: brightness(0.95);
}

/* Focus State for Keyboard Navigation */
.nav-button:focus {
    outline: 3px solid #FFD700;
    outline-offset: 2px;
}

/* Arrow Paths - White color to contrast with blue background */
.nav-button path {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Accessibility - Screen Reader Text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 800px) {
    body {
        padding: 10px;
    }

    .ranger-section {
        grid-template-columns: 1fr;
    }

    .images-horizontal {
        flex-direction: column;
        align-items: center;
    }

    .intro3-upper {
        grid-template-columns: 1fr;
    }

    .task1-container {
        grid-template-columns: 1fr;
    }

    .task1-right {
        align-items: center;
    }

    .portfolio-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .portfolio-formula {
        flex-direction: column;
        gap: 20px;
    }

    .anvil-tip-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .quickfacts-top {
        flex-direction: column;
        align-items: center;
    }

    .quickfacts-left {
        height: auto;
    }

    .assignment-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .summary-header {
        flex-direction: column;
        align-items: center;
        padding-left: 0;
    }

    .summary-bottom {
        grid-template-columns: 1fr;
    }

    .essay-paragraph-with-image {
        grid-template-columns: 1fr;
    }

    .essay-image-right {
        float: none;
        display: block;
        margin: 20px auto;
    }

    .meet-top-section,
    .meet-middle-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .meet-text-center {
        text-align: center;
    }

    .character-intro {
        flex-direction: column;
        align-items: center;
    }

    .character-text {
        text-align: center;
    }

    .postcard-top {
        flex-direction: column;
        align-items: center;
    }

    .postcard-instructions p {
        font-size: 20px;
    }

    .map-question-section {
        flex-direction: column;
    }

    .postcards-table {
        display: block;
        overflow-x: auto;
    }

    .postcard-thumbnail {
        max-width: 250px;
    }

    .iron-flow-top {
        flex-direction: column;
    }

    .iron-flow-main {
        grid-template-columns: 1fr;
    }

    .buildings-section {
        grid-template-columns: 1fr;
    }

    .building-button {
        max-width: 100%;
    }

    .process-text {
        font-size: 20px;
    }

    .timewarp-top {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .timewarp-bottom {
        grid-template-columns: 1fr;
    }

    .welcome-text p {
        font-size: 20px;
    }

    .audio-location-container {
        flex-direction: column;
        align-items: center;
    }

    .audio-player-section {
        height: auto;
    }

    .location-certificate-section {
        align-items: center;
    }

    audio {
        max-width: 100%;
    }

    .letter-content {
        font-size: 14px;
    }

    .letter-signature {
        margin-right: 20px;
    }

    .facts-row {
        flex-direction: column;
        align-items: center;
    }

    .fact-cloud {
        width: 90%;
        max-width: 300px;
    }

    .maps-side-by-side {
        flex-direction: column;
        align-items: center;
    }

    .qa-table td.question,
    .qa-table td.answer {
        display: block;
        width: 100%;
        font-size: 24px;
    }
    
    h1 {
        font-size: 32px;
    }
    
    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 24px;
    }

    .intro-text,
    .info-text,
    .passport-text,
    .task1-intro,
    .task1-callout,
    .task1-instructions,
    .rewards-text,
    .quickfacts-intro,
    .assignment-text p,
    .summary-text p,
    .meet-text p,
    .meet-text-center p,
    .character-text p {
        font-size: 20px;
    }

    .portfolio-intro p {
        font-size: 24px;
    }

    .stamp-level p {
        font-size: 24px;
    }

    .quickfacts2-header h1 {
        font-size: 36px;
    }

    .instruction-text {
        font-size: 18px;
    }

    .cloud-question {
        font-size: 36px;
    }

    .cloud-answer {
        font-size: 16px;
    }

    .essay-content {
        font-size: 14px;
    }

    .passport-section {
        margin-top: 20px;
    }

    .maps-row {
        flex-direction: column;
    }

    .worksheet-table {
        display: block;
        overflow-x: auto;
    }
    
    .worksheet-thumb {
        max-width: 150px;
    }
    
    .worksheet-label {
        font-size: 16px;
    }
    
    .task-description {
        font-size: 14px;
    }

/* ========================================
   TEACHER PAGES RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 500px) {
    .worksheet-cell {
        display: block;
        width: 100%;
    }
    
    .worksheet-thumb {
        max-width: 200px;
    }
    
    .checklist-table {
        font-size: 14px;
    }
    
    .task-number {
        font-size: 18px;
    }

}

/* ========================================
   PROCESS PAGE RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 850px) {
    main {
        max-width: 100%;
        padding: 0 20px;
    }

    /* Reduce all elements proportionally */
    .process-top-row {
        grid-template-columns: 1fr 350px 1fr;
    }
    
    .adventure-image {
        width: 350px;
    }
    
    .process-bottom-row .process-adventure-card {
        width: 350px;
    }
    
    .orange-box-text {
        font-size: 20px;
    }
}

@media (max-width: 750px) {
    /* Stack top row vertically */
    .process-top-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .process-orange-box {
        min-height: 100px;
    }
    
    /* Center single adventure card */
    .process-adventure-card {
        margin: 0 auto;
    }
    
    /* Stack bottom row vertically */
    .process-bottom-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

@media (max-width: 450px) {
    .adventure-image {
        width: 100%;
        max-width: 350px;
    }
    
    .process-bottom-row .process-adventure-card {
        width: 100%;
        max-width: 350px;
    }
    
    .orange-box-text {
        font-size: 18px;
        white-space: normal;
    }
    
    .adventure-title {
        font-size: 16px;
    }
    
    .adventure-subtitle {
        font-size: 12px;
    }
    
    .adventure-overlay {
        height: 35px;
    }
}

/* ========================================
   RESPONSIVE DESIGN FOR CHECKLIST
   ======================================== */

@media (max-width: 800px) {
    .checklist-table {
        font-size: 14px;
    }
    
    .task-number {
        font-size: 18px;
    }
    
    .task-description {
        font-size: 14px;
    }
}

@media (max-width: 500px) {
    .checkbox-visual {
        width: 20px;
        height: 20px;
    }
    
    .task-checkbox:checked + .checkbox-visual::after {
        font-size: 16px;
    }
    
    .task-number {
        width: 40px;
        font-size: 16px;
    }
    
    .task-description {
        font-size: 13px;
    }
}

/* ========================================
   COLONIAL LIFE RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 900px) {
    .colonial-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .colonial-main-title {
        font-size: 36px;
    }

    .colonial-subtitle {
        font-size: 28px;
    }

    .colonial-intro-text {
        font-size: 20px;
    }

    .colonial-quadrants {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .colonial-quadrant {
        min-height: 200px;
    }

    .quadrant-question-intro {
        font-size: 18px;
    }

    .quadrant-question-main {
        font-size: 20px;
    }

    .qa-answer-title {
        font-size: 36px;
    }

    .qa-answer-list li {
        font-size: 36px;
    }
}

@media (max-width: 600px) {
    .colonial-main-title {
        font-size: 28px;
    }

    .colonial-subtitle {
        font-size: 22px;
    }

    .colonial-intro-text {
        font-size: 18px;
    }

    .quadrant-question-intro {
        font-size: 16px;
    }

    .quadrant-question-main {
        font-size: 18px;
    }

    .colonial-bottom {
        flex-direction: column;
        gap: 20px;
    }

    .qa-question-intro {
        font-size: 18px;
    }

    .qa-question-main {
        font-size: 20px;
    }

    .qa-answer-title {
        font-size: 28px;
    }

    .qa-answer-list li {
        font-size: 28px;
    }
}

/* Colonial Life Responsive text answer */
@media (max-width: 900px) {
    .qa-answer-text p {
        font-size: 36px;
    }
}

@media (max-width: 600px) {
    .qa-answer-text p {
        font-size: 28px;
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .adventure-overlay {
        background-color: rgba(0, 204, 0, 1); /* Solid green */
        border: 2px solid #FFFFFF;
    }
    
    .process-adventure-card:focus .adventure-overlay {
        outline: 3px solid #FFFF00;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .process-adventure-card {
        transition: none;
    }
    
    .process-adventure-card:hover {
        transform: none;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .navigation {
        display: none;
    }
    
    body {
        max-width: 100%;
        padding: 0;
    }
}


/* Print styles */
@media print {
    .process-adventure-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }


/* ========================================
   PRINT STYLES FOR CHECKLIST
   ======================================== */

@media print {
    /* Remove page margins and navigation */
    body {
        margin: 0;
        padding: 0;
    }
    
    .checklist-page {
        max-width: 100%;
        padding: 20px;
    }
    
    .navigation {
        display: none;
    }
    
    /* Prevent page breaks inside rows */
    .checklist-table tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    /* Make custom checkbox print-friendly */
    .checkbox-visual {
        border: 2px solid #000;
        background-color: #FFFFFF;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }
    
    /* Ensure checkmark prints in black */
    .task-checkbox:checked + .checkbox-visual::after {
        color: #000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }
    
    /* Ensure stamp image prints */
    .passport-stamp {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }
    
    .stamp-link {
        pointer-events: none;
    }
    
    /* Simplify footer for printing */
    .checklist-footer {
        background-color: #FFFFFF;
        border: 2px solid #000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }
    
    /* Ensure all colors print */
    .checklist-header h1,
    .checklist-header h2,
    .task-number,
    .checklist-footer p {
        color: #000;
    }
    
    /* Ensure borders print */
    .checklist-table tr {
        border-bottom: 1px solid #000;
    }
}