/*
  Base styling for Her Wellness Kit.
  Soft, pastel colours and gentle design elements create an inviting feel.
  The layout is responsive, adapting to small screens with stacked
  navigation and flexible grids.  Colour variables make it easy to
  adjust the palette in one place.
*/

:root {
  /*
    Boho‑inspired colour palette. Neutral sands and soft earth tones
    provide a grounded canvas, while terracotta and sage accents add
    warmth and life. Adjust these values to fine‑tune the mood of the
    site without changing individual styles.
  */
  --primary-color: #F5F0EB;      /* neutral beige page background */
  --secondary-color: #E8D7C5;    /* pale sandy neutral used in gradients */
  --accent-color: #A2676B;       /* warm terracotta accent */
  --highlight-color: #7E8D85;    /* muted sage green for hovers */
  --text-color: #3E3E3E;         /* dark grey for readability */
  --card-bg: #FFFFFF;            /* card backgrounds */
  --border-color: #E2CDBF;       /* subtle warm border */
  --link-color: #A2676B;
}

/* Global resets */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  color: var(--text-color);
  background-color: var(--primary-color);
  line-height: 1.6;
}

/* Heading typography */
h1, h2, h3 {
  font-family: 'Lora', serif;
  font-weight: 700;
  color: var(--accent-color);
}

h1.logo {
  font-family: 'Lora', serif;
  font-weight: 700;
}

header {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}

.logo {
  margin: 0;
  font-size: 1.6rem;
  color: var(--accent-color);
  font-weight: bold;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
}

nav a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

nav a:hover {
  color: var(--highlight-color);
}

/*
  The hero section uses a horizontal layout on larger screens and
  stacks vertically on smaller devices. A soft gradient forms the
  backdrop, while the illustration anchors the theme visually.
*/
.hero {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: var(--accent-color);
  padding: 60px 20px;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.hero-text {
  flex: 1;
  min-width: 250px;
}

.hero-text h2 {
  margin-top: 0;
  font-size: 2.8rem;
  color: var(--accent-color);
}

.hero-text p {
  font-size: 1.2rem;
  margin-bottom: 1.6rem;
  max-width: 500px;
}

.hero-image {
  flex: 1;
  min-width: 250px;
  display: flex;
  justify-content: center;
}

.hero-image img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .hero-inner {
    flex-direction: column;
    align-items: center;
  }
  .hero-text h2 {
    font-size: 2.4rem;
    text-align: center;
  }
  .hero-text p {
    text-align: center;
  }
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--accent-color);
  color: #ffffff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn:hover {
  background-color: var(--highlight-color);
  transform: translateY(-2px);
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.tool-section {
  /* Each tool is displayed as a card with rounded corners and shadow */
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 40px 30px 30px;
  margin: 60px auto;
  max-width: 850px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.tool-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Colour strip at the top of each tool card to mimic a digital widget bar */
.tool-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: 100%;
  background-color: var(--accent-color);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Wrapper used to split illustration and content into columns */
.tool-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
}

.tool-image {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  text-align: center;
}

.tool-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.tool-content {
  flex: 2;
  min-width: 250px;
}

.tool-section h2 {
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
  color: var(--accent-color);
  /* provide space to avoid overlap with floating icon */
  margin-left: 60px;
}

.tool-section p {
  margin-bottom: 1rem;
}

form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

form label {
  flex-basis: 100%;
  font-weight: bold;
}

form input {
  padding: 10px;
  border: 1px solid var(--border-color);
  background-color: var(--primary-color);
  border-radius: 6px;
  flex: 1;
  min-width: 200px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(162, 103, 107, 0.2);
}

form button {
  padding: 10px 20px;
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

form button:hover {
  background-color: var(--highlight-color);
  transform: translateY(-2px);
}

.result {
  margin-top: 10px;
  font-weight: bold;
  color: #4a5568;
}

.resource-list {
  list-style: none;
  padding-left: 0;
}

.resource-list li {
  margin-bottom: 5px;
}

.resource-list a {
  color: var(--accent-color);
  text-decoration: none;
}

.resource-list a:hover {
  text-decoration: underline;
}

/* Advertisement placeholders */
.ad {
  background-color: var(--secondary-color);
  padding: 20px;
  margin: 20px auto;
  border: 1px dashed var(--accent-color);
  border-radius: 8px;
  text-align: center;
  color: var(--text-color);
  font-size: 0.9rem;
}
.banner-ad {
  width: 100%;
}
.sidebar-ad {
  max-width: 300px;
  float: right;
  margin-left: 20px;
}
.footer-ad {
  width: 100%;
  margin-top: 20px;
}

/* Email opt‑in callout */
.optin-section {
  background-color: var(--secondary-color);
  padding: 30px 20px;
  margin-top: 30px;
  border-radius: 10px;
  text-align: center;
  color: var(--text-color);
}
.optin-section h2 {
  margin-top: 0;
  color: var(--accent-color);
}
.optin-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.optin-form input[type="email"] {
  padding: 12px;
  border: 1px solid var(--border-color);
  background-color: var(--primary-color);
  border-radius: 6px;
  min-width: 250px;
  flex: 1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.optin-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(162, 103, 107, 0.2);
}
.optin-form button {
  padding: 10px 20px;
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.optin-form button:hover {
  background-color: var(--highlight-color);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.product-card {
  background-color: var(--card-bg);
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.product-card img {
  width: 60px;
  height: 60px;
  margin-bottom: 12px;
  /* Tint the icons to match the accent colour */
  filter: invert(32%) sepia(16%) saturate(834%) hue-rotate(320deg) brightness(92%) contrast(91%);
}

.product-card h3 {
  margin: 10px 0 5px;
  color: var(--accent-color);
}

.product-card p {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.product-card a {
  display: inline-block;
  padding: 8px 15px;
  background-color: var(--accent-color);
  color: #ffffff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.product-card a:hover {
  background-color: var(--highlight-color);
  transform: translateY(-2px);
}

/* Section icons */
.section-icon {
  position: absolute;
  top: -24px;
  left: 20px;
  width: 48px;
  height: 48px;
  background-color: var(--accent-color);
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  object-fit: contain;
  /* ensure icon graphic is tinted white for contrast */
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);

  z-index: 2;
}

footer {
  background-color: var(--secondary-color);
  padding: 20px 0;
  text-align: center;
  font-size: 0.8rem;
  color: #666666;
}

/* Responsive navigation for small screens */
@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .hero h2 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
}