/* ============================================================
   FILE NOTES & FONTS
   - URL behavior note
   - Web fonts
============================================================ */

/* Relative URLs in a CSS file are always interpreted
   relative to the location of the CSS file, NOT the HTML file
   they are called from. */

@font-face { /* Oranienbaum */
    font-display: swap;
    font-family: 'Oranienbaum';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/oranienbaum-v15-latin-ext_latin-regular.ttf') format('truetype');
}

@font-face { /* Playfair Display regular */
    font-display: swap;
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/playfair-display-v30-latin-ext_latin-regular.ttf') format('truetype');
}

@font-face { /* Playfair Display italic */
    font-display: swap;
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/playfair-display-v30-latin-ext_latin-italic.ttf') format('truetype');
}

/* ============================================================
   GLOBAL PAGE STYLES & UTILITIES
   - Background, base typography, global links
   - Global utility spans
============================================================ */

html {
    scroll-padding-top: 1rem;
}

body {
    background-image: url(../graphics/furley_bg.png);
    font-family: Georgia, "Times New Roman", Times, serif;
}

a {
    color: #a09f9d;
}

    a:hover {
        color: black;
        transition: color 0.5s;
    }

.noBreakSpan { /* prevent wrapping in special spans */
    display: inline-block; /* needed for reliable behavior */
    white-space: nowrap;
}


/* External-link arrow (always visible) */
a.external::after {
    color: lightcoral;
    content: " ↗";
    font-size: 0.7rem;
    font-weight: bold;
}

/* Parent anchor must be positioned for the tooltip to be centered */
a.external {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

    /* Tooltip (CSS-only) */
    a.external::before {
        background: #333;
        border-radius: 0.3rem;
        color: #fff;
        content: "This link requires an internet connection";
        font-size: 0.75rem;
        left: 50%;
        opacity: 0;
        padding: 0.3rem 0.5rem;
        pointer-events: none;
        position: absolute;
        bottom: 100%;
        transform: translateX(-50%) translateY(-0.5rem);
        transition: opacity 0.15s;
        white-space: nowrap;
        z-index: 9999;
    }

    /* Show tooltip on hover/focus */
    a.external:hover::before,
    a.external:focus::before {
        opacity: 1;
    }

.conceptImage {
    border-radius: 0.5rem;
    display: block;
    height: auto;
    margin: auto;
    width: 100%;
    max-width: 30rem;
}


.p-bottom-1rem {
    margin-bottom: 1rem;
}

.li-bottom-1rem {
    margin-bottom: 1rem;
}

.ul-no-overflow {
    overflow: hidden;
}

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

/* ============================================================
   RESPONSIVE VISIBILITY HELPERS
   - “big screen / small screen” switches
============================================================ */

.bigScreen {
    display: block;
}

.smallScreen {
    display: none;
}

@media (max-width: 700px) {
    .bigScreen {
        display: none;
    }

    .smallScreen {
        display: block;
    }
}

/* Container for the vertical tile list */
#lessonResourcesNav {
    display: flex;
    flex-direction: column;
    gap: 0.1rem; /* very small gap between tiles */
    margin: 0.75rem auto 1.5rem 0; /* left justified */
    /* margin: 0.75rem auto 1.5rem auto; */
    max-width: 20rem;
    font-family: 'Playfair Display', serif;
    line-height: 1.3;
}

/* Each resource tile — matches .asideNavLink from online site */
.lessonResourceLink {
    display: block;
    background-color: rgba(255,255,255,0.75);
    border: 1px solid rgba(0,0,0,0.125);
    border-radius: .25rem;
    color: #a09f9d;
    padding: .35rem 1rem;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    text-align: left;
}

    .lessonResourceLink:hover,
    .lessonResourceLink:focus {
        color: black;
        transition: color 0.5s;
    }

/* PDF icon — tuned size */
.svgIcon {
    opacity: 0.5;
    padding-right: 0.3rem;
    vertical-align: middle;
    height: 1.5rem;
    width: 1.5rem;
}

.noWrap {
    white-space: nowrap;
}


/* ============================================================
   BREADCRUMBS
============================================================ */

.breadcrumbList {
    font-family: 'Playfair Display', serif;
    margin-top: 0;
    padding: 0;
}

.breadcrumbItem {
    color: #a09f9d;
    display: inline;
}

    .breadcrumbItem a {
        color: #a09f9d;
        text-decoration: none;
    }

        .breadcrumbItem a:hover {
            color: black;
            transition: color 0.5s;
        }

/* ============================================================
   HEADER / LOGO BAR
============================================================ */

/* Main header bar that contains the logo */
#headerContainer {
    background-color: rgba(255,255,255,0.75);
    border-bottom: 1px dashed #ccc;
    box-shadow: 0 0 0 1px #f8f8f8, 0 5px 0 -3px #f8f8f8, 0 5px 0 -2px #ccc;
    padding: 0.5rem 0;
}

/* Wrapper so we can position index link over the logo */
#headerLogoWrapper {
    position: relative;
    width: fit-content;
    margin: 0; /* left-justified */
    padding-left: 0.5rem; /* tiny indent */
}

/* Logo image (unchanged except wrapper handles sizing) */
#headerLogoImage {
    display: block;
    height: auto;
    max-width: 10rem;
    width: 100%;
}

/* The index link in the bottom-right corner */
#headerIndexLink {
    position: absolute;
    right: -7rem;
    bottom: 0.75rem;
    background: rgba(255,255,255,0.85);
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    box-shadow: 0 0 3px rgba(0,0,0,0.15);
    transition: background 0.2s;
}

    #headerIndexLink:hover {
        background: #e0e0e0;
    }


/* ============================================================
   MAIN LESSON COLUMN & TITLES
============================================================ */

/* Restrict the width of all lesson content */
#lessonMain {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    padding: 0 1rem; /* small breathing room on sides */
}

#mainTitle, .secondLevelTitle, .thirdLevelTitle, .fourthLevelTitle {
    color: #222;
    font-family: 'Oranienbaum', serif;
    font-weight: 500;
    text-shadow: 1px 1px 1px white;
}

#mainTitle { /* top-level lesson title */
    font-size: 2.3rem;
    line-height: 1.2;
    margin-bottom: 0.3rem;
    margin-top: 0.5rem;
}

.secondLevelTitle { /* typically use with <h2> */
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.thirdLevelTitle { /* typically use with <h3> */
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.fourthLevelTitle { /* typically use with <h4> */
    font-size: 1.3rem;
    margin-bottom: 0.15rem;
    margin-top: 0.3rem;
}


/* ============================================================
   AUDIO PLAYER & AUDIO INFO
   - HTML5 audio bar styling
   - Pulsing audio icon
   - Audio “placement” blurb & player container
============================================================ */

#audiofile {
    background-color: rgba(150,150,150,0.7);
    border-radius: 2rem;
    display: block;
    opacity: 1;
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
    /* for placement at bottom right of page */
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 100;
}

/* Animation for the audio icon */
@keyframes audioAnimation {
    from {
        background-color: transparent;
    }

    to {
        background-color: darkred;
    }
}

/* The element to apply the animation to */
#audioIcon {
    animation-name: audioAnimation;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: 5;
    animation-timing-function: linear;
    border-radius: 0.3rem;
    padding-bottom: 0.1rem;
    padding-top: 0.1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.audioPlacement { /* paragraph describing audio placement */
    background-color: lightcoral;
    border-radius: 1rem;
    padding: 0.5rem;
}

#audioPlayer { /* container used in the breadcrumb JS */
    display: none;
    text-align: center;
    width: 100%;
}

/* ============================================================
   RANDOMLY-LOADED MATHEMATICAL CAT & FLOATING HEARTS
   - Image, container, hearts animation
============================================================ */

#mathematicalCat {
    width: 100%;
}

#mathematicalCatImage {
    border-radius: 0.6rem;
    box-shadow: rgba(0,0,0,0.5) 0px 5px 15px;
    height: auto;
    margin: 0;
    max-width: 10rem;
    opacity: 0.8;
    width: 100%;
}

#imageAndHeartsContainer { /* float right block for cat+hearts */
    float: right;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
    position: relative; /* nearest positioned ancestor for hearts */
    text-align: center;
    width: 30%;
}

#hearts { /* container for absolutely-positioned hearts */
    display: block;
    height: 150%; /* 1.5 times image height */
    margin: auto; /* to center horizontally */
    max-width: 10rem; /* same width as image */

    position: absolute; /* absolute positioning in imageAndHeartsContainer */
    bottom: 75%;
    left: 0; /* to center horizontally */
    right: 0; /* to center horizontally */

    width: 100%; /* same width as image */
    z-index: 10; /* show over all other elements */
}

.heart { /* base heart styling */
    animation-name: floating-heart;
    animation-duration: 10s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.5,0.5,0.5,0.5);
    animation-play-state: running;
    background-color: rgba(171,48,53,0.75);
    height: 20%;
    mask-image: url('../graphics/heart-solid.svg');
    mask-position: bottom;
    mask-repeat: no-repeat;
    opacity: 0;
    position: absolute;
    width: 20%;
    -webkit-mask-image: url('../graphics/heart-solid.svg');
    -webkit-mask-repeat: no-repeat;
}

    /* stagger the animation for each heart */

    .heart:nth-child(1) {
        animation-delay: 0s;
    }

    .heart:nth-child(2) {
        animation-delay: 1s;
    }

    .heart:nth-child(3) {
        animation-delay: 2.5s;
    }

    .heart:nth-child(4) {
        animation-delay: 3.5s;
    }

@keyframes floating-heart {
    0% {
        opacity: 0;
        bottom: 0%;
        left: 0%;
    }

    10% {
        opacity: 1;
        bottom: 20%;
        left: 70%;
    }

    20% {
        bottom: 40%;
        left: 10%;
    }

    30% {
        bottom: 60%;
        left: 50%;
    }

    40% {
        opacity: 1;
        bottom: 80%;
        left: 5%;
    }

    48% {
        opacity: 0;
        bottom: 100%;
        left: 60%;
    }

    100% {
        opacity: 0;
        bottom: 100%;
        left: 90%;
    }
}

/* end of Randomly-loaded Mathematical Cat with Floating Hearts */

/* first paragraph after this block */
#firstParAfterCatWithFloatingHearts {
    margin-top: 0;
}

/* ============================================================
   CONTENT BLOCKS: DEFINITIONS
============================================================ */

/* definitions */

.definitionDiv { /* outer definition container */
    background: rgba(255,255,255,0.75);
    border-left: 2px solid rgba(0,0,0,0.325);
    border-radius: 5px;
    margin: 1rem 0;
    padding: 0.75rem 0.75rem 0.75rem 1.75rem; /* top right bottom left */
}

.definitionDefnDiv { /* block that holds the definition text */
    margin-top: 0.75rem;
}

.definitionDefnSpan { /* for the word DEFINITION */
    display: inline-block; /* prevent white-space errors on mobile */
    font-size: 1.1rem;
    font-weight: bold;
    padding-right: 1rem;
    text-transform: uppercase;
}

.definitionSpan { /* what is being defined */
    font-size: 1.1rem;
    font-style: italic;
}

/* ============================================================
   “MOVE ON TO NEXT SECTION” CALLOUT
============================================================ */

#toNextSection {
    align-items: center;
    background: rgba(255,255,255,0.75);
    border: 1px dashed #ccc;
    border-radius: 7px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 0.85rem;
    margin: auto;
    margin-bottom: 1rem;
    margin-top: 1rem;
    max-width: 32rem;
    padding: 1rem;
    width: 85%;
}

#masterIdeas { /* left-side text */
    flex: 2; /* 2/(2+1) parts of extra space given to this div */
    padding-right: 1rem;
    text-align: center;
}

#toNextSectionDivider { /* vertical bar between halves */
    flex: 0 0 0.2rem; /* flex-grow flex-shrink flex-basis */
    background-color: #a09f9d; /* same as anchor color */
    height: 6rem;
}

#moveOnTo { /* right-side text */
    flex: 1; /* 1/(2+1) parts of extra space given to this div */
    padding-left: 1rem;
    text-align: center;
}

#moveOnToRightArrow { /* small arrow block */
    flex: 0 0 1rem;
    padding-left: 0.5rem;
}

/* ============================================================
   EXERCISES & TIMED PRACTICE
============================================================ */


/* Miscellaneous styling in main content */
.questionDiv {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.questionSpan {
    font-weight: bold;
    margin-right: 0.75rem;
    text-transform: capitalize;
}

.solutionDiv {
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
}

.solutionSpan {
    font-weight: bold;
    margin-right: 0.5rem;
    text-transform: capitalize;
}
/* end of Miscellaneous styling in main content */

#practiceDiv, #practiceDiv2 { /* wrapper for ALL exercises */
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.125);
    border-radius: 7px;
    margin-bottom: 2rem;
    padding: 1rem 2rem; /* top/bottom left/right */
    text-align: left; /* so finger doesn't hide content on touchscreens */
}

#practiceDiv2 { /* extra top margin for second group */
    margin-top: 2rem;
}

#clickOnNewProb { /* initial instructions */
    margin-bottom: 0;
}

.buttonStyle {
    border: 2px solid #acacac;
    border-radius: 10px;
    padding: 0.7rem;
}

    .buttonStyle:active {
        border: 2px solid white;
    }

    .buttonStyle:focus-visible {
        outline: none;
        background-color: #e6f4ea; /* soft sage green */
        box-shadow: 0 0 0 3px #4caf50;
    }


#newProbButton {
    margin-bottom: 0.25rem;
    margin-top: 0;
}

#practiceDiv input[type=button]:focus, #practiceDiv2 input[type=button]:focus {
    box-shadow: 0 0 0 1px green;
    outline: none;
}

#newProbDivInst {
    margin-top: 0.5rem;
}

#newProbDivInitialInstructions, #newProbDiv2InitialInstructions {
    font-size: 0.9rem;
}

/* styled divs that hold randomly-generated text */

.styledDiv {
    background: white;
    border: 1px solid rgba(0,0,0,0.325);
    border-radius: 7px;
    margin-top: 0;
    margin-bottom: 1rem;
    max-width: 32rem;
    min-height: 1rem;
    padding: 0.5rem 1rem; /* top/bottom left/right  */
}

    .styledDiv input {
        border: none;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 1rem;
        outline: none; /* This gets rid of the black box when you click in the input field */
        width: calc(100% - 0.3rem); /* fix incomplete box on mobile */
    }

/* special fonts for typed answers and answer reporting */

#ansInput {
    /* want traditional number font for typing in answer */
    font-family: 'Times New Roman', Times, serif;
    font-size: larger;
}

#chkAnsInputDiv {
    /* want traditional number font when reporting answer */
    font-family: 'Times New Roman', Times, serif;
}

#chkAnsButton {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}


/* Worksheet info + problem type selector under the practice area */

.worksheetInfoTableTD {
    vertical-align: bottom;
}

#worksheetInfoTable, #worksheetInfoTable2 {
    font-size: 0.9rem;
}

#problemTypes { /* flex row of problem-type “buttons” */
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.exerciseCell { /* each individual problem-type cell */
    align-items: center;
    background-color: #9E6FA1;
    border: 1px solid black;
    border-radius: 3px;
    display: flex;
    flex-basis: 2.5rem;
    flex-grow: 1;
    flex-shrink: 0;
    font-family: 'Times New Roman', Times, serif;
    font-size: small;
    justify-content: center;
    min-height: 2rem;
    text-align: center;
}

#problemTypeInstructions { /* short line of instructions below */
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
    justify-content: space-around;
    width: 100%;
}

/* ============================================================
   FOOTER — SIMPLE TWO-COLUMN LAYOUT
   Logo on left; four stacked items on the right.
   Responsive: stacks vertically on narrow screens.
============================================================ */

/* Main wrapper: logo column + right column */
#footerWrapper {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Right column: items stack vertically */
#footerRightColumn > div {
    margin: 0.25rem 0;
}

/* Logo image styling (already existed — kept exactly as yours) */
#footerLogoImage {
    height: auto;
    margin-right: 0.5rem;
    max-width: 8rem;
    padding: 0.5rem;
    width: 8rem;
}

/* Make the footer background and typography consistent */
footer {
    background-color: rgba(255,255,255,0.5);
    border-top: 1px dashed #ccc;
    color: #888;
    font-family: 'Playfair Display', serif;
    font-size: 0.8rem;
    margin-bottom: 2rem;
    opacity: 0.8;
}

    /* Style links inside the footer */
    footer a {
        color: rgba(0,0,0,0.56);
        text-decoration: underline;
    }

        footer a:hover {
            color: black;
            transition: color 0.5s;
        }