/* ===== Global Styles ===== */

/* Main page container with centered, constrained layout */
body {
    background-color: #192837;  /* Dark blue background */
    color: #FAFAFB;             /* Off-white text */
    text-align: center;
    align-items: center;
    font-family: "Brown II", sans-serif;
    padding: 10px;
    margin: 0 auto;
    max-width: 700px;           /* Constrain width for readability */
    overflow-x: hidden;         /* Prevent horizontal scrolling */
}

/* Main headings using custom Weave Pro font */
h1 {
    font-family: "Weave Pro", sans-serif;
    font-weight: 400;
}

/* Links styled with gold/yellow color */
a {
    color: #ebcb79;             /* Gold color matching button style */
    font-size: 22px;
    text-decoration: none;      /* Remove underline */
    font-weight: 1000;
}

/* Small email text styling */
.email-text {
    font-size: 13px;
}

/* HTS logo styling */
.logo {
    width: 150px;
    height: auto;               /* Maintain aspect ratio */
    margin-bottom: 2px;
}

/* ===== Custom Font Definitions ===== */

/* Weave Pro font used for headings */
@font-face {
    font-family: "Weave Pro";
    src: url(weave-pro.woff);
}

/* Brown II font used for body text */
@font-face {
    font-family: "Brown II";
    src: url(brown-ll-regular.woff);
}

/* ===== Image Styles ===== */

/* Mr Carnell image styling */
.carnell {
    width: 300px;
}

/* ===== Interactive Elements ===== */

/* Button styling - used for quiz navigation and answer options */
.gobutton {
    border-radius: 20px;
    padding: 10px;
    background-color: #ebcb79;  /* Gold/yellow background */
    color: #192837;             /* Dark blue text (matches body background) */
    font-size: 20px;
    margin: 20px auto;
    max-width: 300px;
    display: block;             /* Makes button full width up to max-width */
}

/* Paragraph text styling */
p {
    font-size: 20px;
}

/* ===== Drag-and-Drop Quiz Functionality ===== */

/* Dropzone where users drag their selected answers */
.dropzone {
    border: 2px dashed #0c0c0c;     /* Dashed border to indicate drop area */
    min-height: 50px;               /* Minimum height even when empty */
    padding: 10px;
    margin: 10px 0;
    background: hsl(205, 100%, 90%); /* Light blue background */
}

/* Draggable answer buttons */
.draggable {
    cursor: grab;                    /* Show grab cursor on hover */
    margin: 5px;
    display: inline-block;
}

/* Ghost element that follows the user's finger/cursor during drag on mobile */
.drag-ghost {
    position: fixed;                 /* Fixed position to follow cursor/touch */
    pointer-events: none;            /* Don't interfere with drop detection */
    opacity: 0.8;                    /* Semi-transparent */
    z-index: 9999;                   /* Always on top */
    background: #ebcb79;             /* Match button color */
    border: 2px solid #0c0c0c;
    border-radius: 6px;
    padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 1em;
}