/*
  Return to Sovereignty Workshop landing page styles

  This stylesheet defines the colour palette, typography, layout and
  interactive elements for the Return to Sovereignty landing page.
  The palette is inspired by warm reds and rich golds and uses
  responsive breakpoints to ensure a beautiful experience across
  devices.  Classes are structured to work alongside the provided
  script.js for modals, accordions and mobile navigation.
*/

/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  background-color: var(--off-white);
}

img {
  max-width: 100%;
  display: block;
}

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

/* Colour palette variables */
:root {
  /* Warm red and gold palette */
  --deep-red: #5A0004;
  --dark-red: #900101;
  --scarlet: #AC0001;
  --light-gold: #DAAA56;
  --gold: #BD8B33;
  --off-white: #FDF8EE;
  --text-dark: #2B1B20;
  --muted: #744245;
  --border-radius: 8px;
  --transition-speed: 0.3s;

  /* Additional utility variable for white text used in hero section */
  --color-white: #ffffff;
}

/* Utility classes */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

section {
  padding: 4rem 0;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  color: var(--deep-red);
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 1rem;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  text-align: center;
  color: var(--deep-red);
  margin-bottom: 0.5rem;
}

.section-intro {
  text-align: center;
  max-width: 700px;
  margin: 0.5rem auto 2rem;
  color: var(--muted);
}

/* Navigation */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--off-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.nav-logo img {
  height: 40px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.2rem;
}

.nav-links a {
  color: var(--deep-red);
  font-weight: 500;
  transition: color var(--transition-speed);
}

.nav-links a:hover {
  color: var(--gold);
}

/* Mobile navigation */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  width: 25px;
  height: 2px;
  background: var(--deep-red);
  display: block;
  position: relative;
  transition: transform var(--transition-speed);
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
}

.hamburger::before {
  top: -7px;
}

.hamburger::after {
  top: 7px;
}

.nav-toggle.open .hamburger {
  transform: rotate(45deg);
}
.nav-toggle.open .hamburger::before {
  transform: rotate(90deg);
  top: 0;
}
.nav-toggle.open .hamburger::after {
  transform: rotate(90deg);
  top: 0;
}

@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--off-white);
    flex-direction: column;
    align-items: flex-start;
    width: 200px;
    padding: 1rem;
    display: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .nav-links.open {
    display: flex;
  }
  .nav-toggle {
    display: block;
  }
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--deep-red) 0%, var(--dark-red) 40%, var(--scarlet) 100%);
  color: var(--color-white);
  padding-top: 6rem;
  padding-bottom: 4rem;
  text-align: center;
}

.hero-title {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.hero-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: #fce8d1;
  margin-bottom: 1rem;
}

.hero-description {
  font-size: 1rem;
  color: #fce8d1;
  max-width: 800px;
  margin: 0 auto 2rem;
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary {
  background-color: var(--light-gold);
  color: var(--deep-red);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--light-gold);
  color: var(--light-gold);
}

.btn-outline:hover {
  background-color: var(--light-gold);
  color: var(--deep-red);
}

.countdown {
  margin-top: 1.5rem;
  font-weight: 500;
  font-size: 1rem;
  color: #fce8d1;
}

/* Core qualities */
.qualities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.quality-card {
  background-color: #fff;
  border: 1px solid #f3e4c7;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.quality-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

.quality-card h3 {
  color: var(--scarlet);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.quality-detail {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-dark);
  text-align: left;
}

/* Workshop Modules */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.module-card {
  background-color: #fff;
  border: 1px solid #f3e4c7;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

.module-card h4 {
  color: var(--scarlet);
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.module-card p {
  color: var(--text-dark);
  font-size: 0.9rem;
}

/* Signs list */
.signs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.sign-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #f3e4c7;
  padding: 0.8rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sign-item.checked {
  background-color: #f8efe2;
}

.sign-item .checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid var(--scarlet);
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign-item.checked .checkmark {
  background-color: var(--light-gold);
  border-color: var(--light-gold);
}

.sign-item .checkmark svg {
  width: 12px;
  height: 12px;
  stroke: var(--deep-red);
  display: none;
}

.sign-item.checked .checkmark svg {
  display: block;
}

/* Included items */
.included-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.included-item {
  display: flex;
  gap: 0.8rem;
  background-color: #fff;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #f3e4c7;
  align-items: flex-start;
}

.included-icon {
  font-size: 1.5rem;
  color: var(--scarlet);
  margin-top: 0.2rem;
}

/* Pricing */
.pricing-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.pricing-card {
  background-color: #fff;
  border: 2px solid var(--light-gold);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  max-width: 350px;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  position: relative;
}

.pricing-card .tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 0.8rem;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #fff;
}

.pricing-card h3 {
  font-size: 1.8rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--deep-red);
}

.pricing-card .price {
  font-size: 3rem;
  color: var(--scarlet);
  margin-bottom: 0.5rem;
}

.pricing-card p {
  font-size: 0.9rem;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
}

.pricing-card button {
  width: 100%;
  padding: 0.8rem;
  border: none;
  border-radius: 6px;
  background-color: var(--light-gold);
  color: var(--deep-red);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.pricing-card button:hover {
  transform: translateY(-3px);
}

@media (min-width: 768px) {
  .pricing-grid {
    flex-direction: row;
    justify-content: center;
  }
}

/* Registration form */
.registration-form {
  background-color: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  max-width: 700px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: var(--deep-red);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.registration-form button {
  display: block;
  width: 100%;
  padding: 0.8rem;
  background-color: var(--dark-red);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.registration-form button:hover {
  background-color: var(--scarlet);
  transform: translateY(-3px);
}

/* About facilitator */
.about-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.about-section img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--light-gold);
}

.about-text {
  max-width: 700px;
  text-align: center;
}

@media (min-width: 768px) {
  .about-section {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  .about-text {
    margin-left: 2rem;
  }
}

/* Benefits section */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.benefit-item {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #f3e4c7;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.benefit-item h4 {
  color: var(--scarlet);
  margin-bottom: 0.3rem;
}

/* FAQ accordion */
.faq {
  max-width: 900px;
  margin: 0 auto;
}

.accordion-header {
  font-weight: 600;
  color: var(--deep-red);
  cursor: pointer;
  position: relative;
  padding: 1rem 0;
  border-bottom: 1px solid #e5d6bd;
}

.accordion-header::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 1rem;
  font-weight: 700;
  font-size: 1.2rem;
}

.accordion-header.active::after {
  content: '-';
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 0;
  margin-bottom: 0.5rem;
  color: var(--text-dark);
}

.accordion-content p {
  padding: 0 0 1rem;
}

/* Footer */
footer {
  background-color: var(--deep-red);
  color: #fce8d1;
  padding: 2rem 1rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.footer-column {
  flex: 1;
  min-width: 200px;
}

.footer-column h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #fff;
}

.footer-column a {
  color: #fce8d1;
  display: block;
  margin-bottom: 0.3rem;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: var(--light-gold);
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.85rem;
}

/* Modals */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  padding: 0 1rem;
}

.modal.show {
  display: block;
}

.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 2rem;
  border-radius: 8px;
  max-width: 600px;
  position: relative;
}

.modal-content h4 {
  margin-top: 0;
}

.close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--scarlet);
}