@charset "utf-8";

/* =========================================
   1. GLOBAL STYLES - Luxury Brand Theme
   ========================================= */
body {
    font-family: 'Georgia', serif; /* Elegant brand font */
    color: #333;
    background-color: #fcfaf5; /* Premium off-white */
    margin: 0;
}

header {
    text-align: center;
    padding: 30px;
    background-color: #fff;
    border-bottom: 2px solid #d4af37; /* Gold accent border */
}

header img {
    width: 100%;
    max-width: 1200px;
    display: block;
    margin: 0 auto;
}

h1, h2, h3 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    color: #1a1a1a;
}

main {
    padding: 20px;
    margin-top: 70px; /* Required top margin for A7 navigation [cite: 10] */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Navigation & Rollover Effects [cite: 43] --- */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #1a1a1a;
    overflow: hidden;
}

nav li {
    float: left;
    width: 33.33%;
}

nav a {
    display: block;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    text-decoration: none;
    line-height: 2em;
}

/* Hover Growth and Color Transitions [cite: 13, 15] */
nav a:hover {
    background-color: #d4af37;
    color: #1a1a1a;
    font-size: 1.2em; /* Requirement: 1.2em font size [cite: 14] */
    transition: background-color 0.5s ease-in 0.2s, 
                color 0.5s ease-in 0.2s, 
                font-size 1s ease; /* Required transition timing [cite: 16, 17, 18] */
}

/* Form Focus & Validation Pseudo-Classes [cite: 40] */
input:focus, select:focus, textarea:focus { background-color: #fcf3cf; }
input:valid, select:valid, textarea:valid { border: 2px solid #27ae60; }
input:invalid, select:invalid, textarea:invalid { border: 2px solid #c0392b; }

/* Tables and Lists [cite: 47, 48] */
table { width: 100%; border-collapse: collapse; margin: 20px 0; border: 1px solid #d4af37; }
th, td { padding: 12px; border: 1px solid #eee; text-align: left; }
thead { background-color: #1a1a1a; color: #fff; }

/* =========================================
   2. DESKTOP STYLES (Min-width: 769px) [cite: 46]
   ========================================= */
@media only screen and (min-width: 769px) {
    /* Multi-Column Layouts */
    .column-left { width: 60%; float: left; }
    .column-right { width: 35%; float: right; }
    .clearfix::after { content: ""; clear: both; display: table; }

    /* Product Gallery [cite: 45] */
    .gallery { display: flex; flex-wrap: wrap; gap: 15px; }
    .gallery img { width: 31%; height: auto; border: 1px solid #ddd; float: none !important; }

    /* Absolute/Relative Form Alignment [cite: 40] */
    fieldset { position: relative; padding: 20px; border: 1px solid #d4af37; }
    form label { display: block; position: absolute; width: 30%; padding: 5px; }
    form input, form select, form textarea { 
        display: block; position: relative; left: 30%; 
        width: 65%; padding: 8px; margin-bottom: 15px; 
    }

    /* Radio Button Group Formatting */
    label.full-width { position: relative; width: 100%; left: 0; margin-bottom: 10px; font-weight: bold; }
    .radio-group { position: relative; left: 30%; margin-bottom: 20px; }
    input[type="radio"] { display: inline; position: inherit; left: 0; width: auto; }
    label.radio { display: inline; position: inherit; width: auto; padding-right: 20px; }

    /* Submit and Reset Buttons */
    #submit, #reset { 
        display: block; float: left; position: relative; left: 0; 
        width: 40%; padding: 12px; margin: 0 5% 10px 5%; 
        background-color: #1a1a1a; color: #fff; cursor: pointer;
    }
}

/* =========================================
   3. MOBILE RESPONSIVENESS (Max-width: 768px) [cite: 50]
   ========================================= */
@media only screen and (max-width: 768px) {
    nav li { width: 100%; float: none; border-bottom: 1px solid #333; }
    .column-left, .column-right { width: 100%; float: none; }
    
    /* Image Gallery Stacking */
    .gallery img { width: 48%; margin: 1%; }

    /* Multimedia / Video Container Responsiveness [cite: 49] */
    iframe, video { width: 100%; height: auto; min-height: 250px; }

    /* Mobile Form Layout */
    form label, form input, form select, form textarea { 
        position: inherit; display: block; width: 100%; left: 0; 
    }
    form input, form select { height: 50px; }
    #submit, #reset { width: 100%; margin: 10px 0; float: none; font-size: 1.2em; }
}

@media only screen and (max-width: 479px) {
    .gallery img { width: 100%; } /* Single column for small phones */
}

footer { 
    clear: both; 
    background-color: #1a1a1a; 
    color: #aaa; 
    text-align: center; 
    padding: 20px; 
    margin-top: 50px; 
}