/* =========================
   TK LEATHER SHIELDS
   MASTER STYLESHEET
========================= */

/* =========================
   GLOBAL / BODY
========================= */

body{
font-family:Arial, sans-serif;
margin:0;
background:linear-gradient(180deg, #0f172a, #020617);
color:white;
text-align:center;
}

/* =========================
   HEADER / NAV (CENTERED)
========================= */

header{
margin-top:10px;
border-radius:8px;
background:black;
padding:30px 20px 20px 20px; 
box-shadow:0 2px 8px rgba(0,0,0,.5);

display:flex;
flex-direction:column;
align-items:center;
}

header h2{
margin:0;
font-size:20px;
letter-spacing:.5px;
}

nav{
margin-top:10px;
}

nav a{
color:white;
margin:0 15px;
text-decoration:none;
font-weight:bold;
font-size:14px;
}

nav a:hover{
color:#d1d5db;
}

/* =========================
   LOGO
========================= */

.logo{
height:60px;
max-width:200px;
width:auto;
display:block;
margin:0 auto 8px auto;
object-fit:contain;
}


/* =========================
   PAGE LAYOUT
========================= */

section{
padding:60px 20px;
max-width:1000px;
margin:auto;
}

/* =========================
   HERO SECTION
========================= */

.hero{
background-image: url("../images/work_bench.png");
background-size: cover;
background-position: center;
padding:140px 20px;
position:relative;
border-radius:12px;
overflow:hidden;
margin-bottom:40px;
}

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(10,20,40,.75);
backdrop-filter: blur(2px);
}

.hero h1,
.hero p,
.hero .button{
position:relative;
z-index:2;
}

.hero h1{
font-size:44px;
margin-bottom:10px;
letter-spacing:.5px;
}

.hero p{
max-width:600px;
margin:auto;
margin-bottom:25px;
line-height:1.6;
opacity:.9;
}

/* =========================
   HEADINGS
========================= */

h1{
font-size:38px;
margin-bottom:10px;
}

h2{
margin-top:30px;
margin-bottom:10px;
}

header h2{
margin:0; /* overrides global h2 */
}

/* =========================
   PRODUCT GRID
========================= */

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:35px;
margin-top:40px;
max-width:900px;
margin-left:auto;
margin-right:auto;
}

.grid img{
width:100%;
height:220px;
object-fit:contain;
background:#020617;
border-radius:8px;
}

/* =========================
   PRODUCT CARD
========================= */

.card {
background:#1f2937;
padding:20px;
border-radius:12px;
text-align:center;
transition:0.25s;
cursor: pointer;
}

.card:hover {
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.card:hover h3 {
  color: #dc2626; /* slightly darker red on hover */
}

.card img{
width:100%;
border-radius:8px;
transition:.25s;
}

.card img:hover{
transform:scale(1.05);
}

.card a {
  text-decoration: none;
  color: inherit; /* 👈 THIS IS KEY */
}

.card h3 {
margin-top:10px;
margin-bottom:5px;
font-size:20px;
color: #ef4444; /* 🔥 firehouse red */
transition: color 0.2s ease;
}

.card p {
margin:0;
margin-bottom:10px;
font-size:18px;
opacity:0.9;
}

/* Fix for tall strap card */

.strap-problem .img-container {
height:200px;
}

.strap-problem img {
max-height:90%;
object-fit:contain;
}

/* =========================
   IMAGE CONTAINER
========================= */

.img-container {
background: #020617;
padding: 8px;
border-radius: 10px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
height: 220px;
}

.img-container img {
max-height:100%;
max-width:100%;
object-fit:contain;
transition: opacity 0.2s ease;
}

/* =========================
   THUMBNAIL GALLERY
========================= */

.gallery{
display:flex;
justify-content:center;
gap:6px;
margin-bottom:12px;
}

.gallery img {
width: 60px;
height: 60px;        /* 🔥 THIS FIXES EVERYTHING */
object-fit: cover;   /* 🔥 prevents distortion */
border-radius: 6px;
cursor: pointer;
transition: .2s;
}

.gallery img:hover{
transform:scale(1.1);
}

/* =========================
   LIGHTBOX (FULLSCREEN IMAGE)
========================= */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

/* =========================
   BUTTONS
========================= */

.button{
display:inline-block;
background:#8b1c1c;
color:white;
padding:12px 22px;
margin-top:auto;
text-decoration:none;
border-radius:6px;
font-weight:bold;
letter-spacing:.5px;
transition:.2s;
}

.button:hover{
background:#b91c1c;
transform:scale(1.05);
box-shadow:0 5px 15px rgba(0,0,0,0.4);
}

/* =========================
   ORDER FORM
========================= */

form.card {
  max-width: 500px;
  margin: 40px auto 30px auto;
  padding: 30px;
  background: #1f2937;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

form input,
form select,
form textarea {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 6px;
  border: none;
  font-size: 16px;
}

form textarea {
  resize: none;
}

form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #b91c1c;
}

/* =========================
   ORDER INFO / NEXT STEPS
========================= */

.next-steps {
  text-align: left;
  max-width: 400px;
  margin: 20px auto;
  line-height: 1.6;
  font-size: 15px;
  opacity: 0.9;
}

/* =========================
   CONTACT INFO (EMAIL LINK)
========================= */

.contact-info a {
  color: #ef4444;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* =========================
   DESIGN PREVIEW IMAGE
========================= */

.design-preview {
  margin: 20px auto;
  max-width: 400px;
  text-align: center;
}

.design-preview img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.design-note {
  margin-top: 10px;
  opacity: 0.8;
  font-size: 14px;
}

/* =========================
   FOOTER
========================= */

footer{
margin-top:60px;
padding:30px;
background:black;
border-top:1px solid rgba(255,255,255,0.1);
}

/* =========================
   FOOTER CREDIT
========================= */

.credit{
margin-top:10px;
font-size:14px;
opacity:.85;
}

.footer-logo{
height:20px;
vertical-align:middle;
margin:0 6px;
}

.footer-logo:hover{
opacity:1;
transform:scale(1.1);
}

/* =========================
   MOBILE
========================= */

@media (max-width:700px){

.grid{
grid-template-columns:1fr;
}

}