/* =========================================================
   MEGAN JAMES HAIR
   FAQ + REVIEWS PAGE
   Page-specific stylesheet

   This file intentionally does NOT modify styles.css.
   It is loaded AFTER styles.css by faq-reviews.html.
========================================================= */


/* =========================================================
   PAGE FOUNDATION
========================================================= */

.faq-reviews-page {
  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(192, 151, 69, 0.055),
      transparent 32%
    ),
    #000;

  color: var(--color-text);
}


/* Keep page content independent from homepage layouts */
.faq-reviews-page .faq-reviews-wrapper {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 70px 0 100px;
}


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

.faq-reviews-hero {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 45px 30px 60px;
  text-align: center;
}


.faq-reviews-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--color-accent),
      transparent
    );

  transform: translateX(-50%);
}


.faq-reviews-eyebrow {
  margin-bottom: 18px;

  color: var(--color-accent);

  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}


.faq-reviews-hero h1 {
  margin: 0 auto 22px;

  color: var(--color-text);

  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0.015em;

  text-shadow:
    0 2px 15px rgba(255,255,255,0.04);
}


.faq-reviews-intro {
  max-width: 760px;
  margin: 0 auto;

  color: #aaa;

  font-size: 1.05rem;
  line-height: 1.9;
}


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

.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  gap: 22px;

  margin-bottom: 12px;
}


.section-heading h2 {
  flex: 0 1 auto;

  margin: 0;

  color: var(--color-accent);

  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
}


.section-heading-line {
  flex: 1;
  max-width: 180px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(192,151,69,0.65)
    );
}


.section-heading-line:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(192,151,69,0.65),
      transparent
    );
}


.section-intro {
  margin: 0 auto 35px;

  color: #888;

  font-size: 0.9rem;
  text-align: center;
}


/* =========================================================
   FAQ SECTION
========================================================= */

.faq-section {
  position: relative;

  margin: 0 auto;
  padding: 25px 0 85px;
}


.faq-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;

  max-width: 1050px;
  margin: 0 auto;
}


/* =========================================================
   FAQ CARDS
========================================================= */

.faq-card {
  position: relative;

  overflow: hidden;

  border: 1px solid rgba(192,151,69,0.35);
  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.035),
      rgba(192,151,69,0.025) 48%,
      rgba(255,255,255,0.01)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 8px 30px rgba(0,0,0,0.25);

  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}


.faq-card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 3px;
  height: 0;

  background:
    linear-gradient(
      to bottom,
      #fff0a8,
      var(--color-accent),
      #8f6b16
    );

  transition: height 0.35s ease;
}


.faq-card:hover {
  border-color: rgba(192,151,69,0.7);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.045),
      rgba(192,151,69,0.045)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 12px 35px rgba(0,0,0,0.35);

  transform: translateY(-2px);
}


.faq-card[open] {
  border-color: rgba(192,151,69,0.85);

  background:
    linear-gradient(
      135deg,
      rgba(192,151,69,0.065),
      rgba(255,255,255,0.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 15px 40px rgba(0,0,0,0.4);
}


.faq-card[open]::before {
  height: 100%;
}


/* =========================================================
   FAQ QUESTION
========================================================= */

.faq-card summary {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 76px;

  padding: 20px 22px 20px 25px;

  color: var(--color-text);

  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;

  cursor: pointer;

  list-style: none;

  user-select: none;
}


.faq-card summary::-webkit-details-marker {
  display: none;
}


.faq-card summary::marker {
  display: none;
}


.faq-card summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -3px;
  border-radius: 8px;
}


.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 30px;

  width: 30px;
  height: 30px;

  margin-left: 18px;

  border: 1px solid rgba(192,151,69,0.6);
  border-radius: 50%;

  color: var(--color-accent);

  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;

  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}


.faq-card[open] .faq-icon {
  transform: rotate(45deg);

  background-color: var(--color-accent);

  color: #000;
}


/* =========================================================
   FAQ ANSWER
========================================================= */

.faq-answer {
  padding: 0 25px 25px 25px;

  animation: faqAnswerReveal 0.35s ease both;
}


.faq-answer p {
  max-width: 780px;
  margin: 0;

  color: #aaa;

  font-size: 0.94rem;
  line-height: 1.8;
}


.faq-answer a {
  color: var(--color-accent);
}


.faq-book-link {
  display: inline-block;

  margin-top: 18px;
  padding: 8px 18px;

  border: 1px solid var(--color-accent);
  border-radius: 20px;

  color: var(--color-accent);

  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


.faq-book-link:hover {
  background-color: var(--color-accent);

  color: #000;

  text-decoration: none;

  transform: translateY(-1px);
}


@keyframes faqAnswerReveal {

  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* =========================================================
   REVIEWS SECTION
========================================================= */

.reviews-section {
  max-width: 900px;

  margin: 0 auto;

  padding: 50px 0 90px;
}


.reviews-intro {
  margin-bottom: 55px;
}


/* =========================================================
   REVIEW LIST
========================================================= */

.reviews-list {
  width: 100%;
}


.review {
  position: relative;

  padding: 0 20px 38px;
  margin-bottom: 38px;

  border-bottom:
    1px solid
    rgba(192,151,69,0.22);
}


.review:last-child {
  margin-bottom: 0;

  border-bottom: none;
}


.review::after {
  content: "✦";

  position: absolute;

  left: 50%;
  bottom: -8px;

  padding: 0 10px;

  background: #000;

  color: rgba(192,151,69,0.7);

  font-size: 0.65rem;

  transform: translateX(-50%);
}


.review:last-child::after {
  display: none;
}


/* =========================================================
   REVIEW META
========================================================= */

.review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 10px;
}


.review-name {
  color: var(--color-accent);

  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}


.review-stars {
  color: var(--color-accent);

  font-size: 0.8rem;
  letter-spacing: 0.18em;

  white-space: nowrap;

  opacity: 0.9;
}


/* =========================================================
   REVIEW TEXT
========================================================= */

.review p {
  margin: 0;

  color: #b8b8b8;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1rem;
  line-height: 1.85;
  font-style: italic;
}


.review p::before {
  content: "“";

  margin-right: 3px;

  color: rgba(192,151,69,0.75);

  font-size: 1.7em;
  line-height: 0;
  vertical-align: -0.25em;
}


.review p::after {
  content: "”";

  margin-left: 3px;

  color: rgba(192,151,69,0.75);

  font-size: 1.7em;
  line-height: 0;
  vertical-align: -0.25em;
}


/* =========================================================
   CTA
========================================================= */

.faq-reviews-cta {
  position: relative;

  max-width: 800px;

  margin: 10px auto 30px;

  padding: 60px 30px;

  border-top:
    1px solid
    rgba(192,151,69,0.35);

  border-bottom:
    1px solid
    rgba(192,151,69,0.35);

  text-align: center;
}


.cta-decoration {
  position: absolute;

  top: -4px;
  left: 50%;

  width: 8px;
  height: 8px;

  border:
    1px solid
    var(--color-accent);

  background: #000;

  transform:
    translateX(-50%)
    rotate(45deg);
}


.faq-reviews-cta h2 {
  margin-bottom: 15px;

  color: var(--color-accent);

  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 500;
}


.faq-reviews-cta > p {
  max-width: 620px;

  margin: 0 auto 25px;

  color: #999;

  line-height: 1.8;
}


.faq-review-book-button {
  display: inline-block;

  padding: 13px 28px;

  border: 2px solid var(--color-accent);
  border-radius: 30px;

  background: #1c232a;

  color: var(--color-accent);

  font-size: 0.95rem;
  font-weight: 600;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.faq-review-book-button:hover {
  background: var(--color-accent);

  color: #000;

  text-decoration: none;

  transform: translateY(-2px);

  box-shadow:
    0 5px 18px
    rgba(192,151,69,0.3);
}


.faq-reviews-cta .cta-phone {
  margin-top: 20px;
  margin-bottom: 0;

  color: #777;

  font-size: 0.85rem;
}


.faq-reviews-cta .cta-phone a {
  color: var(--color-accent);
}


/* =========================================================
   DESKTOP REVIEW REFINEMENT
========================================================= */

@media (min-width: 769px) {

  .review {
    padding-left: 35px;
    padding-right: 35px;
  }

  .review:hover .review-name {
    color: #e0bd71;
  }

}


/* =========================================================
   TABLET
=========================================================