/* Author: Johnathon Eva
   Class: GIT 317 */

/* Reset / base */
*, *::before, *::after { 
  box-sizing: border-box; 
}

html, body { 
  margin: 0; 
  padding: 0; 
}

img, picture, svg, video { 
  display: block; 
  max-width: 100%;
 }

button, input, select, textarea { 
  font: inherit; 
  color: inherit; 
}

a { 
  color: inherit; 
  text-decoration: none; 
}

:focus-visible { 
  outline: 2px solid var(--accent); 
  outline-offset: 2px; 
}

:root {
  /* Dark, may or may not have accidentally done this first, but the JS should fix which starts*/
  --header-text: var(--text);
  --cart-text: var(--text);
  --content-text: var (--text);
  --bg: #0a1322;           
  --bg-elev: #111a2d;      
  --text: #e9eef7;       
  --muted: #a8b6d6;       
  --line: #1d2b4a;         
  --primary: #4b8bff;     
  --primary-600: #2f6fe8;
  --accent: #ff58b9;       /* pink accent 1 */
  --accent-600: #e146a1;   /* pink accent 2 */
  --field-bg: #d6d6d6;
  --field-boder: var(--line);
  

  --radius: 16px;
  --radius-sm: 12px;
  --shadow-1: 0 10px 24px rgba(0,0,0,0.28);
  --shadow-2: 0 16px 44px rgba(0,0,0,0.36);

  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
  --h1: 48px; --h2: 34px; --h3: 24px; --body: 18px; --small: 14px;

  --site-width: 1280px;
  --pad-x: 24px;
  --gap: 20px;
}

/* light default */ 
[data-theme="light"] {
  --header-text: #b6cbf5;
  --cart-text: #b6cbf5;
  --header-bg: rgba(255,255,255,0.92);
  --nav-link: #b6cbf5;
  --nav-link-hover-bg: rgba(43, 89, 222, 0.12);
  --nav-link-hover: #0d1b3c;

  --field-bg: #f1f3f8;
  --field-border: #d8e0f2;
  --placeholder: #6b7280;
  --bg: #f6f8ff;
  --bg-elev: #ffffff;
  --text: #182235;
  --muted: #465671;
  --line: #d8e0f2;
  --primary: #2b59de;
  --primary-600: #2248b8;
  --accent: #c92f86;
  --accent-600: #a21e6a;
  --content-text: #142542;
}

[data-theme="light"] .form-row input[type="text"],
[data-theme="light"] .form-row input[type="email"],
[data-theme="light"] .form-row input[type="tel"],
[data-theme="light"] .form-row textarea {
  background: var(--field-bg);  
  border-color: var(--field-border);
}


/* Base typography & container */
html { 
       background: var(--bg); 
       color: var(--text); 
       font-family: var(--font-sans);
 }

body { 
        background: var(--bg); 
        color: var(--text); 
        font-size: var(--body); 
        line-height: 1.6;
}

.container { 
  width: var(--site-width); 
  max-width: var(--site-width); 
  margin-inline: auto; 
  padding-inline: var(--pad-x); 
}

h1, h2, h3 { 
  line-height: 1.2; 
  margin: 0 0 0.5em;
 }

h1 { 
  font-size: var(--h1); 
  letter-spacing: .3px; 
}

h2 { 
  font-size: var(--h2); 
}

h3 { 
  font-size: var(--h3); 
}

p { 
  margin: 0 0 1em; 
}

small, .help-text { 
  font-size: var(--small); 
  color: var(--muted); 
}
strong { 
  font-weight: 700;
 }

.visually-hidden {
  position: absolute!important; 
  width:1px; 
  height:1px; 
  padding:0; 
  margin:-1px;
  overflow:hidden; 
  clip:rect(1px,1px,1px,1px); 
  white-space:nowrap; border:0;
}

.site-main,
.site-main p, 
.site-main li,
.site-main h2,
.site-main h3 {
  color: var(--content-text);
}

/* Skip link */
.skip-link {
  position: absolute; 
  left:-9999px; 
  top:0; 
  z-index: 100;
  background: var(--accent); 
  color:#fff; 
  padding:8px 12px; 
  border-radius:10px;
}

.skip-link:focus { 
  left:12px; 
  top:12px;
 }

/* test */
[hidden]{ 
  display:none !important; 
}

/* Header and nav */
.site-header {
  position: sticky; 
  top: 0; 
  z-index: 50;
  background: linear-gradient(180deg, rgba(17,26,45,0.95), rgba(17,26,45,0.85));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  color: var(--header-text);
}

.site-header .container {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 16px; padding-block: 14px;
}

.branding {
   display:flex; 
   gap:12px; 
   align-items:center; }

.branding img { 
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45)); 
}

.site-title {
   font-size: 26px; 
   margin:0;
   color: var(--header-text);
   }

.tagline { 
  margin:0; 
  color: var(--muted); 
  font-size: var(--small);
 }

.theme-toggle { 
  display:inline-flex; 
  gap:8px;
 }

.theme-toggle button {
  border:1px solid var(--line); 
  background: var(--bg-elev); 
  color: var(--text);
  padding:8px 12px; 
  border-radius: 10px; 
  cursor:pointer;
}
/*selector try 3, next try something else*/

.theme-toggle button[aria-pressed="true"]{
  background: linear-gradient(135deg, var(--primary), var(--accent)); 
  color:#fff;
   border-color: transparent; 
   box-shadow: var(--shadow-1);

}

.primary-nav ul {
   display:flex; 
   gap:18px; 
   list-style:none; 
   padding:0; 
   margin:0; 
  }

.primary-nav a {
  display:inline-block;
   padding:8px 10px; 
   border-radius:8px; 
   color: var(--header-text);
}

.primary-nav a:hover { 
  background: rgba(75,139,255,0.15); 
  color:#fff;
 }

.primary-nav a:active { 
  transform: translateY(1px);
 }

/* cart styling */
.cart { display:inline-flex; 
        gap:10px; 
        align-items:center;
        color: var(--cart-text);
 }

.btn-checkout {
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  border:1px solid 
  var(--accent); 
  background: transparent; 
  color: var(--cart-text);
}

.btn-checkout:hover {
   background: rgba(255,88,185,0.16);
}

.cart-indicator strong { 
  color: var(--accent);
 }



.btn-cta{
  display:inline-block; 
  padding:14px 18px; 
  border-radius:12px; 
  font-weight:700; 
  color:#fff;
  background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: var(--shadow-2);
}

.btn-cta:hover{ 
  filter: brightness(1.06); 
}

/* tabbed */
.catalog { 
  padding-block: 48px; 
  border-bottom: 1px solid var(--line);
 }

.section-header { 
  margin-bottom: 18px;
 }

.price-note {
   color: var(--muted);
}

.album-tabs ul { 
  display:inline-flex; 
  gap:10px;
   list-style:none; 
   margin: 18px 0; 
   padding:0;
}

/* couldn't get it to work with querySelectorAll for some reason*/

.album-tabs [role="tab"]{
  border:1px solid var(--line); 
  background: var(--bg-elev); color: var(--text);
  padding:10px 14px; border-radius: 999px; cursor:pointer;
}
.album-tabs [role="tab"][aria-selected="true"]{
  background: linear-gradient(135deg, rgba(75,139,255,0.16), rgba(255,88,185,0.16));
  border-color: var(--primary); color:#fff;
}

.album-panels{
   display:grid; 
   gap:24px; 
   grid-template-columns: 1fr;
    margin-top: 12px; 
}

.album-panels article{
  background: var(--bg-elev); 
  border:1px solid var(--line);
  border-radius: var(--radius); 
  padding: 22px;
   box-shadow: var(--shadow-1);
   
}

.album-art{
   display:grid; 
   grid-template-columns: 240px 1fr; 
   gap:18px; 
   align-items:start; 
}

.album-art img{
  width:240px; 
  height:240px;
   object-fit: cover; 
   border-radius:12px; 
   border:1px solid var(--line);
}

.album-art figcaption{ 
  color: var(--muted); 
  font-size: var(--small);
 }

.album-desc{ 
  margin-top: 8px;
 }

.album-meta{ 
  margin:10px 0; 
  color: var(--muted); 
}

.album-meta li{
   list-style: disc; 
   margin-left: 18px;
}

.album-price{ 
  margin:6px 0 12px; 
  font-weight:700;
 }

.price-value{ 
  color: var(--primary);
 }

.btn-buy{
  margin-top:8px; 
  padding:12px 14px;
  border:1px solid var(--primary);
  background: transparent; 
  color: var(--primary);
   border-radius:12px; 
   cursor:pointer; 
   font-weight:700;
}

.btn-buy:hover{ 
  background: var(--primary); 
  color:#fff; 
}

/* guessing game */
.game{ 
  padding-block: 48px; 
  border-bottom:1px solid var(--line);
 }

#game-form .form-row{
  display:inline-flex; 
  gap:10px; 
  align-items:center;
  background: var(--bg-elev); 
  border:1px solid var(--line);
  border-radius: var(--radius-sm); 
  padding:12px;
}

#guess{
  width:120px;
   padding:10px 12px;
  background: var(--field-bg);
  color: var(--text);
  border:1px solid var(--line); 
  border-radius:10px;
}

#play-btn{
  padding:10px 14px; 
  border-radius:10px; 
  cursor:pointer;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border:none; color:#fff; font-weight:700;
}

.result{ 
  margin-top:12px; 
  min-height:24px; 
  font-weight:700;
 }

.price-preview{
  margin-top:16px; 
  padding:16px; 
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
   border:1px solid var(--line);

}

.discount-note{ 
  margin-top:6px; 
  color: var(--accent);
   font-weight:700; 
}

/* contact form */
.contact{ 
  padding-block: 48px; 
  border-bottom:1px solid var(--line);
 }

form{ 
  display:grid; 
  gap:16px; 
}

fieldset{
   border:1px solid var(--line);
    border-radius: var(--radius-sm); 
    padding:16px; 
}

legend{ 
  padding:0 6px; 
  color: var(--muted); 
}

.form-row{ 
  display:grid; 
  gap:8px; 
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row textarea{
  background:#0c1527; 
  border:1px solid var(--line);
  color: var(--text);
  padding:12px 14px; 
  border-radius:10px;
}

.form-row input::placeholder, .form-row textarea::placeholder{ 
  color:#6d7aa4; 
}

.radio-row{ 
  display:flex; 
  align-items:center; 
  gap:8px; 
  margin:6px 0; 
}

.form-actions{ 
  display:flex; 
  gap:10px;
 }

.form-actions button{
  padding:12px 16px; 
  border-radius:12px; 
  cursor:pointer; 
  font-weight:700;
  border:1px solid var(--primary); 
  background: var(--primary); 
  color:#fff;
}

.form-actions button[type="reset"]{
  background: transparent; 
  color: var(--text);
  border-color: var(--line);
}

.form-actions button[type="reset"]:hover{
   background: rgba(75,139,255,0.12);
}

.form-actions button:hover{ 
  filter: brightness(1.06); 
}

/* Error & success states */
.error{ 
  color:#ff7aa8; 
  font-size: var(--small); 
  min-height:1em;
 }

.errorInput, .error-input{
  border-color:#ff7aa8 !important; 
  box-shadow:0 0 0 3px rgba(255,122,168,0.16);
}

.success{
  background: rgba(75,139,255,0.12);
  border:1px solid var(--primary);
  color:#d3e2ff;
  padding:14px; 
  border-radius:12px; 
  box-shadow: var(--shadow-1);
}

[data-theme="light"] .success {
  background: rgba(43, 89, 222, 0.08);
  border-color: var(--primary);
  color: #0d1b3c; 
}

/* FAQ */
.faq{ padding-block:48px; 
  border-bottom:1px solid var(--line);
 }

.faq details{
  background: var(--bg-elev); 
  border:1px solid var(--line);
  border-radius: var(--radius-sm); 
  padding:14px 16px;
   margin-bottom:12px;
}

.faq summary{ 
  cursor:pointer; 
  font-weight:700; 
}

.faq p{ 
  color: var(--muted); 
  margin-top:8px;
 }

/* Footer */
.site-footer{
  padding-block: 32px;
  background: linear-gradient(180deg, rgba(17,26,45,0.95), rgba(10,19,34,1));
  border-top: 1px solid var(--line);
}

.site-footer p {
  color: var(--muted);
}


.footer-grid{ 
  display:grid; 
  grid-template-columns: 2fr 1fr 1fr; 
  gap:20px; 
  align-items:start;
 }

.footer-nav ul{ 
  list-style:none; 
  padding:0; 
  margin:0; 
}

.footer-nav a{
   color: var(--muted); 
  }

.footer-nav a:hover{ 
  color:#fff; 
}

.social{ 
  list-style:none;
   padding:0;
    margin:0; 
    display:grid;
     gap:6px; 
    }

    .site-footer #foot-social,
.site-footer .social a {
  color: var(--muted);
}


.legal{ 
  display:block; 
  text-align:center; 
  margin-top:18px;
   color: var(--muted); 
   font-size: var(--small); 
  }


/* Buttons  */
button{
   transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
   }

button:active{ 
  transform: translateY(1px);
 }

/* Tables */
table{ 
  width:100%; 
  border-collapse: collapse; 
}

th, td{ 
  padding:10px; 
  border-bottom:1px solid var(--line); 
  text-align:left; 
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  *{ 
    animation:none !important; 
    transition:none !important; 
    scroll-behavior:auto !important; }
}

/* Fixed-width try standard practice, come back to if more time */
@media (max-width: 1320px){
  .container{
     width:100%; 
     max-width: var(--site-width); 
    }
}
@media (max-width: 980px){

  .album-art{ 
    grid-template-columns: 1fr;
   }
  .footer-grid{ 
    grid-template-columns: 1fr;
   }
}

/* No-JS notice, a nice to have update if time */
.noscript{
  background:#5a0f36; 
  color:#fff; 
  padding:12px 16px; 
  text-align:center;
}