/* =====================================================================
   VICTORIAN PUBLISHING HOUSE — PREMIUM SITE-WIDE SKIN
   ---------------------------------------------------------------------
   Extends the home-page premium look (header-premium.css) to every
   inner / service / content page. Loaded AFTER header-premium.css and
   the base styles.

   IMPORTANT — CONTRAST-SAFE:
   Several inner sections/cards use DARK background images with WHITE
   text by design. So this skin must NOT override section backgrounds,
   card backgrounds, or force text colours that could clash. It only
   adds premium treatments that are safe on ANY background:
     • premium buttons (work on light + dark; secondary scoped per ctx)
     • premium banners (self-contained dark heroes)
     • premium FAQ accordion (self-contained white cards)
     • form focus polish, heading font, gold eyebrow rules
   ===================================================================== */

:root{
  --vp-green:#29361a; --vp-green-deep:#1d2713; --vp-copper:#b46c29;
  --vp-gold:#c9a24b; --vp-gold-light:#e7c878; --vp-gold-deep:#a87f2e;
  --vp-ivory:#fdfaf3; --vp-ivory-2:#f4ecdb; --vp-ink:#2b2517;
}

/* =====================================================================
   1. INNER PAGE BANNERS  (.about-banner / .inner-banner)
   Premium dark hero matching .vp-hero. These are self-contained dark
   heroes (white/ivory text), so styling them is contrast-safe.
   ===================================================================== */
.about-banner, .inner-banner{ position:relative; overflow:hidden; }

/* upgrade the existing green overlay to a premium diagonal wash */
.about-banner.bg-overlay::before, .inner-banner.bg-overlay::before{
  background:linear-gradient(120deg, rgba(29,39,19,.94) 0%, rgba(41,54,26,.86) 48%, rgba(180,108,41,.55) 100%) !important;
}
/* warm radial glow + gold base hairline */
.about-banner::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:linear-gradient(90deg,transparent,var(--vp-gold),transparent); opacity:.7;
}
.about-banner > .container, .inner-banner > .container{ position:relative; z-index:2; }

/* banner eyebrow — Oswald, gold, with a leading gold rule */
.about-banner .inner-heading .theme-font,
.inner-banner .inner-heading .theme-font,
.about-banner .inner-heading .font-35{
  font-family:Oswald,sans-serif !important; text-transform:uppercase;
  letter-spacing:3px; font-size:15px !important; font-weight:600;
  color:var(--vp-gold-light) !important; display:inline-flex; align-items:center; gap:14px;
}
.about-banner .inner-heading .theme-font::before,
.inner-banner .inner-heading .theme-font::before{
  content:""; width:42px; height:2px; flex:0 0 auto;
  background:linear-gradient(90deg,var(--vp-gold),transparent);
}
/* banner H1 — large editorial, ivory (banner is dark) */
.about-banner .main-heading, .inner-banner .main-heading{
  color:var(--vp-ivory) !important; font-family:Oswald,sans-serif;
  letter-spacing:.5px; line-height:1.06; text-shadow:0 6px 30px rgba(0,0,0,.4);
}
.about-banner .inner-heading p, .inner-banner .inner-heading p{ color:#ece4d3 !important; }

/* =====================================================================
   2. BUTTONS  (premium pills, matching home hero)
   .theme-btn1 = gold gradient (works on light AND dark backgrounds).
   Secondary buttons are colour-scoped per context so they never clash.
   ===================================================================== */
.theme-btn1{
  background:linear-gradient(135deg,var(--vp-gold-light),var(--vp-gold) 55%,var(--vp-gold-deep)) !important;
  color:var(--vp-green-deep) !important; border:1px solid rgba(255,255,255,.35) !important;
  border-radius:50px !important; font-family:Oswald,sans-serif !important;
  letter-spacing:1px; padding:14px 32px !important;
  box-shadow:0 10px 26px rgba(180,108,41,.32); transition:transform .35s ease, box-shadow .35s ease;
}
.theme-btn1:hover{ transform:translateY(-2px); color:var(--vp-green-deep) !important;
  box-shadow:0 16px 34px rgba(180,108,41,.45); }

/* secondary / ghost buttons → pill shape + Oswald, neutral base */
.theme-btn2, .grey-btn, .theme-btn3{
  border-radius:50px !important; font-family:Oswald,sans-serif !important;
  letter-spacing:1px; padding:13px 30px !important; transition:all .35s ease;
}
/* on dark banners / CTA: gold outline, ivory text */
.about-banner .theme-btn2, .about-banner .grey-btn,
.inner-banner .theme-btn2, .inner-banner .grey-btn,
.cta-sec .theme-btn2, .cta-sec .grey-btn, .cta-sec .theme-btn3{
  background:transparent !important; border:1.5px solid var(--vp-gold) !important;
  color:var(--vp-ivory) !important;
}
.about-banner .theme-btn2:hover, .about-banner .grey-btn:hover,
.inner-banner .theme-btn2:hover, .inner-banner .grey-btn:hover,
.cta-sec .theme-btn2:hover, .cta-sec .grey-btn:hover{
  background:var(--vp-gold) !important; color:var(--vp-green-deep) !important; border-color:var(--vp-gold) !important;
  transform:translateY(-2px);
}
/* on light sections: green outline */
.sec-pd:not(.about-banner):not(.inner-banner):not(.cta-sec) .theme-btn2,
.sec-pd:not(.about-banner):not(.inner-banner):not(.cta-sec) .grey-btn{
  background:transparent !important; border:1.5px solid var(--vp-green) !important; color:var(--vp-green) !important;
}
.sec-pd:not(.about-banner):not(.inner-banner):not(.cta-sec) .theme-btn2:hover,
.sec-pd:not(.about-banner):not(.inner-banner):not(.cta-sec) .grey-btn:hover{
  background:var(--vp-green) !important; color:#fff !important; transform:translateY(-2px);
}

/* =====================================================================
   3. FAQ ACCORDION — premium (self-contained white cards)
   ===================================================================== */
.accordion .accordion{
  border:1px solid rgba(201,162,75,.25) !important; border-radius:12px !important;
  background:#fff !important; margin-bottom:14px !important; overflow:hidden;
  font-family:Oswald,sans-serif; color:var(--vp-green) !important;
  box-shadow:0 6px 18px rgba(41,54,26,.06);
}
.accordion .accordion.active{ border-color:var(--vp-gold) !important; box-shadow:0 12px 28px rgba(201,162,75,.18); }
.accordion .accordion::after{ color:var(--vp-copper) !important; }

.accordion-button{ font-family:Oswald,sans-serif !important; }
.accordion-button:not(.collapsed){ color:var(--vp-copper) !important; background:rgba(201,162,75,.08) !important; box-shadow:none !important; }
.accordion-button:focus{ box-shadow:0 0 0 .15rem rgba(201,162,75,.3) !important; }

/* =====================================================================
   4. FORMS — gold focus ring (safe on any background)
   ===================================================================== */
.form-control:focus, .nice-select:focus{
  border-color:var(--vp-gold-light) !important;
  box-shadow:0 0 0 .18rem rgba(201,162,75,.22) !important;
}

/* =====================================================================
   5. HEADING FONT POLISH (font only — never colour, to stay contrast-safe)
   ===================================================================== */
.sec-hd, .main-heading{ font-family:Oswald,sans-serif; }
/* serif-italic gold accent word, opt-in via <em> inside a heading */
.sec-hd em, .main-heading em, .vp-accent-word{
  font-family:"Playfair Display",Georgia,serif; font-style:italic; font-weight:600;
  background:linear-gradient(135deg,var(--vp-gold-deep),var(--vp-copper) 55%,var(--vp-gold-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--vp-copper);
}

/* =====================================================================
   6. SECTION-HEADER EYEBROW ACCENT (gold flanking rules)
   Only adds decorative gold rules + spacing to centred eyebrows; does
   NOT change their colour (keeps original brand colour for contrast).
   ===================================================================== */
.choose-heading.text-center .theme-font.color-green,
.our-service-hd.text-center .theme-font.color-green{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  letter-spacing:2px; text-transform:uppercase;
}
.choose-heading.text-center .theme-font.color-green::before,
.choose-heading.text-center .theme-font.color-green::after,
.our-service-hd.text-center .theme-font.color-green::before,
.our-service-hd.text-center .theme-font.color-green::after{
  content:""; width:40px; height:2px; background:linear-gradient(90deg,transparent,var(--vp-gold));
}
.choose-heading.text-center .theme-font.color-green::after,
.our-service-hd.text-center .theme-font.color-green::after{ background:linear-gradient(90deg,var(--vp-gold),transparent); }