/* CA'DORE child theme -- global brand/design-system CSS.
   Single source of truth for editorial styling that Kadence Free cannot
   express natively (local fonts, per-instance uppercase system, focus
   ring, sticky-header blur, etc). The Kadence Customizer "Additional CSS"
   field has been retired -- everything that used to live there is now
   classified here, in woocommerce.css, or removed (dead/migrated to a
   native Kadence setting). See the audit notes in each section. */

@font-face {
  font-family: "BROLIMO";
  src: url("../fonts/BrolimoRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-uppercase: "BROLIMO", serif;
  --ls-uppercase-tight: 0.08em;
  --ls-uppercase: 0.12em;
  --ls-uppercase-wide: 0.16em;
  --lh-uppercase: 1.4;

  /* Brand surface/text tokens. --cd-bg intentionally matches the design
     system's single --background token (oklch 0.951 0.029 102.7 / #F2F0DA),
     which the doc defines as the shared value for page background, cards,
     AND popovers -- so drawers/raised panels use this same value rather
     than the undocumented #F7F5EF that had crept into a few rules. */
  --cd-bg: #F2F0DA;
  --cd-fg: #141410;
  --cd-primary: #535443;
  --cd-accent: #97A085;
  --cd-base-3: #DBD9C2;
  --cd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===================================================================
   BASE TYPOGRAPHY -- Creato Display (body) / BROLIMO (headings)
   Kadence Free's Typography Customizer only offers Google/system fonts,
   not local uploads, so it can't select these -- this assignment is a
   permanent, necessary bridge, not a temporary override.
   =================================================================== */
body,
button,
input,
textarea,
select,
p, li, a {
  font-family: "Creato Display", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.wp-block-heading {
  font-family: "BROLIMO", serif;
}

.entry-content p {
  color: rgba(20, 20, 16, 0.85);
}

/* Kadence "Advanced Heading" blocks used as eyebrows/section markers or
   filter labels follow this theme's own naming convention (uniqueID ending
   in "-eyebrow" or "-label") consistently across every page. Targeting
   that convention covers every current and future instance site-wide
   without editing individual blocks. */
.wp-block-kadence-advancedheading[class*="-eyebrow"],
.wp-block-kadence-advancedheading[class*="-label"] {
  font-family: var(--font-uppercase);
  letter-spacing: var(--ls-uppercase);
  line-height: var(--lh-uppercase);
}

/* Utility class for eyebrow text outside Kadence heading blocks
   (widgets, template parts). */
.eyebrow {
  font-family: var(--font-uppercase);
  font-size: 0.7rem;
  letter-spacing: var(--ls-uppercase-wide);
  text-transform: uppercase;
  color: rgba(20, 20, 16, 0.55);
  line-height: var(--lh-uppercase);
  display: block;
}

/* ===================================================================
   EYEBROW -> HEADING SPACING FIX
   Kadence's own content.min.css carries ".single-content h1..h6 {
   margin: 1.5em 0 0.5em}", a prose-heading rule meant for classic-editor
   body copy. It also matches every Kadence Advanced Heading block that
   renders as a literal h1-h6 tag, so it was landing on every big display
   heading that immediately follows an eyebrow (Home, Loja, Sobre...).
   Because the margin is in em units it's relative to each heading's own
   font-size, producing wildly different (and always too large) gaps --
   84px, 96px, 54px etc -- depending on the heading's size, instead of
   one consistent editorial gap. This overrides that margin-top with one
   shared, small value site-wide, using the general-sibling combinator
   (not "+") because Kadence injects a scoped <style> tag between blocks
   in the DOM, and qualifying with the heading tag name so it never
   touches paragraph blocks that share the same base class. */
.wp-block-kadence-advancedheading[class*="-eyebrow"] ~ h1.wp-block-kadence-advancedheading,
.wp-block-kadence-advancedheading[class*="-eyebrow"] ~ h2.wp-block-kadence-advancedheading,
.wp-block-kadence-advancedheading[class*="-eyebrow"] ~ h3.wp-block-kadence-advancedheading,
.wp-block-kadence-advancedheading[class*="-eyebrow"] ~ h4.wp-block-kadence-advancedheading,
.wp-block-kadence-advancedheading[class*="-eyebrow"] ~ h5.wp-block-kadence-advancedheading,
.wp-block-kadence-advancedheading[class*="-eyebrow"] ~ h6.wp-block-kadence-advancedheading {
  margin-top: 1rem;
}

/* ===================================================================
   BUTTONS (native WP buttons + WooCommerce mini-cart action links)
   letter-spacing and text-transform are now owned by Kadence's native
   Customizer > Buttons > Typography control (set to 0.12em / uppercase,
   matching the value that was previously silently duplicated here --
   editors can now change button letter-spacing from Kadence and see it
   take effect). Only font-family and line-height stay here, since
   Kadence has no local-font picker and no line-height-for-buttons
   control exposed for this element set.
   =================================================================== */
a.wp-block-button__link,
.wp-element-button,
.woocommerce a.button.wc-forward,
.woocommerce a.button.checkout.wc-forward {
  font-family: var(--font-uppercase);
  line-height: var(--lh-uppercase);
}

/* Outline button style: border-bottom instead of a full border, per
   the approved editorial design (Kadence's own outline style is a full
   border on all sides). */
.wp-block-button.is-style-outline .wp-block-button__link {
  border: none !important;
  border-bottom: 1px solid rgba(83, 84, 67, 0.4) !important;
  padding: 0 0 4px !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-bottom-color: var(--cd-fg) !important;
}

/* Active menu item: subtle underline (Kadence Free's default active-item
   style is a filled background/border -- not exposed as a Customizer
   choice, so this stays a CSS bridge). */
.header-navigation .menu > li.current-menu-item > a,
.header-navigation .menu > li.current_page_item > a {
  border-bottom: 1px solid rgba(83, 84, 67, 0.5) !important;
  padding-bottom: 2px !important;
  background: transparent !important;
}

/* Sticky header: blur behind it (Kadence Free doesn't expose backdrop-filter).
   Live DOM check (2026-07-07) found this theme's actual Kadence version
   marks the sticky element as .site-header-inner-wrap.kadence-sticky-header
   with an .item-is-fixed state class -- .site-header-row-container.item-is-stuck
   never matches anything on this site, so the blur was silently never applying. */
.site-header-inner-wrap.kadence-sticky-header.item-is-fixed {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Footer wordmark (Brolimo, not a standard widget title). */
.cd-wordmark {
  font-family: "BROLIMO", serif;
  font-size: 2rem;
  font-weight: 400;
  text-transform: lowercase;
  color: var(--cd-primary);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}

/* Decorative accent lines/dividers. */
.accent-line {
  display: block;
  height: 1px;
  width: 64px;
  background: var(--cd-accent);
  border: none;
}
.accent-line-short { width: 32px; }
.accent-line-long { width: 96px; }

/* Accessibility: visible keyboard focus (Kadence doesn't expose a
   focus-ring color control). */
*:focus-visible {
  outline: 2px solid var(--cd-primary);
  outline-offset: 3px;
}

::selection {
  background: rgba(83, 84, 67, 0.15);
  color: var(--cd-primary);
}

.cadore-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cadore-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5em 1.1em;
  border: 1px solid rgba(83, 84, 67, 0.35);
  border-radius: 999px;
  font-family: var(--font-uppercase);
  font-size: 0.75rem;
  letter-spacing: var(--ls-uppercase-tight);
  line-height: var(--lh-uppercase);
  text-transform: uppercase;
  text-decoration: none;
  color: #535443;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.cadore-filter-pill:hover,
.cadore-filter-pill.is-active {
  background: transparent;
  border-color: #141410;
  color: #141410;
  font-weight: 500;
}

.cadore-filter-pill .count {
  opacity: 0.65;
  font-size: 0.85em;
}

/* The pill's visual surface (background, border, radius, padding, colour,
   hover/active state) lives entirely on the wrapper .cadore-filter-pill above.
   Without this, the inner <a class="wp-block-button__link"> still carries
   Kadence's/WordPress's global button styling (filled background, its own
   padding and border-radius), producing a second nested "button inside a
   button" surface. This neutralises that inner element instead of layering
   another style on top, so the wrapper is the only visible surface. */
.cadore-filter-pill > .wp-block-button__link,
.wp-block-buttons.cadore-filter-pills .wp-block-button__link {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* ===================================================================
   MOBILE NAV + POPOUT CART DRAWER (Kadence #mobile-drawer / #cart-drawer)
   =================================================================== */
#mobile-drawer .drawer-inner,
#cart-drawer .drawer-inner {
  background: var(--cd-bg);
}

#mobile-drawer,
#cart-drawer {
  width: min(380px, 90vw) !important;
}

#mobile-drawer .drawer-header,
#cart-drawer .drawer-header {
  border-bottom: 1px solid rgba(83, 84, 67, 0.15);
  padding: 1.25rem 1.5rem;
}

#mobile-drawer .drawer-inner-content,
#mobile-drawer .mobile-menu-container,
#mobile-drawer nav {
  padding: 0.5rem 1.5rem 2rem;
}

#mobile-drawer ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mobile-drawer ul.menu > li {
  border-bottom: 1px solid rgba(83, 84, 67, 0.12);
}

#mobile-drawer ul.menu > li > a {
  display: block;
  font-family: "BROLIMO", serif;
  font-size: 1.5rem;
  text-transform: lowercase;
  padding: 0.9rem 0;
  color: #141410;
  text-decoration: none;
}

#mobile-drawer ul.menu > li > a:hover,
#mobile-drawer ul.menu > li.current-menu-item > a {
  color: #535443;
}

#mobile-drawer .menu-toggle-close,
#cart-drawer .drawer-toggle {
  color: #141410;
}

#cart-drawer .drawer-header .kadence-cart-title,
#cart-drawer .drawer-header h2 {
  font-family: "BROLIMO", serif;
  text-transform: lowercase;
  font-size: 1.4rem;
}

/* ===================================================================
   WPFORMS -- CA'DORE editorial styling (kills default blue, adds pills)
   Underline-style inputs (transparent, border-bottom only) confirmed as
   the live/approved treatment. Covers both the generic WPForms field
   selector and the "-medium" size class so any field size gets it.
   =================================================================== */
.wpforms-container .wpforms-field {
  padding-bottom: 1.6rem;
}

.wpforms-container .wpforms-field-label,
.wpforms-field-label,
.woocommerce form .form-row label {
  font-family: var(--font-uppercase);
  font-size: 0.7rem;
  letter-spacing: var(--ls-uppercase-wide);
  line-height: var(--lh-uppercase);
  text-transform: uppercase;
  color: rgba(20, 20, 16, 0.55);
  margin-bottom: 0.75rem;
  display: block;
}

.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field textarea,
.wpforms-container input.wpforms-field-medium,
.wpforms-container textarea.wpforms-field-medium,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--cd-base-3) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  font-size: 16px !important;
  color: var(--cd-fg) !important;
  box-shadow: none !important;
  width: 100%;
  transition: border-color 200ms ease;
}

.wpforms-field textarea,
.wpforms-container textarea.wpforms-field-medium,
.woocommerce form .form-row textarea {
  border: 1px solid var(--cd-base-3) !important;
  padding: 16px !important;
  min-height: 140px !important;
  resize: vertical;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-container input.wpforms-field-medium:focus,
.wpforms-container textarea.wpforms-field-medium:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-bottom-color: var(--cd-primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

::placeholder {
  color: rgba(20, 20, 16, 0.35) !important;
}

.wpforms-container .wpforms-field-radio fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.wpforms-container .wpforms-field-radio legend.wpforms-field-label {
  margin-bottom: 0.85rem;
}

.wpforms-container .wpforms-field-radio ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wpforms-container .wpforms-field-radio ul li {
  margin: 0;
  position: relative;
}

.wpforms-container .wpforms-field-radio ul li input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.wpforms-container .wpforms-field-radio ul li label.wpforms-field-label-inline {
  display: inline-flex;
  padding: 0.55em 1.1em;
  border: 1px solid rgba(83, 84, 67, 0.35);
  border-radius: 999px;
  font-family: var(--font-uppercase);
  font-size: 0.72rem;
  letter-spacing: var(--ls-uppercase-tight);
  line-height: var(--lh-uppercase);
  text-transform: uppercase;
  color: #535443;
  cursor: pointer;
  margin: 0;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.wpforms-container .wpforms-field-radio ul li input[type="radio"]:checked + label,
.wpforms-container .wpforms-field-radio ul li input[type="radio"]:focus + label,
.wpforms-container .wpforms-field-radio ul li label.wpforms-field-label-inline:hover {
  background: transparent;
  border-color: #141410;
  color: #141410;
}

.wpforms-container button.wpforms-submit,
.wpforms-container .wpforms-submit-container button {
  background: #141410 !important;
  border: 1px solid #141410 !important;
  color: #F2F0DA !important;
  border-radius: 0 !important;
  padding: 0.9rem 2.25rem !important;
  font-size: 0.72rem !important;
  letter-spacing: var(--ls-uppercase) !important;
  line-height: var(--lh-uppercase) !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  font-family: var(--font-uppercase) !important;
  transition: background 200ms ease, border-color 200ms ease;
}

.wpforms-container button.wpforms-submit:hover {
  background: #535443 !important;
  border-color: #535443 !important;
}

.wpforms-container .wpforms-error,
.wpforms-container .wpforms-field-required-error {
  color: #b82105 !important;
  font-size: 0.75rem;
}

/* Newsletter WPForms (id 3694) -- inline band style, no visible label.
   Contact page form keeps its own visible labels (styled above); this
   only scopes the newsletter instance to match the approved mockup. */
#wpforms-3694 form.wpforms-form {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
}
#wpforms-3694 .wpforms-field-container {
  flex: 1 1 14rem;
}
#wpforms-3694 .wpforms-field {
  margin-bottom: 0 !important;
  padding: 0 !important;
}
#wpforms-3694 .wpforms-field-label {
  display: none !important;
}
#wpforms-3694 .wpforms-submit-container {
  margin: 0 !important;
}

/* Footer spacing polish */
.site-footer .cd-wordmark { margin-bottom: 0.35rem; }

/* "Unique Jewellery" tagline directly under the footer wordmark -- an
   uppercase editorial subtitle, so it belongs in the BROLIMO system too. */
.textwidget .cd-wordmark + p {
  font-family: var(--font-uppercase);
  letter-spacing: var(--ls-uppercase-wide);
  line-height: var(--lh-uppercase);
}
.footer-widget-area-inner p { margin: 0 0 0.85rem; }
.footer-widget-area-inner p:last-child { margin-bottom: 0; }

/* ===================================================================
   P1 POLISH -- Manifesto/CTA hierarchy, subtle hover/motion
   =================================================================== */
.kadence-columnhome-manifesto-c .kt-adv-headinghome-manifesto-quote,
.kadence-columnsobre-pullquote-c .kt-adv-headingsobre-pullquote-text {
  font-family: "BROLIMO", serif;
  max-width: 720px;
  margin-inline: auto;
  line-height: 1.15;
}

.kadence-columnhome-cta-c .kt-adv-headinghome-cta-h2 {
  font-family: "BROLIMO", serif;
}

/* Subtle hover/motion — respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .wp-block-kadence-image img,
  .wc-block-components-product-image img,
  .woocommerce-loop-image-link img {
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  a.wp-block-button__link,
  .cadore-filter-pill {
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
  }

  a.wp-block-button__link:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ===================================================================
   BUTTON COLOUR CORRECTION -- approved design uses sage (#97A085) for
   the primary "Ver a loja" marketing CTA specifically, while dark/ink
   (#141410) is reserved for transactional actions (Add to Cart,
   Subscrever, Enviar mensagem). Kadence's global button default is
   dark, so this targets only the /loja/ links to lighten them to sage.
   FOLLOW-UP: this should move to each button block's own native colour
   (palette2 / sage swatch already exists in the global palette) instead
   of an href-matching CSS rule -- deferred because it requires editing
   live Gutenberg block content via the Novamira block-editor queue
   workflow (needs the Block Editor Queue page open to finalize), which
   is riskier to do unattended than a CSS-only change. Flagging for a
   follow-up pass with the user present.
   =================================================================== */
a.wp-block-button__link[href$="/loja/"]:not(.cadore-filter-pills a) {
  background-color: #97A085 !important;
  border-color: #97A085 !important;
  color: #fff !important;
}

a.wp-block-button__link[href$="/loja/"]:not(.cadore-filter-pills a):hover {
  background-color: #7d8870 !important;
  border-color: #7d8870 !important;
}

/* ===================================================================
   FOOTER LEGAL BAR -- copyright left / location right, single row
   =================================================================== */
.footer-html-inner p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
}

.footer-html-inner .cd-loc {
  white-space: nowrap;
}