/* ============================================================
   Amado Advocacia — Site Chrome
   Applies design system to header, footer, and base elements.
   Requires amado-design.css (loaded first).
   ============================================================ */

/* --- Bridge: map BootstrapMade variables to design tokens --- */
:root {
  --default-font:   var(--font-sans);
  --heading-font:   var(--font-display);
  --nav-font:       var(--font-sans);
  --background-color:              var(--paper);
  --default-color:                 var(--ink-2);
  --heading-color:                 var(--ink);
  --accent-color:                  var(--bronze);
  --surface-color:                 var(--paper-soft);
  --contrast-color:                var(--paper-soft);
  --nav-color:                     var(--fg-on-ink);
  --nav-hover-color:               var(--bronze-light);
  --nav-mobile-background-color:   var(--ink);
  --nav-dropdown-background-color: var(--ink);
  --nav-dropdown-color:            var(--fg-on-ink);
  --nav-dropdown-hover-color:      var(--bronze-light);
}

/* --- Base --- */
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
}

/* Only override links that are NOT inside Bootstrap component selectors */
body > a,
p a,
li a {
  color: var(--bronze-deep);
  border-bottom: 1px solid var(--rule-bronze);
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

body > a:hover,
p a:hover,
li a:hover {
  color: var(--bronze);
  border-bottom-color: var(--bronze);
}

/* ============================================================
   Header
   ============================================================ */
#header.header {
  background: var(--ink) !important;
  border-bottom: 1px solid var(--bronze) !important;
  padding: 0 !important;
  min-height: 64px;
  display: block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Tighten container height */
#header.header .site-header__inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 992px) {
  #header.header {
    min-height: 88px;
  }
  #header.header .site-header__inner {
    min-height: 88px;
    gap: 32px;
  }
}

/* Brand mark */
#header .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--bronze) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-standard);
}

#header .brand:hover {
  color: var(--bronze-light) !important;
  border-bottom: none !important;
}

#header .brand__mark {
  height: 22px;
  width: auto;
  display: block;
}

#header .brand__tag {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--bronze-light);
  padding-left: 14px;
  border-left: 1px solid var(--rule-on-ink);
  border-bottom: none !important;
  white-space: nowrap;
  display: none;
}

@media (min-width: 480px) {
  #header .brand__tag {
    display: block;
  }
}

/* Navmenu links */
#header .navmenu ul {
  gap: 0;
}

#header .navmenu a,
#header .navmenu a:focus {
  color: var(--fg-on-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
  padding: 28px 12px !important;
}

#header .navmenu a:hover,
#header .navmenu li:hover > a,
#header .navmenu .active,
#header .navmenu .active:focus {
  color: var(--bronze-light) !important;
}

/* Dropdowns */
#header .navmenu .dropdown > ul {
  background: var(--ink) !important;
  border: 1px solid var(--rule-on-ink) !important;
  border-top: 1px solid var(--bronze) !important;
  box-shadow: var(--shadow-lg) !important;
}

#header .navmenu .dropdown ul a {
  color: var(--fg-on-ink) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  padding: 10px 20px !important;
  border-bottom: none !important;
}

#header .navmenu .dropdown ul a:hover {
  color: var(--bronze-light) !important;
  background: transparent !important;
}

/* Mobile hamburger */
#header .mobile-nav-toggle {
  color: var(--bronze-light) !important;
}

/* Header CTA */
#header .header-cta {
  display: inline-block;
  border: 1px solid var(--bronze-light) !important;
  background: transparent !important;
  color: var(--bronze-light) !important;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all 160ms var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 4px;
}

#header .header-cta:hover {
  background: var(--bronze) !important;
  color: var(--ink) !important;
  border-color: var(--bronze) !important;
}

/* ============================================================
   Footer
   ============================================================ */
#footer.footer {
  background: var(--ink) !important;
  color: var(--fg-on-ink-muted);
  border-top: 1px solid var(--bronze) !important;
  padding: 72px 0 28px !important;
}

/* Remove BootstrapMade footer-top padding */
#footer.footer .footer-top {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Design-system footer grid */
.amado-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 52px;
}

@media (max-width: 1024px) {
  .amado-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 600px) {
  .amado-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Brand SVG */
.footer__brand {
  color: var(--bronze);
  margin-bottom: 18px;
  display: block;
  border-bottom: none !important;
}

.footer__brand svg {
  width: 150px;
  height: auto;
}

.footer__brand:hover {
  color: var(--bronze-light);
  border-bottom: none !important;
}

/* Address block */
.footer__addr {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.75;
  color: var(--fg-on-ink-muted);
  margin: 0;
}

.footer__addr strong {
  color: var(--fg-on-ink);
  font-weight: 500;
}

/* Footer column headings */
#footer.footer h4 {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--bronze-light) !important;
  font-weight: 500 !important;
  margin: 0 0 18px !important;
}

/* Footer link lists */
#footer.footer ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Hide BootstrapMade chevron icons in footer lists */
#footer.footer ul li i.bi-chevron-right {
  display: none !important;
}

#footer.footer ul li {
  padding: 0 !important;
}

#footer.footer a {
  color: var(--fg-on-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  transition: color var(--dur-fast) var(--ease-standard) !important;
}

#footer.footer a:hover {
  color: var(--bronze-light) !important;
}

/* Social links row */
.footer__social {
  display: flex;
  gap: 14px;
  margin-top: 14px;
}

.footer__social a {
  color: var(--fg-on-ink-muted) !important;
  font-size: 18px !important;
  border-bottom: none !important;
}

.footer__social a:hover {
  color: var(--bronze-light) !important;
}

/* Footer bottom bar */
.footer__bottom {
  padding-top: 24px;
  border-top: 1px solid var(--rule-on-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--fg-on-ink-muted);
}

/* Hide BootstrapMade footer copyright block */
#footer.footer .copyright {
  display: none !important;
}

/* ============================================================
   Scroll-top button
   ============================================================ */
.scroll-top {
  background: var(--bronze) !important;
}

.scroll-top:hover {
  background: var(--bronze-deep) !important;
}

/* ============================================================
   Mobile nav panel (inner area)
   ============================================================ */
@media (max-width: 1199px) {
  #header .navmenu ul {
    background: var(--ink) !important;
    border: 1px solid var(--rule-on-ink) !important;
  }

  #header .navmenu a,
  #header .navmenu a:focus {
    padding: 14px 20px !important;
    color: var(--fg-on-ink) !important;
    border-bottom: 1px solid var(--rule-on-ink) !important;
  }

  #header .navmenu .dropdown ul {
    border: none !important;
    border-top: none !important;
  }
}

/* ============================================================
   Page Heroes — Design System Overrides
   !important is required throughout to beat inline styles.
   ============================================================ */

/* --- 1. Hero section background (replaces navy gradient) --- */
section.dark-background {
  background: var(--ink) !important;
  border-bottom: 1px solid var(--bronze) !important;
  padding: 88px 0 72px !important;
}

/* Section utility class conflict */
section.section.dark-background {
  background: var(--ink) !important;
}

/* --- 2. H1 in heroes: Cormorant Garamond serif --- */
section.dark-background h1 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--paper-soft) !important;
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
}

/* Remove Bootstrap's fw-bold override */
section.dark-background h1.fw-bold {
  font-weight: 500 !important;
}

/* --- 3. Role / eyebrow label (gold-tinted paragraph) --- */
section.dark-background p[style*="c9a84c"],
section.dark-background p[style*="C9A84C"] {
  color: var(--bronze-light) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

/* --- 4. Blockquote: bronze left rule, design serif italics --- */
section.dark-background blockquote {
  border-left: 2px solid var(--bronze) !important;
  padding-left: 24px !important;
  margin-left: 0 !important;
}

section.dark-background blockquote p,
section.dark-background blockquote .text-white-50 {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: clamp(15px, 1.6vw, 18px) !important;
  line-height: 1.6 !important;
  color: var(--fg-on-ink-muted) !important;
  text-align: left !important;
}

/* --- 5. General text in heroes --- */
section.dark-background p:not([style*="c9a84c"]):not([style*="C9A84C"]) {
  color: var(--fg-on-ink-muted) !important;
}

section.dark-background .text-white {
  color: var(--paper-soft) !important;
}

section.dark-background .text-white-50 {
  color: var(--fg-on-ink-muted) !important;
}

/* --- 6. Profile image (Sobre page) --- */
section.dark-background img[style*="border"] {
  border-color: var(--bronze-light) !important;
  border-width: 1px !important;
  box-shadow: var(--shadow-md) !important;
}

/* --- 7. CTA button: replace WhatsApp green with bronze outline --- */
section.dark-background .btn {
  background: transparent !important;
  color: var(--bronze-light) !important;
  border: 1px solid var(--bronze-light) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-xs) !important;
  padding: 13px 28px !important;
  transition: all 160ms var(--ease-standard) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

section.dark-background .btn:hover,
section.dark-background .btn:focus {
  background: var(--bronze) !important;
  color: var(--ink) !important;
  border-color: var(--bronze) !important;
}

/* ============================================================
   Section Title (.section-title) — Contato and generic pages
   ============================================================ */
.section-title h1,
.section-title h2 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  text-transform: none !important;
  letter-spacing: var(--ls-display) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
}

/* Replace BootstrapMade accent underline with bronze hairline */
.section-title h2::before,
.section-title h1::before {
  background: var(--rule) !important;
  width: 80px !important;
}

.section-title h2::after,
.section-title h1::after {
  background: var(--bronze) !important;
  height: 1px !important;
  width: 40px !important;
}

.section-title p {
  color: var(--ink-soft) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-body-lg) !important;
  line-height: var(--lh-loose) !important;
}

/* ============================================================
   Page Title (.page-title) — Blog/Details breadcrumb bar
   ============================================================ */
.page-title {
  background: var(--paper-deep) !important;
  border-bottom: 1px solid var(--rule-bronze) !important;
  padding: 28px 0 !important;
}

.page-title h1 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  letter-spacing: var(--ls-display) !important;
  line-height: 1.2 !important;
  margin-top: 8px !important;
}

.page-title .breadcrumbs ol {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.page-title .breadcrumbs a {
  color: var(--bronze-deep) !important;
  border-bottom: none !important;
  text-decoration: none !important;
}

.page-title .breadcrumbs a:hover {
  color: var(--bronze) !important;
}

.page-title .breadcrumbs ol li+li::before {
  color: var(--ink-faint) !important;
  content: "·" !important;
}

.page-title .breadcrumbs .current {
  color: var(--ink-soft) !important;
}

/* ============================================================
   Eyebrow utility (reusable across views)
   ============================================================ */
.amado-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--bronze-light);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.amado-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--bronze-light);
  display: inline-block;
  flex-shrink: 0;
}

/* ============================================================
   Content article headings — weight + color override
   ============================================================ */
article h2, article h3, article h4, article h5 {
  font-weight: 500 !important;
  color: var(--ink) !important;
}
/* CTA escuro dentro de article — restaura cor clara */
article .amado-cta h2,
article .amado-cta h3,
article .amado-cta h4,
article .amado-cta h5 {
  color: var(--fg-on-ink) !important;
}

/* ============================================================
   Accordion — design system tokens
   ============================================================ */
.accordion-button {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background-color: var(--paper-soft) !important;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--paper-deep) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.accordion-button::after {
  filter: none !important;
}

.accordion-body {
  background: var(--paper-soft);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-3);
}

.accordion-item {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  margin-bottom: 8px;
}

/* ============================================================
   Table — design system tokens
   ============================================================ */
.table thead tr {
  background: var(--ink) !important;
}

.table thead th {
  background: var(--ink) !important;
  color: var(--fg-on-ink) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-color: var(--rule-on-ink) !important;
  padding: 14px 16px !important;
}

.table tbody td {
  color: var(--ink-2) !important;
  border-color: var(--rule) !important;
  padding: 12px 16px !important;
  font-size: 14.5px !important;
}

.table-bordered {
  border-color: var(--rule) !important;
}

/* list-group numbered steps */
.list-group-numbered > .list-group-item::before {
  color: var(--bronze) !important;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
}