/*
 * Coinbound design overrides — loaded LAST on every page.
 *
 * The 90 frozen pages in public/static/ pull their WordPress/Elementor CSS
 * straight from coinbound.io, so nothing in those upstream files can be
 * edited here. This sheet is the one local stylesheet that every page
 * loads after them, so it is where site-wide design corrections live.
 *
 * Wired up in two places, both of which must keep pointing at this file:
 *   - frozen pages: a <link> injected before </head> in public/static/*.html
 *   - dynamic pages: the last <link> in src/components/site/chrome-assets.tsx
 */

:root {
  --cb-orange: #e75b10;
  --cb-ink: #050505;
  --cb-paper: #f9f9f9;
  --cb-gutter: 50px;
}

/* ---------------------------------------------------------------------
 * Call-to-action buttons
 *
 * Elementor's CTA widget shipped its own button look (15px, regular
 * weight, sentence case, 3px radius, text-shadow) that matches nothing
 * else on the site — the header "Book a Call" and every inline
 * .elementor-button are uppercase 12px/600 with 1px tracking and square
 * corners. Normalise the CTA widget onto that same button.
 *
 * Hover was the visible bug: these CTAs sit on an orange band and
 * Elementor's default hover fills the button with the same orange, so the
 * button disappeared under the cursor. Hover now goes to paper.
 * ------------------------------------------------------------------- */
/* Elementor writes per-element rules like
 *   .elementor-31979 .elementor-element.elementor-element-420bb14c .elementor-cta__button
 * into generated post-*.css files we cannot edit (they are fetched from
 * coinbound.io), and its widget sheet sets "background:transparent" on
 * hover. Both outrank a plain class selector, so these declarations are
 * marked important — that is the whole reason this file exists. */
.elementor-cta__button.elementor-button {
  background-color: var(--cb-ink) !important;
  color: var(--cb-paper) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  padding: 12px 24px !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.elementor-cta__button.elementor-button:hover,
.elementor-cta__button.elementor-button:focus-visible {
  background-color: var(--cb-paper) !important;
  color: var(--cb-ink) !important;
}

/* ---------------------------------------------------------------------
 * FAQ accordions
 *
 * Answers rendered at 14px with a 1.2 line-height — tighter leading than
 * any other body copy on the page (16px/1.4) — and the questions were the
 * only headings still on Roboto while the rest of the page is Inter.
 * ------------------------------------------------------------------- */
.e-n-accordion .e-n-accordion-item-title-text {
  font-family: Inter, sans-serif;
}

.e-n-accordion .elementor-widget-text-editor,
.e-n-accordion .elementor-widget-text-editor p,
.e-n-accordion .elementor-widget-text-editor li {
  font-size: 16px;
  line-height: 1.6;
}

.e-n-accordion .elementor-widget-text-editor p + p {
  margin-top: 0.75em;
}

/* ---------------------------------------------------------------------
 * Homepage "A suite of marketing services" section
 *
 * Its container is the only top-level section on the page authored with
 * no horizontal padding, so at viewports narrower than the 1300px max
 * the copy ran flush into the left edge. Inset it to the same 50px the
 * neighbouring sections use, shrinking on small screens.
 * ------------------------------------------------------------------- */
.elementor-element-bff2cf9 > .elementor-container {
  padding-left: min(var(--cb-gutter), 4vw);
  padding-right: min(var(--cb-gutter), 4vw);
}

/* ---------------------------------------------------------------------
 * Footer "Powered by Nowbound" logo — 60% of its authored width.
 * ------------------------------------------------------------------- */
.elementor-element-7cc04e1 .the7-image-wrapper {
  width: 60%;
}

.elementor-element-7cc04e1 .the7-image-wrapper img {
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------
 * Footer text rendering
 *
 * The footer is light grey on near-black, and The7 sets
 * -webkit-font-smoothing: antialiased globally. On light-on-dark text that
 * drops subpixel antialiasing, so 14px/400 copy renders thin and looks
 * blurry - most visibly on non-Retina displays. Contrast is not the
 * problem: rgb(203,214,221) on rgb(7,7,7) measures 13.62:1.
 *
 * Restoring the browser default lets subpixel AA back in and the text
 * reads crisp again. Scoped to the footer so the rest of the site keeps
 * the rendering it was designed against.
 * ------------------------------------------------------------------- */
#footer,
#footer p,
#footer li,
#footer a,
#footer span {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* ---------------------------------------------------------------------
 * Footer side padding
 *
 * The footer copy, link columns and logo ran flush into the viewport edge
 * while every section above them was inset.
 *
 * The padding has to go on the Elementor container that carries the footer
 * background, NOT on the .wf-wrap / .wf-container wrappers above it. Those
 * wrappers are transparent and #footer behind them is a lighter grey
 * (rgb(26,28,32)) than the panel itself (rgb(7,7,7)), so padding them
 * shrinks the dark panel and leaves a lighter stripe down each side.
 * Padding the panel keeps its background full-bleed and insets only the
 * content inside it.
 * ------------------------------------------------------------------- */
#footer .elementor-location-footer > .elementor-element {
  padding-left: min(var(--cb-gutter), 6vw);
  padding-right: min(var(--cb-gutter), 6vw);
}