/* assets/css/style.css
   Old Western theme — keeps all class names and layout intact so PHP files work unchanged.
   - Uses warm parchment & wood tones, serif headings, stamped/engraved CTAs
   - Preserves responsiveness and accessibility
*/

:root{
  --bg: #f6efe0;            /* parchment */
  --surface: #fff9f0;       /* paper surface */
  --text: #2b230f;          /* dark brown text */
  --muted: #6b5a43;
  --primary: #6b3f22;       /* deep saddle brown for headings */
  --accent: #a67c52;        /* leather / brass accent */
  --accent-2: #c49a5b;      /* lighter brass for highlights */
  --success: #3f6b2f;
  --border: #e2d6c2;
  --shadow: 0 10px 30px rgba(38, 28, 13, 0.12);
  --radius: 10px;
  --max-width: 980px;
  --page-padding: 20px;
  --container-padding: 28px;
  --font-sans: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-display: "Cinzel", "Playfair Display", Georgia, serif;
  --transition: 180ms cubic-bezier(.2,.9,.2,1);
}

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

html,body { height:100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,0.06), transparent 5%),
    linear-gradient(180deg, #fbf6ec 0%, var(--bg) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding: var(--page-padding);
  line-height:1.5;
  font-size:16px;
}

/* Container styled like an old paper card with wooden frame */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), var(--surface));
  padding: var(--container-padding);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 6px solid #5a3e2a; /* wood frame */
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 20px);
}

/* Headings with western "stamped" look */
h1, h2, h3, h4 {
  margin: 0 0 12px 0;
  line-height:1.15;
  color: var(--primary);
  font-family: var(--font-display);
  font-weight:700;
  letter-spacing: 0.6px;
  text-shadow: 0 2px 0 rgba(255,255,255,0.6), 0 -1px 0 rgba(0,0,0,0.06);
}

/* decorative underline for the main headline */
h1 {
  font-size: clamp(22px, 3.2vw, 36px);
  position: relative;
  padding-bottom: 10px;
}
h1::after {
  content: "";
  display: block;
  width: 120px;
  height: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.0));
  margin-top:10px;
  border-radius:3px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
}

/* Lead paragraph */
.lead {
  color: #3b2f20;
  font-size: 1rem;
  margin-bottom: 14px;
  max-width: 60ch;
}

/* Labels & inputs keep structure but adopt western styling */
label {
  display:block;
  margin-bottom:8px;
  font-weight:700;
  color: #3b2f20;
}

input[type="text"],
input[type="email"],
textarea,
select {
  width:100%;
  padding:12px 14px;
  border-radius:6px;
  border: 2px solid var(--border);
  background: linear-gradient(180deg, #fffdfa, #fff6ee);
  font-size:1rem;
  color: var(--text);
  margin-top:6px;
  transition: box-shadow var(--transition), border-color var(--transition);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

input::placeholder,
textarea::placeholder { color: #a48f6f; }

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(166,124,82,0.12);
}

/* Buttons — leather / brass look */
button,
.button,
a.button {
  display:inline-block;
  text-decoration:none;
  padding:12px 18px;
  border-radius:6px;
  border: none;
  cursor:pointer;
  font-weight:700;
  color: #fff;
  background: linear-gradient(180deg, var(--accent-2), var(--primary));
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
  font-family: var(--font-display);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

button:hover,
.button:hover,
a.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}

/* Secondary button (lighter leather) */
.button.secondary {
  background: linear-gradient(180deg, #d6b485, #a67c52);
  color: #2b230f;
}

/* Ghost button for optional actions */
.button.ghost {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: none;
}

/* Trust badge styled like a stamped seal */
.trust-badge {
  display:inline-block;
  background: linear-gradient(180deg,#fffaf0,#f3e8d6);
  padding:8px 12px;
  border-radius:50px;
  color: var(--success);
  font-weight:700;
  border: 2px solid rgba(63,107,47,0.08);
  box-shadow: 0 2px 0 rgba(0,0,0,0.06);
  font-size:0.95rem;
}

/* Video container: give it a wooden frame effect */
.video-container {
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  margin:20px 0;
  border-radius:6px;
  border: 6px solid #5a3e2a; /* wood frame */
  background: #000;
}

.video-container iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Banners and grid — keep tidy with subtle paper cards */
.banner-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
  margin-top:16px;
  align-items:start;
}

.banner {
  background: linear-gradient(180deg,#fffdfa,#fff6ee);
  border: 2px solid var(--border);
  padding:12px;
  border-radius:8px;
  text-align:center;
  box-shadow: 0 6px 18px rgba(38,28,13,0.06);
}

.banner img {
  width:100%;
  height:auto;
  border-radius:6px;
  border: 1px solid #e7dcc6;
  display:block;
  margin-bottom:8px;
}

/* Copy button with brass accent */
.copy-btn {
  background: linear-gradient(180deg, var(--accent-2), #b07a3c);
  color: #2b230f;
  padding:8px 12px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-weight:700;
}

.copy-btn:hover { transform: translateY(-2px); }

/* Footer and misc */
.footer {
  margin-top:28px;
  color: var(--muted);
  font-size:0.95rem;
  text-align:center;
}

/* Notice card in western tone */
.notice {
  background: linear-gradient(180deg, #fff7e6, #fff0d8);
  border-left: 6px solid #ffbf47;
  padding:14px;
  border-radius:8px;
  color: #6b4b00;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Form-aside layout preserved */
.form-aside {
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:24px;
}

/* Links */
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Accessibility focus */
:focus-visible {
  outline: 3px solid rgba(166,124,82,0.18);
  outline-offset: 3px;
  border-radius:6px;
}

/* Responsive adjustments */
@media (max-width: 980px) {
  .form-aside { grid-template-columns: 1fr; }
  .container { padding:22px; }
}

@media (max-width: 600px) {
  body { padding:12px; }
  .container { padding:16px; margin:12px 0; }
  h1 { font-size:20px; }
  .lead { font-size:0.95rem; }
  .video-container { margin:14px 0; }
  button, .button { width:100%; padding:12px 14px; }
  .banner-grid { grid-template-columns:1fr; }
}