/* Bearre Designs — small site-wide companion stylesheet.
   Handles responsive show/hide that isn't otherwise exposed in this
   Elementor build (header desktop nav vs. mobile disclosure menu). */

/* Breakpoint raised from 1024 to 1350: with Home + phone number added to
   the nav, the full desktop row only reliably fits the logo from ~1340px
   of available width upward (tested: fails at 1320, fits at 1340+).
   Below that the compact mobile disclosure menu takes over instead of
   risking an awkward wrap. */
@media (min-width: 1351px) {
  .bd-mobile-nav { display: none !important; }
}

/* Header row: the nav/phone/button container inherits Elementor's default
   --width:100% for containers, which forces it onto its own line under
   the logo regardless of available space. Override so it sizes to its
   own content and sits on the same row as the logo, right-aligned. */
@media (min-width: 1351px) {
  header.xpro-theme-builder-header .elementor-element-97f01f9 {
    --width: auto !important;
    width: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

/* Centre the header content on wide screens: the bordered bar itself
   stays full-bleed, but its side padding grows fluidly beyond 1500px of
   viewport so the logo/nav group reads as centred instead of pinned to
   the far edges. Below 1500px this resolves to the normal 32px padding
   already used (and tested) for the single-line breakpoint. */
@media (min-width: 1025px) {
  header.xpro-theme-builder-header .elementor-element-b70e220 {
    padding-left: max(32px, calc((100% - 1500px) / 2)) !important;
    padding-right: max(32px, calc((100% - 1500px) / 2)) !important;
  }
}

@media (max-width: 1350px) {
  .bd-desktop-nav { display: none !important; }
}

/* ------------------------------------------------------------------
   Bearre Designs — site-wide motion: scroll reveal + button hover.
   Progressive enhancement: content is only ever hidden once JS has
   confirmed the visitor does not prefer reduced motion (see the
   bd-anim class toggled in <head>). No-JS and reduced-motion visitors
   always see full content with no animation. ------------------------ */

/* Scroll reveal for each top-level page section — bigger travel, a touch
   of scale and a snappy overshoot ease for a more obvious, energetic feel. */
html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent {
  opacity: 0;
  transform: translateY(72px) scale(0.94);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.95s cubic-bezier(0.22,1.28,0.36,1);
  will-change: opacity, transform;
}
html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent.bd-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* A livelier staggered reveal for the direct children within each section
   (heading, image column, etc.) so sections feel like they're assembling
   themselves rather than sliding in as one flat block. */
html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent > *:not(.bd-watermark):not(.bd-bg-word) {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1.2,0.36,1);
}
html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent.bd-in > *:not(.bd-watermark):not(.bd-bg-word) {
  opacity: 1;
  transform: translateY(0);
}
html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent.bd-in > *:nth-child(1) { transition-delay: 0.05s; }
html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent.bd-in > *:nth-child(2) { transition-delay: 0.13s; }
html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent.bd-in > *:nth-child(3) { transition-delay: 0.21s; }
html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent.bd-in > *:nth-child(4) { transition-delay: 0.29s; }
html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent.bd-in > *:nth-child(n+5) { transition-delay: 0.34s; }

/* Button hover — primary and secondary Elementor buttons, WPForms submit */
.elementor-button,
.wpforms-submit-container button,
button.wpforms-submit {
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), box-shadow 0.28s ease, filter 0.28s ease !important;
}
.elementor-button:hover,
.elementor-button:focus-visible,
.wpforms-submit-container button:hover,
button.wpforms-submit:hover {
  transform: translateY(-3px);
  filter: brightness(0.92);
  box-shadow: 0 12px 26px -10px rgba(32,32,32,0.4);
}
.elementor-button:active,
.wpforms-submit-container button:active,
button.wpforms-submit:active {
  transform: translateY(-1px);
  filter: brightness(0.88);
  box-shadow: 0 6px 14px -8px rgba(32,32,32,0.35);
}

/* ------------------------------------------------------------------
   Bearre Designs — sharpening pass: nav / footer hover, universal
   link hover, crisper rendering, refined focus states. ---------------- */

/* Crisper text rendering sitewide */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }

/* Concept showcase — mockup hover treatment (New Concept Website Showcase) */
.bd-concept-mockup {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.bd-concept-mockup:hover, .bd-concept-mockup:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px -26px rgba(32,32,32,0.30);
}
.bd-concept-row { position: relative; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Brand-coloured text selection */
::selection { background: #202020; color: #F7F3EF; }

/* Crisp, on-brand focus outlines everywhere (replaces the default blue) */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #E6533F;
  outline-offset: 3px;
}

/* Header nav — animated underline sweep + accessible coral hover */
header.xpro-theme-builder-header .bd-desktop-nav a {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  transition: color 0.25s ease;
}
header.xpro-theme-builder-header .bd-desktop-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: #E6533F;
  transition: right 0.32s cubic-bezier(0.16,1,0.3,1);
}
header.xpro-theme-builder-header .bd-desktop-nav a:hover,
header.xpro-theme-builder-header .bd-desktop-nav a:focus-visible {
  color: #B8402F !important;
}
header.xpro-theme-builder-header .bd-desktop-nav a:hover::after,
header.xpro-theme-builder-header .bd-desktop-nav a:focus-visible::after {
  right: 0;
}
header.xpro-theme-builder-header .bd-mobile-nav a {
  transition: color 0.2s ease, padding-left 0.2s ease;
}
header.xpro-theme-builder-header .bd-mobile-nav a:hover,
header.xpro-theme-builder-header .bd-mobile-nav a:focus-visible,
header.xpro-theme-builder-header .bd-mobile-nav a:active {
  color: #B8402F !important;
  padding-left: 6px;
}
header.xpro-theme-builder-header .bd-mobile-nav summary {
  transition: color 0.2s ease;
}
header.xpro-theme-builder-header .bd-mobile-nav summary:hover,
header.xpro-theme-builder-header .bd-mobile-nav summary:active {
  color: #B8402F !important;
}

/* Mobile disclosure menu — animate the panel opening (tap-driven, so
   :hover isn't relevant here); respects reduced-motion by only running
   under the no-preference media query. */
@media (prefers-reduced-motion: no-preference) {
  header.xpro-theme-builder-header .bd-mobile-nav details[open] > div {
    animation: bd-mobile-menu-in 0.32s cubic-bezier(0.16,1,0.3,1);
  }
}
@keyframes bd-mobile-menu-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Footer links — accessible coral-on-dark hover with a subtle nudge */
footer#xpro-theme-builder-footer a {
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
footer#xpro-theme-builder-footer a:hover,
footer#xpro-theme-builder-footer a:focus-visible,
footer#xpro-theme-builder-footer a:active {
  color: #F0785F !important;
  transform: translateX(4px);
}

/* Universal underlined text links ("Learn More", "View Our Work", etc.) —
   matched by their inline underline style, applied consistently by the
   bd_link() helper across every page. */
a[style*="text-decoration:underline"] {
  display: inline-block;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
a[style*="text-decoration:underline"]:hover,
a[style*="text-decoration:underline"]:focus-visible,
a[style*="text-decoration:underline"]:active {
  opacity: 0.72;
  transform: translateX(4px);
}

/* ------------------------------------------------------------------
   Bearre Designs — premium editorial redesign pass (2026-08-14).
   Sticky header, active-nav state, watermark + background-word
   utilities, deeper spacing rhythm and section treatments. Additive
   only — no existing rule above this point is removed. ---------------- */

/* Sticky header: refined, with a soft edge once scrolled */
header.xpro-theme-builder-header { position: sticky; top: 0; z-index: 999; transition: box-shadow 0.3s ease; }
header.xpro-theme-builder-header.bd-scrolled { box-shadow: 0 8px 24px -12px rgba(32,32,32,0.18); }
body { scroll-padding-top: 90px; }

/* Active nav-page indicator (class + underline set by small JS below) */
header.xpro-theme-builder-header .bd-desktop-nav a[aria-current="page"] {
  color: #B8402F !important;
}
header.xpro-theme-builder-header .bd-desktop-nav a[aria-current="page"]::after {
  right: 0;
}
header.xpro-theme-builder-header .bd-mobile-nav a[aria-current="page"] {
  color: #B8402F !important;
}

/* Subtle recurring bear/B emblem watermark — decorative only. Tiled to
   fill the whole section as a faint repeating pattern rather than one
   single centred mark. */
.bd-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  background-image: url('https://bearredesigns.co.uk/wp-content/uploads/2026/08/Bearre-Design-Favicon.jpg') !important;
  background-size: 130px 130px;
  background-repeat: repeat;
  background-position: center;
  z-index: 0;
}
.bd-watermark--light {
  mix-blend-mode: multiply;
  opacity: 0.045;
}
.bd-watermark--dark {
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.045;
}
/* Legacy single-mark centring — neutralised now the mark tiles full-bleed */
.bd-watermark--center { top: 0; left: 0; transform: none; }
@media (max-width: 900px) {
  .bd-watermark { background-size: 88px 88px; }
}

/* Oversized decorative background words — aria-hidden, never real headings */
.bd-bg-word {
  position: absolute;
  pointer-events: none;
  user-select: none;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  line-height: 1;
  color: #202020;
  opacity: 0.035;
  white-space: nowrap;
  z-index: 0;
  font-size: clamp(90px, 16vw, 260px);
}
.bd-bg-word--dark { color: #F7F3EF; opacity: 0.05; }

/* Ensure any section given a watermark/bg-word keeps its real content above it */
.bd-relative { position: relative; overflow: hidden; }
.bd-relative > .e-con-inner, .bd-relative > .elementor-widget-wrap { position: relative; z-index: 1; }

/* Animated arrow for "Discover the Project" / case-study links */
.bd-arrow-link { display: inline-flex !important; align-items: center; gap: 8px; }
.bd-arrow-link .bd-arrow-glyph {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.bd-arrow-link:hover .bd-arrow-glyph,
.bd-arrow-link:focus-visible .bd-arrow-glyph {
  transform: translateX(6px);
}

/* Core Services — replaced by enhanced interactive treatment below */

/* Selected-work case study rows — extra breathing room + fine divider rhythm */
.bd-case-row { position: relative; }

/* Founder / editorial asymmetric helpers */
.bd-overlap-up { margin-top: -48px; }
@media (max-width: 900px) { .bd-overlap-up { margin-top: 0; } }

/* Respect reduced-motion at the CSS layer too, as a second line of defence */
@media (prefers-reduced-motion: reduce) {
  html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent,
  html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent > *:not(.bd-watermark):not(.bd-bg-word) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
  html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent > .bd-watermark,
  html.bd-anim [data-elementor-type="wp-page"] > .e-con.e-parent > .bd-bg-word {
    transition: none !important;
    transition-delay: 0s !important;
  }
  .elementor-button, .wpforms-submit-container button, button.wpforms-submit {
    transition: none !important;
  }
  .elementor-button:hover, .elementor-button:active,
  .wpforms-submit-container button:hover, .wpforms-submit-container button:active,
  button.wpforms-submit:hover, button.wpforms-submit:active {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
  }
  .bd-concept-mockup:hover, .bd-concept-mockup:focus-within {
    transform: none !important;
    box-shadow: none !important;
  }
  header.xpro-theme-builder-header .bd-desktop-nav a::after { transition: none !important; }
  header.xpro-theme-builder-header .bd-mobile-nav a:hover,
  header.xpro-theme-builder-header .bd-mobile-nav a:focus-visible,
  header.xpro-theme-builder-header .bd-mobile-nav a:active { padding-left: 0 !important; }
  footer#xpro-theme-builder-footer a:hover,
  footer#xpro-theme-builder-footer a:focus-visible,
  footer#xpro-theme-builder-footer a:active { transform: none !important; }
  a[style*="text-decoration:underline"]:hover,
  a[style*="text-decoration:underline"]:focus-visible,
  a[style*="text-decoration:underline"]:active { transform: none !important; }
  html { scroll-behavior: auto !important; }
}


/* ------------------------------------------------------------------
   Bearre Designs — Our Work concept card upgrade (2026-08-16).
   Real screenshot previews: subtle zoom, gentle overlay, arrow-link
   dim on hover. Additive only — nothing above this point is removed. */

.bd-concept-mockup {
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(32,32,32,0.22);
}

.bd-concept-img {
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.bd-concept-link:hover .bd-concept-img,
.bd-concept-link:focus-visible .bd-concept-img {
  transform: scale(1.045);
}

.bd-concept-overlay {
  transition: opacity 0.4s ease;
}
.bd-concept-link:hover .bd-concept-overlay,
.bd-concept-link:focus-visible .bd-concept-overlay {
  opacity: 1;
}

.bd-concept-explore {
  transition: opacity 0.25s ease;
}
.bd-concept-explore:hover,
.bd-concept-explore:focus-visible {
  opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
  .bd-concept-img { transition: none !important; }
  .bd-concept-link:hover .bd-concept-img,
  .bd-concept-link:focus-visible .bd-concept-img { transform: none !important; }
  .bd-concept-overlay { transition: none !important; }
  .bd-concept-explore { transition: none !important; }
  .bd-concept-explore:hover,
  .bd-concept-explore:focus-visible { opacity: 1 !important; }
  .bd-arrow-link .bd-arrow-glyph { transition: none !important; }
  .bd-arrow-link:hover .bd-arrow-glyph,
  .bd-arrow-link:focus-visible .bd-arrow-glyph { transform: none !important; }
}

/* ============================================================
   Core Services section — refined editorial row treatment
   (large decorative numerals, category labels, whole-row link,
   alternating tint on hover, respects reduced-motion)
   ============================================================ */
.bd-service-row {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.3s ease;
}

/* Alternating very pale tint — blush / coral / muted green, repeating every 3 rows */
.bd-service-row--1:hover,  .bd-service-row--1:focus-within { background-color: #F3E5E1; }
.bd-service-row--2:hover,  .bd-service-row--2:focus-within { background-color: #FBE8E2; }
.bd-service-row--3:hover,  .bd-service-row--3:focus-within { background-color: #EEF0E6; }

/* Oversized decorative numeral — faint, behind content, clipped by row overflow */
.bd-service-bignum-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.bd-service-bignum {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(12%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(110px, 13vw, 200px);
  line-height: 1;
  color: rgba(32, 32, 32, 0.045);
  transition: color 0.3s ease;
  user-select: none;
}
.bd-service-row:hover .bd-service-bignum,
.bd-service-row:focus-within .bd-service-bignum {
  color: rgba(32, 32, 32, 0.085);
}

/* Content columns sit above the decorative numeral */
.bd-service-col-left, .bd-service-col-right {
  position: relative;
  z-index: 2;
}

/* Category label — small, uppercase, understated */
.bd-service-num-row {
  margin: 0 0 6px 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.bd-service-category {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7A756D;
}

/* Title nudges right on hover */
.bd-service-title-wrap {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.bd-service-row:hover .bd-service-title-wrap {
  transform: translateX(10px);
}

/* Learn More + animated arrow */
.bd-service-learnmore {
  display: inline-flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #202020;
}
.bd-service-arrow {
  display: inline-block;
  margin-left: 6px;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.bd-service-row:hover .bd-service-arrow {
  transform: translateX(5px);
}

/* Whole-row stretched link — sole interactive/focusable element per row */
.bd-service-stretchlink-wrap { display: contents; }
.bd-service-stretchlink {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
}
.bd-service-stretchlink:focus-visible {
  outline: 2px solid #E6533F;
  outline-offset: -4px;
}
.bd-service-row {
  cursor: pointer;
}

/* Disable hover-only motion on touch/coarse-pointer devices — keep it clean on mobile */
@media (hover: none), (pointer: coarse) {
  .bd-service-row:hover .bd-service-title-wrap,
  .bd-service-row:hover .bd-service-arrow {
    transform: none;
  }
  .bd-service-row:hover { background-color: transparent; }
}

/* Keep the big numeral modest and out of the way on small screens */
@media (max-width: 767px) {
  .bd-service-bignum {
    font-size: 90px;
    opacity: 0.7;
  }
  .bd-service-row { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-service-row,
  .bd-service-title-wrap,
  .bd-service-arrow,
  .bd-service-bignum {
    transition: none !important;
  }
}