/* style.css
   Stylesheet for Both Pages of This is your Song website */

/*This page intentionlally has exstensive comments to explain the CSS rules. It is a class project and will be used for future refentce when creating other pages*/
/* ===========================================================
   GLOBAL STYLES
   These rules apply to every page. They set the site colors,
   the page layout (header / main / footer), shared typography,
   link behavior, and reusable classes you can apply anywhere.
   =========================================================== */

/* 
THEME COLOR VARIABLES
This is the :root selector, which defines global CSS custom properties (variables). 
These values can be reused across the stylesheet to ensure consistent theming and simplify updates.

Each variable represents a visual role in the design:
--amber: Button background color
--bg:    Page background color
--card:  Background for card-style containers
--gold:  Accent color for borders and headers
--text:  Default body text color

By changing a value here, the entire site updates accordingly — a scalable, maintainable approach to theming.
*/
:root {
    --amber: #ff9a1f;
    --bg: #0d1117;
    --card: #5c1a14;
    --gold: #ffd56a;
    --text: #ffffff;
}

/* 
BASE PAGE LAYOUT GRID
Applies a 3-row grid to the entire body of the page:
- Row 1: <header> (auto height)
- Row 2: <main> (grows to fill available space)
- Row 3: <footer> (auto height)

This grid ensures consistent structure and vertical alignment on all pages.
Also sets the background color, base font, and line height for readability.
*/
html,
body {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, sans-serif;
    line-height: 1.55;
}

/* 
GLOBAL HEADING STYLES
Ensures all headings use Georgia for contrast, and removes default spacing.

Used for <h1>, <h2>, and <h3> across all pages, to maintain brand consistency.
*/
h1,
h2,
h3 {
    color: var(--gold);
    font-family: Georgia, serif;
    margin: 0;
    padding: 0;
}

/* 
HEADER ALIGNMENT
Centers the <h1> and <h2> inside header elements for symmetry and readability.
Also softens <h2> appearance with smaller size and lighter weight.
*/
header h1,
header h2 {
    text-align: center;
}

header h2 {
    font-size: 1.1rem;
    font-weight: normal;
}

/* 
LINK STYLING
Makes anchor links amber for visibility and underlines them on hover to indicate interactivity.
*/
a {
    color: #ffb347;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ===========================================================
   GLOBAL UTILITY CLASSES
   These classes can be reused on any page.
   =========================================================== */

/* 
.btn — UNIVERSAL BUTTON STYLE
Creates a stylized button using a <a> tag or any other inline element.

- Fixed height (56px, ~1 inch)
- Centered label using flexbox
- Uses the --amber and --gold theme colors
- Applies padding and border radius for visual polish

Designed to visually stand out while remaining flexible in layout.
*/
.btn {
    background: var(--amber);
    border: 2px solid var(--gold);
    border-radius: 8px;
    box-sizing: border-box;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    height: 56px;
    padding: 0 .5rem;
    text-align: center;
    text-decoration: none;
    width: 20%;
}

/* 
.btn HOVER EFFECT
Brightens the button fill when hovered to give feedback to the user.
*/
.btn:hover {
    background: #ffb347;
}

/* 
.button-row — FLEX CONTAINER FOR BUTTONS
Horizontally aligns a row of buttons using flexbox. 
Buttons automatically wrap to a new line if the screen is too narrow.

- No vertical spacing between lines
- Horizontal gap between buttons
- Keeps layout compact and centered
*/
.button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 12px;
    padding: 0.5rem;
}

/* 
.button-row .btn — BUTTON RESIZING RULES
Applies sizing rules for buttons inside .button-row.

- Prevents buttons from stretching
- Ensures they remain usable on smaller screens
- Centers button text for consistency
*/
.button-row .btn {
    flex: 0 1 auto;
    min-width: 120px;
    text-align: center;
}

/* 
.card — FRAMED CONTAINER
Used for header, main content, and footer containers.
Gives each section a boxed appearance with padding, border, and radius.

- Uses max width of 92% viewport or 1920px for readability
- Adds spacing between elements vertically
*/
.card {
    background: var(--card);
    border: 2px solid var(--gold);
    border-radius: 12px;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 0 12px;
    margin: 8px auto;
    padding: 8px;
    width: min(1920px, 92vw);
}

/* 
Ensures media like audio, video, and iframes don't overflow the .card container.
Maintains clean layout and containment.
*/
.card audio,
.card video,
.card iframe {
    max-width: 100%;
    display: block;
}

/* 
TEXT ALIGNMENT UTILITIES
Utility classes for aligning text without affecting layout:
- text-center, text-left, etc.
- Reusable across any element or container
*/
.text-center {
    text-align: center;
}

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

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

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

/* ===========================================================
   INDEX PAGE STYLES
   These classes are used only on index.html
   =========================================================== */

/* 
.jingle-box — AUDIO PLAYER CONTAINER
Visually separates the audio player from the body text.

- Black background with gold border to draw attention
- Centered content and internal padding for clarity
*/
.jingle-box {
    background: #000;
    border: 2px solid var(--gold);
    border-radius: 8px;
    display: inline-block;
    margin: 12px auto;
    padding: 12px 20px;
    text-align: center;
}

/* 
.jingle-box a — STYLIZED AUDIO TEXT LINK
Applies standout style to any text links placed in the jingle box.
*/
.jingle-box a {
    color: var(--gold);
    display: block;
    font-size: 1.05rem;
    font-weight: bold;
    text-decoration: none;
}

/* ===========================================================
   CATALOG PAGE STYLES
   Used only on catalog.html
   =========================================================== */

/* 
.note-box — EXPLANATORY TEXT BLOCK
Compact text container placed below catalog heading.

- Black background, gold text
- Styled to match jingle-box but with smaller text
*/
.note-box {
    background: #000;
    border: 2px solid var(--gold);
    border-radius: 8px;
    color: var(--gold);
    font-size: 0.95rem;
    padding: 8px 12px;
    text-align: center;
}

.note-box p {
    margin: 4px 0;
}

/* 
.grid-4col — SONG TILE GRID
Grid container for catalog songs. Automatically fits four tiles per row on wide screens, and wraps as needed.

- Centered, max 800px width
- Flexible column sizing using minmax
*/
.grid-4col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 12px;
}

/* 
.TIM — SONG TILE
Each tile includes title, image, and audio player stacked vertically.

- Consistent 3-inch height and 2-inch width
- Keeps layout uniform across catalog
*/
.TIM {
    background: transparent;
    border: 0;
    display: grid;
    grid-template-rows: 1in 1in 1in;
    height: 3in;
    justify-items: center;
    padding: 0;
    width: 2in;
}

/* 
.tile-title — TILE HEADER TEXT
Centers and styles the title of each song tile.
*/
.TIM .tile-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    padding: 0;
}

/* 
.tile-image — TILE IMAGE BLOCK
Centers and contains a 1x1in image inside the tile.
*/
.TIM .tile-image {
    width: 100%;
    height: 1in;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.TIM .tile-image img {
    width: 1in;
    height: 1in;
    object-fit: contain;
    display: block;
}

/* 
.tile-player — TILE AUDIO PLAYER
Contains and sizes the native audio player.
Ensures consistency in appearance and prevents overflow.
*/
.TIM .tile-player {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.TIM .tile-player audio {
    width: 100%;
    height: 40px;
    display: block;
}

/* ===========================================================
   PDF PREVIEW STYLES
   Applies to the iframe preview of the sample order form.
   =========================================================== */

@keyframes zoomIn {
    from {
        transform: scale(0.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.sample-order-box {
    display: none;
}

/* 
Reveals the PDF preview box when the user clicks the anchor link.
Triggers a zoom-in animation on display.
*/
#sample-order:target+.sample-order-box {
    display: block;
    animation: zoomIn 0.25s ease-out forwards;
}

/* ===========================================================
   RESPONSIVE FIXES FOR MOBILE DEVICES (≤ 600px)
   =========================================================== */

@media (max-width: 600px) {
    .btn {
        width: 100%;
        min-width: unset;
        max-width: 320px;
        margin: 0 auto 8px;
    }

    .button-row {
        flex-direction: column;
        align-items: stretch;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}