/* ============================================================
   VERBEN GARDEN — CENTRAL BRAND SYSTEM
   Official logo colors: #192D22 (primary), #5C6044 (detail)
   Typography: Epilogue everywhere — same family as the main navigation
   This file is intentionally loaded last on every page.
   ============================================================ */

:root {
  /* Official chromatic palette — only these two colors carry brand emphasis. */
  --brand-primary: #192D22;
  --brand-detail: #5C6044;

  /* Neutral support palette. */
  --brand-ivory: #F8F6F0;
  --brand-ivory-2: #F3F0E8;
  --brand-paper: #FFFFFF;
  --brand-text: #192D22;
  --brand-muted: #5A605C;
  --brand-line: rgba(25,45,34,.14);
  --brand-detail-soft: rgba(92,96,68,.10);
  --brand-detail-soft-2: rgba(92,96,68,.16);

  /* Typography — one central family, matching “Ana Sayfa / Kurumsal / Hizmetler” navigation. */
  --brand-font: "Epilogue", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: var(--brand-font);
  --serif: var(--brand-font); /* legacy alias: intentionally the same family */
  --heading: var(--brand-font);

  /* Backwards-compatible aliases used by older sections. */
  --green-950: var(--brand-primary);
  --green-900: var(--brand-primary);
  --olive-700: var(--brand-detail);
  --olive-500: var(--brand-detail);
  --ink: var(--brand-text);
  --muted: var(--brand-muted);
  --border: var(--brand-line);
  --ivory-50: var(--brand-ivory);
  --ivory-100: var(--brand-ivory-2);
}

html,
body {
  color: var(--brand-text);
  background: var(--brand-ivory);
  font-family: var(--brand-font) !important;
}

/*
   SINGLE TYPOGRAPHY SOURCE OF TRUTH
   The exact family used by the desktop navigation is now used site-wide.
   Visual hierarchy comes from size, weight and spacing — never from a second font family.
*/
body,
button,
input,
textarea,
select,
option,
optgroup,
label,
summary,
blockquote,
figcaption,
.main-nav,
.topbar,
.eyebrow,
[class*="eyebrow"],
[class*="kicker"],
[class*="breadcrumb"],
[class*="meta"],
.btn,
[class*="button"],
[class*="cta"] a {
  font-family: var(--brand-font) !important;
}

/* All semantic text elements use Epilogue, including headings that previously used Fraunces. */
body :where(h1,h2,h3,h4,h5,h6,p,a,span,strong,em,small,li,dt,dd) {
  font-family: var(--brand-font) !important;
  font-variation-settings: normal !important;
}

/* Keep hierarchy through weight rather than switching families. */
main h1,
main h2,
.corporate-hero h1,
.footer-cta h2,
.service-master-hero h1,
.service-master h2,
.blog-article h1,
.blog-article h2,
.blog-page h1,
.blog-page h2,
.hero h1,
.about-preview__content > h2,
.services-showcase__copy h2,
.service-connect__content h2,
.why-verben__copy h2,
.elite-plants__intro h2,
.projects-showcase__heading h2,
.journal-showcase__heading h2,
.seasonal-calendar__intro h2,
.home-about__content > h2 {
  font-family: var(--brand-font) !important;
  font-weight: 500 !important;
}

main h3,
main h4,
main h5,
main h6,
.service-master h3,
.service-card h3,
.service-index-card h3,
.journal-card h3,
.project-master h3,
.why-verben-card h3,
.blog-sidebar h3 {
  font-family: var(--brand-font) !important;
  font-weight: 600 !important;
}

/* Legacy component tokens now resolve to the same Epilogue family. */
.page-service-detail.visual-service-detail,
.page-service-detail.visual-service-detail.service-master-page {
  --vg-serif: var(--brand-font);
  --sm-serif: var(--brand-font);
}

/* ============================================================
   SHARED COLOR ROLES
   ============================================================ */

::selection {
  background: var(--brand-detail);
  color: var(--brand-ivory);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: var(--brand-detail);
}

/* All standard solid CTA treatments. */
.btn--primary,
.services-showcase__all,
.service-connect__submit,
.services-page__cta,
.service-detail__button,
.service-detail__aside-cta,
.contact-process__button,
.contact-reference__submit,
.contact-reference__button,
.service-master-btn--primary,
.blog-sidebar__promo a,
.blog-tag,
.blog-article__footer-tags a {
  background: var(--brand-detail) !important;
  border-color: var(--brand-detail) !important;
  color: var(--brand-ivory) !important;
}

.btn--primary:hover,
.services-showcase__all:hover,
.services-showcase__all:focus-visible,
.service-connect__submit:hover,
.service-connect__submit:focus-visible,
.services-page__cta:hover,
.service-detail__button:hover,
.service-detail__aside-cta:hover,
.contact-process__button:hover,
.contact-reference__submit:hover,
.contact-reference__button:hover,
.service-master-btn--primary:hover,
.blog-sidebar__promo a:hover,
.blog-tag:hover,
.blog-tag:focus-visible,
.blog-article__footer-tags a:hover {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-ivory) !important;
}

/* Outline / ghost CTA treatment. */
.btn--outline,
.service-master-btn--ghost {
  border-color: rgba(92,96,68,.58) !important;
  color: var(--brand-primary) !important;
}
.btn--outline:hover,
.service-master-btn--ghost:hover {
  border-color: var(--brand-detail) !important;
  background: var(--brand-detail-soft) !important;
}

/* ============================================================
   HEADER / NAVIGATION / DRAWER
   ============================================================ */

.site-header,
.nav-shell {
  background: var(--brand-ivory);
}
.topbar,
.menu-toggle.menu-toggle--seed,
.garden-menu {
  background-color: var(--brand-primary) !important;
}
.main-nav a,
.site-search-toggle,
.sibling-brand,
.garden-menu__close {
  color: var(--brand-primary);
}
.main-nav a::after {
  background: var(--brand-detail);
}
.leaf-glyph,
.garden-menu__text-link span,
.garden-menu-service > span:last-child,
.garden-menu-utility__icon,
.garden-menu__utilities > a > span:last-child,
.garden-menu__sibling > span {
  color: rgba(248,246,240,.78) !important;
}
.garden-menu__contact svg {
  fill: rgba(248,246,240,.78) !important;
}
.menu-toggle.menu-toggle--seed span {
  background: var(--brand-ivory) !important;
}
.menu-toggle.menu-toggle--seed span:nth-child(4) {
  background: rgba(248,246,240,.64) !important;
}

/* ============================================================
   HOMEPAGE + GENERAL SECTIONS
   ============================================================ */

.hero h1,
.about-preview__content > h2,
.services-showcase__copy h2,
.service-connect__content h2,
.why-verben__copy h2,
.elite-plants__intro h2,
.projects-showcase__heading h2,
.journal-showcase__heading h2,
.seasonal-calendar__intro h2,
.home-about__content > h2 {
  font-family: var(--brand-font) !important;
  font-weight: 500 !important;
}

.services-showcase {
  --services-green: var(--brand-primary);
  --services-accent: var(--brand-detail);
  --services-text: var(--brand-primary);
  --services-muted: var(--brand-muted);
}
.services-showcase__eyebrow,
.services-showcase__copy h2 {
  color: var(--brand-primary) !important;
}
.service-card__badge {
  background: var(--brand-primary) !important;
}
.service-card:hover,
.service-card:focus-within {
  border-color: rgba(92,96,68,.38) !important;
}

.service-connect {
  --connect-green: var(--brand-primary);
  --connect-accent: var(--brand-detail);
}
.service-connect__eyebrow-icon {
  color: var(--brand-detail) !important;
}
.service-connect__field input:focus,
.service-connect-select__trigger:hover,
.service-connect-select__trigger:focus-visible,
.service-connect-select__trigger[aria-expanded="true"] {
  border-color: rgba(92,96,68,.66) !important;
  box-shadow: 0 0 0 4px rgba(92,96,68,.08) !important;
}
.service-connect-select__ghost {
  border-color: var(--brand-detail) !important;
}
.service-connect-select__menu button:hover,
.service-connect-select__menu button:focus-visible,
.service-connect-select__menu button.is-active {
  background: var(--brand-detail-soft-2) !important;
  color: var(--brand-primary) !important;
}
.service-connect__stats {
  background: var(--brand-primary) !important;
}

/* ============================================================
   CORPORATE / ABOUT
   ============================================================ */

.page-about,
.page-rnd,
.page-solutions {
  --corp-accent: var(--brand-detail) !important;
}
.corporate-breadcrumb__current {
  color: rgba(248,246,240,.82) !important;
}
.page-about .about-pillars__eyebrow,
.page-about .about-pillars__title-accent,
.page-about .about-pillars__label {
  color: var(--brand-ivory) !important;
}
.page-about .about-pillars__checks li span {
  background: rgba(92,96,68,.34) !important;
  color: var(--brand-ivory) !important;
}
.page-about .about-pillars__tab.is-active,
.page-about .about-pillars__badge,
.page-about .about-pillars__link {
  background: var(--brand-detail) !important;
  border-color: var(--brand-detail) !important;
  color: var(--brand-ivory) !important;
}
.page-about .about-pillars__panel--visual {
  background: var(--brand-primary) !important;
}

/* ============================================================
   SERVICES INDEX + TESTIMONIALS
   ============================================================ */

.services-page {
  --services-green: var(--brand-primary);
  --services-accent: var(--brand-detail);
  --services-text: var(--brand-primary);
}
.service-testimonials,
.service-testimonials__surface {
  --services-green: var(--brand-primary);
}
.service-testimonials__dot.is-active {
  background: var(--brand-detail) !important;
  box-shadow: 0 0 0 9px rgba(92,96,68,.10), 0 0 0 1px var(--brand-detail) !important;
}
.service-testimonial__quote-mark {
  color: var(--brand-detail) !important;
  font-family: var(--brand-font) !important;
}

/* Old generic service-detail widgets, if still rendered anywhere. */
.service-benefit-card:hover {
  background: var(--brand-detail-soft) !important;
  border-color: rgba(92,96,68,.42) !important;
}
.service-benefit-card__icon {
  background: var(--brand-primary) !important;
  color: var(--brand-ivory) !important;
}
.service-faq__item.is-open {
  background: var(--brand-detail-soft) !important;
  border-color: rgba(92,96,68,.42) !important;
}

/* ============================================================
   MASTER SERVICE DETAIL SYSTEM
   ============================================================ */

.page-service-detail.visual-service-detail.service-master-page {
  --sm-bg: var(--brand-ivory);
  --sm-paper: #FBFAF6;
  --sm-ink: var(--brand-primary);
  --sm-muted: var(--brand-muted);
  --sm-line: rgba(25,45,34,.13);
  --sm-green: var(--brand-detail);
  --sm-soft: rgba(92,96,68,.09);
  --sm-serif: var(--serif);
}
.page-service-detail.visual-service-detail.service-master-page .service-master-hero {
  background: var(--brand-primary) !important;
}
.page-service-detail.visual-service-detail.service-master-page .service-master-hero__overlay {
  background: linear-gradient(90deg,rgba(25,45,34,.38) 0%,rgba(25,45,34,.42) 42%,rgba(25,45,34,.66) 68%,rgba(25,45,34,.82) 100%) !important;
}
.page-service-detail.visual-service-detail.service-master-page .service-master-breadcrumb span[aria-current] {
  color: rgba(248,246,240,.82) !important;
}
.page-service-detail.visual-service-detail.service-master-page .service-master-hero h1,
.page-service-detail.visual-service-detail.service-master-page .service-master h2 {
  font-family: var(--brand-font) !important;
}
.page-service-detail.visual-service-detail.service-master-page .service-master h3 {
  font-family: var(--sans) !important;
}
.page-service-detail.visual-service-detail.service-master-page .service-master-kicker span,
.page-service-detail.visual-service-detail.service-master-page .service-master-card-arrow {
  background-color: var(--brand-detail) !important;
  color: var(--brand-detail) !important;
}
.page-service-detail.visual-service-detail.service-master-page .service-master-round-icon,
.page-service-detail.visual-service-detail.service-master-page .service-master-card-icon,
.page-service-detail.visual-service-detail.service-master-page .service-master-step__icon,
.page-service-detail.visual-service-detail.service-master-page .service-master-faq__icon {
  background: var(--brand-detail-soft) !important;
  color: var(--brand-detail) !important;
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact-reference,
.contact-process,
.page-contact {
  --contact-green: var(--brand-primary);
  --contact-accent: var(--brand-detail);
}
.contact-reference__eyebrow-icon,
.contact-process__eyebrow-icon,
.contact-visit__eyebrow {
  color: var(--brand-detail) !important;
}
.contact-reference select:focus,
.contact-reference input:focus,
.contact-reference textarea:focus {
  border-color: rgba(92,96,68,.66) !important;
  box-shadow: 0 0 0 4px rgba(92,96,68,.08) !important;
}

/* ============================================================
   BLOG
   ============================================================ */

.blog-page,
.blog-detail-page,
.blog-article {
  --blog-accent: var(--brand-detail);
}
.blog-recent__item time,
.blog-article__quote cite {
  color: var(--brand-detail) !important;
}
.blog-sidebar {
  background: var(--brand-primary) !important;
}
.blog-tag {
  box-shadow: none !important;
}

/* ============================================================
   FOOTER — remove the unrelated gold palette
   ============================================================ */

.footer-cta,
.site-footer {
  background-color: var(--brand-primary) !important;
}
.footer-cta {
  border-bottom-color: rgba(92,96,68,.55) !important;
}
.footer-cta__eyebrow {
  color: rgba(248,246,240,.78) !important;
}
.footer-cta h2 {
  color: var(--brand-ivory) !important;
  font-family: var(--brand-font) !important;
}
.footer-cta__button {
  font-family: var(--sans) !important;
}
.footer-cta__button--primary {
  color: var(--brand-ivory) !important;
  background: var(--brand-detail) !important;
  border-color: var(--brand-detail) !important;
}
.footer-cta__button--primary:hover {
  background: rgba(92,96,68,.86) !important;
}
.footer-cta__button--outline {
  color: var(--brand-ivory) !important;
  background: rgba(25,45,34,.42) !important;
  border-color: rgba(92,96,68,.92) !important;
}
.footer-cta__button--outline:hover {
  color: var(--brand-ivory) !important;
  background: rgba(92,96,68,.22) !important;
  border-color: var(--brand-detail) !important;
}
/* Footer artwork is owned by footer-premium.css.
   Keep only the brand fallback color here; do not overwrite the artwork
   or its ::before background layer with a shorthand `background` rule. */
.site-footer {
  background-color: var(--brand-primary) !important;
}
.site-footer__line-art {
  border-color: rgba(92,96,68,.18) !important;
}
.site-footer__legal b,
.site-footer a:not(.site-footer__agency-hidden):hover {
  color: var(--brand-ivory) !important;
}

/* ============================================================
   ACCESSIBLE DETAIL-ON-DARK RULE
   #5C6044 is deliberately not used as small text on #192D22.
   The detail color remains borders, fills and decoration; copy stays ivory.
   ============================================================ */

.topbar,
.garden-menu,
.footer-cta,
.site-footer,
.service-master-hero,
.page-about .about-pillars__panel--content,
.page-about .about-pillars__panel--visual {
  --on-dark: var(--brand-ivory);
}