/* GLOBAL FONT */
body,
html {
  font-family: "Plus Jakarta Sans", sans-serif;

  /* Root-level safety net. Full-bleed sections no longer use width:100vw (see
     the breakout note below), so nothing should overflow horizontally any
     more — this stays as a backstop against a future block or third-party
     plugin reintroducing an over-wide element.

     This must be `clip`, never `hidden`. `overflow-x: hidden` cannot coexist
     with `overflow-y: visible` — the browser silently computes the other axis
     as `auto`, which turns the element into a SCROLL CONTAINER. With the rule
     on both html and body, the page ended up with two nested scroll
     containers (body had ~10px of scroll range of its own). Chrome then has
     to latch scrolling to one of them and hand off at its boundary, which is
     felt as scrolling "sticking" when you reach the very top or the very
     bottom of the page.

     `clip` clips without establishing a scroll container, so overflow-y stays
     `visible` and only ONE scroller (the viewport) exists. Do not "simplify"
     this back to `hidden`. */
  overflow-x: clip;
}

/* Shared contained-content width. The theme's "global padding" (used on
   .has-global-padding blocks) is a flat side padding with no width ceiling,
   so full-bleed sections were stretching edge to edge on wide monitors.
   Home-page sections opt into this instead of relying on that padding alone. */
:root {
  --tsm-container: 1280px;

  /* Rendered height of the FIXED .tsm-header, so pages that start with
     in-flow content directly beneath it can reserve the right amount of
     space instead of guessing.

     The header takes itself out of flow (position: fixed), and its height is
     INTRINSIC — the sum of .tsm-header-inner's vertical padding and the
     tallest flex child. It therefore changes at two independent breakpoints:
     the inner padding steps down at 900px and 600px, and the logo shrinks
     110px -> 80px at 768px. A single hardcoded offset cannot track that,
     which is exactly how the service-detail pages ended up with the back
     link overlapping the header by ~7px on desktop while sitting 40px clear
     on mobile.

     Values are measured from the rendered header, rounded UP so a sub-pixel
     difference can never produce an overlap:
       > 900px    padding 20px + 110px logo -> 156.8px
       768-900px  padding 16px + 110px logo -> 148.2px
       601-767px  padding 16px +  80px logo -> 117.8px
       <= 600px   padding 12px +  80px logo -> 109.5px

     KEEP IN SYNC: changing .tsm-header-inner's padding or the logo width
     below means re-measuring these. Consumers must add their own breathing
     room on top (e.g. calc(var(--tsm-header-h) + 32px)) rather than baking
     the gap into this value — this is the header's height, not a margin. */
  --tsm-header-h: 157px;
}

@media (max-width: 900px) {
  :root {
    --tsm-header-h: 149px;
  }
}

@media (max-width: 767px) {
  :root {
    --tsm-header-h: 118px;
  }
}

@media (max-width: 600px) {
  :root {
    --tsm-header-h: 110px;
  }
}

/* Smooth transitions for interactive elements.
   NOTE: a universal `* { transition: ... }` rule used to live here. It was
   removed because it made *every* element on the page a transition target
   (measured: 342/342 elements, ~280 animating transform/opacity). As content
   scrolls under a stationary pointer, Chrome recomputes :hover for whatever
   element is now under the cursor; with a universal transition every such
   change starts style-recalc + compositor animations across the whole tree,
   which floods the main thread and makes wheel/trackpad scrolling appear to
   "stick" until a mousemove forces the browser to catch up. Every element
   that actually needs a hover animation already declares its own transition
   on its own selector, so removing the universal rule changes no visible
   behavior — it only stops the sitewide scroll-time cost. Interactive
   elements below keep an explicit, property-scoped transition (not `all`,
   which would watch every property incl. layout-affecting ones). */
a,
button,
.btn-primary,
.wp-block-button__link,
.wp-block-navigation-item__content {
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease,
    opacity 0.3s ease !important;
}

/* PAGE LOADING STATE */
body {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

body.loaded {
  opacity: 1;
}

/* HEADER WRAPPER */
.tsm-header {
  position: fixed;
  top: 0;
  /* Spanned with insets rather than width:100vw. A fixed element's containing
     block is the viewport EXCLUDING the scrollbar, so left/right:0 gives the
     exact visible width; 100vw INCLUDES the scrollbar and made the header
     ~15px too wide, pushing its right-hand buttons under the scrollbar and
     contributing to the page's horizontal overflow. */
  left: 0;
  right: 0;
  z-index: 100;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
  /* Start transparent by default - JS will add solid class if no carousel */
  background: transparent;
  box-shadow: none;
}

/* Default text color (white for transparent state) */
.tsm-header a,
.tsm-header button {
  color: #fff !important;
  transition: color 0.3s ease;
}

.tsm-header .wp-block-navigation-submenu__toggle svg {
  stroke: #fff !important;
  transition: stroke 0.3s ease;
}

/* INNER FLEX CONTAINER */
.tsm-header-inner {
  width: 100%;
  padding: 20px 48px;
  display: flex;
  align-items: center;
}

/* LEFT SIDE - Logo + Nav */
.tsm-header-left {
  display: flex;
  align-items: center;
  gap: 75px !important;
}

/* NAV LINKS */
.tsm-header .wp-block-navigation a,
.tsm-header .wp-block-navigation button {
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}

/* Navigation Container */
.tsm-header .wp-block-navigation__container {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 30px;
  align-items: center;
}

/* Navigation Items */
.tsm-header .wp-block-navigation-item {
  position: relative;
  list-style: none;
}

.tsm-header .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 15px !important;
}

/* Submenu Styles */
.tsm-header .wp-block-navigation-submenu {
  position: relative;
}

.tsm-header .wp-block-navigation-submenu__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tsm-header .wp-block-navigation-submenu__toggle svg {
  transition: transform 0.2s ease;
  stroke: currentColor;
}

.tsm-header
  .wp-block-navigation-submenu:hover
  .wp-block-navigation-submenu__toggle
  svg {
  transform: rotate(180deg);
}

/* Dropdown Container */
.tsm-header .wp-block-navigation__submenu-container {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 8px 0;
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  list-style: none;
}

.tsm-header
  .wp-block-navigation-submenu:hover
  .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown Items */
.tsm-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
  margin: 0;
  background: transparent !important;
}

.tsm-header
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  display: block;
  padding: 12px 20px;
  color: white !important;
  transition: background-color 0.2s ease;
}

/* TRANSPARENT MODE */
.tsm-header.is-transparent {
  background: transparent;
}

.tsm-header.is-transparent a,
.tsm-header.is-transparent button {
  color: #fff !important;
}

.tsm-header.is-transparent .wp-block-navigation-submenu__toggle svg {
  stroke: #fff;
}

/* SOLID MODE (no carousel or scrolled) */
.tsm-header.is-solid {
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.tsm-header.is-solid a,
.tsm-header.is-solid button {
  color: #111 !important;
}

/* Keep header buttons white always */
.tsm-header.is-solid .btn-primary,
.tsm-header.is-scrolled .btn-primary {
  color: #fff !important;
}

.tsm-header.is-solid .wp-block-navigation-submenu__toggle svg {
  stroke: #111 !important;
}

/* Scrolled state */
.tsm-header.is-scrolled {
  background-color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.tsm-header.is-scrolled a,
.tsm-header.is-scrolled button {
  color: #111 !important;
}

.tsm-header.is-scrolled .wp-block-navigation-submenu__toggle svg {
  stroke: #111 !important;
}

/* LOGO SWITCHING */
.tsm-logo-container {
  position: relative;
  display: inline-block;
  height: auto;
}

.tsm-logo-dark,
.tsm-logo-white {
  transition: opacity 0.3s ease;
  display: block;
  width: 80px;
  height: auto;
  max-width: 100%;

  @media (min-width: 768px) {
    width: 110px;
  }
}

/* When header is transparent (default), show white logo */
.tsm-header .tsm-logo-dark {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.tsm-header .tsm-logo-white {
  opacity: 1;
  position: relative;
}

/* When header is solid, show dark logo */
.tsm-header.is-solid .tsm-logo-dark {
  opacity: 1;
  position: relative;
}

.tsm-header.is-solid .tsm-logo-white {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* When header is scrolled, show dark logo */
.tsm-header.is-scrolled .tsm-logo-dark {
  opacity: 1;
  position: relative;
}

.tsm-header.is-scrolled .tsm-logo-white {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.tsm-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tsm-header-right-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* "Citas Export" is per-deployment: Costa Rica has an appointment system,
   Panamá does not. Toggled by "Mostrar botón Citas Export" in Configuración
   TSM, which puts .tsm-hide-citas-export on <body> (Header\DynamicHeader).
   Both copies of the button are hidden — the desktop core/button block and
   the hand-written one in the mobile menu. The link is withheld from
   TSM_SETTINGS at the same time, so a hidden button never carries the other
   country's URL. */
.tsm-hide-citas-export .tsm-citas-btn,
.tsm-hide-citas-export .tsm-mobile-citas-btn {
  display: none;
}

/* MOBILE MENU BUTTON */
.tsm-mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  gap: 4px;
}

.tsm-hamburger-line {
  width: 24px;
  height: 2px;
  background-color: currentColor;
  transition: all 0.3s ease;
  transform-origin: center;
  pointer-events: none; /* Prevent clicks on child elements */
}

/* Hamburger animation when active */
.tsm-mobile-menu-toggle.active .tsm-hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.tsm-mobile-menu-toggle.active .tsm-hamburger-line:nth-child(2) {
  opacity: 0;
}

.tsm-mobile-menu-toggle.active .tsm-hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* MOBILE MENU OVERLAY */
.tsm-mobile-menu-overlay {
  position: fixed;
  /* Inset on all four sides instead of 100vw/100vh. Besides the scrollbar
     issue that 100vw has, 100vh on mobile Safari is the height WITHOUT the
     browser chrome, so a 100vh overlay is taller than the visible area and
     its bottom is unreachable while the URL bar is showing. Insets track the
     real visible viewport on every browser. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

/* backdrop-filter is scoped to the active state only. As a fixed,
   full-viewport element it sits in the header markup of EVERY page; leaving
   the blur on the base rule allocates a viewport-sized backdrop layer that
   the compositor may re-sample on scroll even while the menu is hidden.
   Applying it only when open keeps the visual identical (the overlay is
   invisible until .active) with no idle scroll-time cost. */
.tsm-mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(10px);
}

/* Mobile Menu Close Button */
.tsm-mobile-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  transition: background-color 0.3s ease;
  z-index: 1001;
}

.tsm-mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tsm-mobile-menu-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 80px 40px 40px;
  text-align: center;
}

.tsm-mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-bottom: 48px;
}

.tsm-mobile-nav-link {
  color: #fff !important;
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.3s ease;
  text-align: center;
}

.tsm-mobile-nav-link:hover {
  opacity: 0.7;
}

.tsm-mobile-services-dropdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.tsm-mobile-services-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tsm-services-arrow {
  transition: transform 0.3s ease;
  color: #fff;
}

.tsm-mobile-services-dropdown.active .tsm-services-arrow {
  transform: rotate(180deg);
}

.tsm-mobile-services-list {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0;
  margin-top: 16px;
}

.tsm-mobile-services-dropdown.active .tsm-mobile-services-list {
  display: flex;
}

.tsm-mobile-services-list a {
  color: #fff !important;
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  text-align: center;
}

.tsm-mobile-services-list a:hover {
  opacity: 1;
}

.tsm-mobile-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 280px;
}

.tsm-mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  background: #ee2346;
  color: #fff !important;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.tsm-mobile-btn:hover {
  background: #d91e3c;
}

.tsm-mobile-btn img {
  width: 18px;
  height: auto;
}

.tsm-btn-primary .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  figure {
    height: 20px;
    margin: 0;

    img {
      vertical-align: initial;
    }
  }
}

.btn-primary {
  background: #ee2346 !important;
  color: #fff !important;
  font-size: 12px !important;
  padding: 10px 15px !important;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .btn-primary {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
}

.btn-primary a {
  font-size: 14px !important;
}

.btn-primary figure {
  margin: 0;
  display: flex;
  align-items: center;
}

.btn-primary img {
  vertical-align: middle;
}

.btn-primary:hover {
  background: #d91f3d !important;
  transform: translateY(-2px);
}

.wp-block-post-title {
  display: none;
}

/* Remove top spacing above first section */
.wp-site-blocks {
  padding-top: 0;
}

/* Remove default main spacing */
main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove group block top margin */
.wp-block-group {
  margin-top: 0;
}

body:has(.tsm-carousel-wrapper)
  .wp-block-group.has-global-padding:not(.tsm-footer) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body:has(.tsm-carousel-wrapper) .entry-content.has-global-padding {
  padding-top: 0 !important;
}

/* Safety: kill margins too */
body:has(.tsm-carousel-wrapper) .entry-content {
  margin-top: 0 !important;
}

.tsm-related-products {
  min-width: 100%;
  width: 100%;
}

.wp-block-image img {
  vertical-align: initial !important;
}

:where(figure) {
  margin: 0;
}

body {
  /* NOT 100vw: that unit includes the scrollbar's width, so on desktop the
     body rendered ~15px wider than the space actually available to it. That
     self-inflicted horizontal overflow is what the overflow-x clipping above
     was compensating for. 100% resolves against the containing block, which
     already excludes the scrollbar. */
  width: 100%;
  overflow-x: clip;
}

/* ── FULL-BLEED: let WordPress do it ───────────────────────────────────────
   Applies to .cta-help below, .tsm-carousel-wrapper (tsm-core/carousel.css)
   and .tsm-locations-grid (tsm-core/locations.css).

   These used to declare `width: 100vw; margin-left: calc(50% - 50vw)` — the
   well-known breakout trick. It was wrong here for one reason: **100vw
   includes the scrollbar's width**, so every full-bleed section rendered ~15px
   wider than the viewport and hung off the right edge. That overflow is what
   forced the root-level clipping above, which in turn caused the nested-scroll
   -container stall documented in docs/CLAUDE/gotchas.md.

   The trick was also redundant. This theme uses WordPress's root-padding-aware
   alignments, so core already ships exactly the right rule:

       .has-global-padding > .alignfull {
         margin-left:  calc(var(--wp--style--root--padding-left)  * -1);
         margin-right: calc(var(--wp--style--root--padding-right) * -1);
       }

   Every one of these elements carries .alignfull, so the breakout is already
   handled — correctly, at every breakpoint, with no viewport units. All that
   was needed was to stop forcing a width. `width: auto` then resolves to
   containing block + both negative margins, i.e. the viewport, scrollbar
   already excluded.

   So: **do not re-add breakout margins to these rules.** Declaring them on top
   of WordPress's doubles the offset wherever the parent's padding is not what
   the margins assume, which is exactly how the carousel ended up 100px too
   wide on Sobre Nosotros. If a full-bleed element is not breaking out, the fix
   is in the markup (does it have .alignfull? is its parent .has-global-padding?),
   not another margin override here.
   ------------------------------------------------------------------------ */

:where(figure) {
  margin: 0 !important;
}

/* CTA */
.cta-help {
  position: relative;
  box-sizing: border-box;
  padding: 40px 20px;
  background-color: #fafafa;
  overflow: hidden;
  border-radius: 0;

  @media (min-width: 641px) {
    padding: 56px 20px;
  }

  @media (min-width: 900px) {
    padding: 80px 20px;
  }

  @media (min-width: 768px) {
    /* Full-bleed comes from WordPress's .alignfull rule — see the note near
       the top of this file. Only the 100vw width needed removing. */
    width: auto;
  }
}

/* SVG background */
.cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Circle style */
.cta-bg circle {
  fill: none;
  stroke: #e0dff7;
  stroke-width: 1.5;
}

/* Content above SVG */
.cta-container {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.cta-container h2 {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
  margin-top: 0;
  margin-bottom: 35px;
  letter-spacing: -0.5px;
}

@media (max-width: 900px) {
  .cta-container h2 {
    font-size: 32px;
  }
}

@media (max-width: 600px) {
  .cta-container h2 {
    font-size: 26px;
  }
}

.cta-button {
  display: inline-block;
  background: #ee2346;
  color: #fff;
  padding: 20px 38px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.primary-btn:hover,
.cta-button:hover {
  background: #ee2346;
  transform: translateY(-2px);
}

/* =========================
   ABOUT US PAGE
========================= */

/* About Section */
.tsm-about-section {
  background: #fff;
}

.tsm-about-columns {
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: center;
}

.tsm-about-image-col,
.tsm-about-text-col {
  flex: 1;
  max-width: 700px;
}

.tsm-about-image {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.tsm-about-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.tsm-about-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #191919;
}

.tsm-about-text {
  font-size: 16px;
  line-height: 1.7;
  color: #191919b3;
  margin-bottom: 20px;
}

/* Values Section */
.tsm-values-section {
  background: #fafafa;
}

/* Mobile Responsive */
@media (max-width: 900px) {
  .tsm-about-columns {
    flex-direction: column;
    gap: 40px;
  }
}

/* =========================
   CONTAINER & FOOTER
========================= */

/* Container for content width */
.tsm-container {
  max-width: var(--tsm-container) !important;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
  box-sizing: border-box;
}

/* Nosotros page content - same styles as product-content */
.tsm-nosotros-content p,
.tsm-nosotros-content span,
.tsm-nosotros-content li,
.tsm-nosotros-content ul {
  font-size: 14px;
  color: #191919b3;
  margin-top: 0;
  font-weight: 500 !important;
}

.tsm-nosotros-content strong, b {
  font-size: 14px;
  font-weight: 700 !important;
  color: #191919b3 !important;
}

.tsm-nosotros-content ul {
  color: #191919b3;
}

.tsm-nosotros-content h1,
.tsm-nosotros-content h2,
.tsm-nosotros-content h3,
.tsm-nosotros-content h4,
.tsm-nosotros-content h5,
.tsm-nosotros-content h6 {
  color: #191919;
  margin-bottom: 15px !important;
}

.tsm-nosotros-content h1,
.tsm-nosotros-content h2,
.tsm-nosotros-content h3 {
  font-weight: 700 !important;
}

.tsm-nosotros-content p {
  margin-bottom: 16px;
}

.tsm-nosotros-content p:last-child {
  margin-bottom: 0;
}

/* Footer Styles */
.tsm-footer {
  background: #ee2346;
  color: #fff;
}

.tsm-footer .tsm-container {
  padding: 0;
}

.tsm-footer-columns {
  display: flex;
  gap: 40px;
  margin-bottom: 0;
}

.tsm-footer-col {
  flex: 1;
}

.tsm-footer-logo {
  margin-bottom: 16px;
}

.tsm-footer-tagline {
  color: #fff;
  opacity: 0.9;
  margin: 0;
}

.tsm-footer-heading {
  color: #fff;
  margin-bottom: 20px;
  margin-top: 0;
}

.tsm-footer-nav {
  gap: 16px !important;
}

.tsm-footer-nav .wp-block-navigation-item {
  margin: 0;
}

.tsm-footer-nav .wp-block-navigation-item a {
  color: #fff;
  opacity: 0.9;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.2s ease;
}

.tsm-footer-nav .wp-block-navigation-item a:hover {
  opacity: 1;
}

.tsm-footer-text {
  color: #fff;
  opacity: 0.9;
  margin: 0 0 8px 0;
}

.tsm-footer-bottom {
  width: 100%;
}

.tsm-footer-copyright,
.tsm-footer-link {
  color: #fff;
  opacity: 0.8;
  margin: 0;
}

.tsm-footer-link a {
  color: #fff;
  text-decoration: none;
  margin-left: 20px;
  transition: opacity 0.2s ease;
}

.tsm-footer-link a:hover {
  opacity: 1;
}

/* Mobile Footer */
@media (max-width: 900px) {
  .tsm-container {
    padding: 0 24px;
  }

  .tsm-footer-columns {
    flex-direction: column;
    gap: 32px;
  }

  .tsm-footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .tsm-footer-link a {
    margin-left: 0;
    margin-right: 12px;
  }
}

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

.tsm-contact-section {
  background: #fff;
  overflow-x: hidden;
}

.tsm-contact-columns {
  display: flex;
  gap: 100px;
  align-items: center;
  max-width: 100%;
  width: 100%;
  justify-content: center;
}

.tsm-contact-info-col {
  flex: 0 0 auto;
  max-width: 700px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tsm-contact-form-col {
  flex: 0 0 auto;
  max-width: 700px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.tsm-contact-title {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.2;
  color: #191919;
  margin: 0 0 20px 0;
  font-style: italic;
}

.tsm-contact-description {
  font-size: 14px;
  line-height: 140%;
  color: #191919b3;
  margin: 36px 0 !important;
  font-weight: regular;
}

.tsm-contact-item {
  margin: 0 !important;
  margin-bottom: 40px !important;
}

.tsm-contact-item h4,
.tsm-contact-item p {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
  color: #191919b3;
}

.tsm-contact-item li,
.tsm-panel-text li {
  margin-bottom: 5px;
}

.tsm-contact-label {
  font-size: 14px;
  font-weight: 600;
  color: #191919;
  margin: 0 0 8px 0;
}

.tsm-contact-value {
  font-size: 16px;
  color: #191919b3;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Contact Form Wrapper */
.tsm-contact-form-wrapper {
  background: #f5f5f5;
  border-radius: 20px;
  padding: 28px 32px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.tsm-form-title {
  font-size: 20px;
  font-weight: 600;
  color: #191919;
  margin: 0 0 24px 0;
}

/* Contact Form 7 Styles */
.tsm-contact-form-wrapper .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 100%;
}

.tsm-contact-form-wrapper .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
}

.tsm-contact-form-wrapper input[type="text"],
.tsm-contact-form-wrapper input[type="email"],
.tsm-contact-form-wrapper input[type="tel"],
.tsm-contact-form-wrapper select,
.tsm-contact-form-wrapper textarea {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  border: 1px solid #191919;
  border-radius: 100px;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.tsm-form-grid br {
  display: none;
}

.tsm-contact-form-wrapper input[type="text"]:focus,
.tsm-contact-form-wrapper input[type="email"]:focus,
.tsm-contact-form-wrapper input[type="tel"]:focus,
.tsm-contact-form-wrapper select:focus,
.tsm-contact-form-wrapper textarea:focus {
  outline: none;
  border-color: #ee2346;
}

.tsm-contact-form-wrapper textarea {
  min-height: 140px;
  resize: vertical;
}

.tsm-contact-form-wrapper select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23191919' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.tsm-contact-form-wrapper input[type="submit"] {
  background: #ee2346;
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  align-self: flex-start;
}

.tsm-contact-form-wrapper input[type="submit"]:hover {
  background: #d91e3c;
  transform: translateY(-2px);
}

/* Form Row (2 columns) */
.tsm-contact-form-wrapper .wpcf7-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 100%;
}

.tsm-contact-form-wrapper .wpcf7-form .form-row > * {
  min-width: 0;
  max-width: 100%;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Tablet and Mobile */
@media (max-width: 900px) {
  /* Header Mobile */
  .tsm-header-inner {
    padding: 16px 24px;
  }

  .tsm-header .wp-block-navigation__container {
    gap: 20px;
  }

  .tsm-header-left {
    gap: 20px;
  }

  /* Hide desktop navigation on mobile */
  .tsm-header .wp-block-navigation {
    display: none;
  }

  /* Show mobile menu button */
  .tsm-mobile-menu-toggle {
    display: flex;
  }

  /* Hide desktop buttons on mobile */
  .tsm-header-right-buttons {
    display: none;
  }

  /* Carousel Mobile - height controlled in carousel.css */

  .tsm-overlay-content-wrapper {
    padding: 0 24px;
    max-width: 100%;
  }

  .tsm-overlay-badge {
    font-size: 12px;
    padding: 6px 16px;
  }

  .tsm-overlay-title {
    font-size: 36px;
    line-height: 1.2;
  }

  .tsm-overlay-text {
    font-size: 14px;
    line-height: 1.6;
  }

  .tsm-overlay-text br {
    display: none;
  }

  /* Services Grid Mobile */
  .products-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 60px 24px;
  }

  .product-card {
    padding: 32px 24px;
  }

  .product-title {
    font-size: 20px;
  }

  .product-description {
    font-size: 14px;
  }

  /* Why Us Section Mobile */
  .tsm-why-us-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tsm-why-us-card {
    padding: 32px 24px;
  }

  .tsm-why-us-title {
    font-size: 18px;
  }

  .tsm-why-us-description {
    font-size: 14px;
  }

  /* Footer Mobile */
  .tsm-footer {
    padding: 60px 24px !important;
  }

  .tsm-footer-columns {
    flex-direction: column;
    gap: 32px;
  }

  .tsm-footer-col {
    flex-basis: 100% !important;
  }

  .tsm-footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  /* About Us Mobile */
  .tsm-about-section {
    padding: 60px 24px !important;
  }

  .tsm-about-columns {
    flex-direction: column;
    gap: 40px;
  }

  .tsm-about-text {
    font-size: 14px;
  }

  /* Values Section Mobile */
  .tsm-values-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-height: none;
  }

  .tsm-value-card {
    padding: 32px 24px;
  }

  /* Contact Page Mobile */
  .tsm-contact-section {
    padding: 60px 0 !important;
  }

  .tsm-contact-columns {
    flex-direction: column !important;
    gap: 48px !important;
    display: flex !important;
  }

  .tsm-contact-info-col,
  .tsm-contact-form-col {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .tsm-contact-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
  }

  .tsm-contact-description {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 32px !important;
  }

  .tsm-contact-form-wrapper {
    padding: 32px 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .tsm-contact-form-wrapper .wpcf7-form .form-row {
    grid-template-columns: 1fr !important;
  }

  .tsm-contact-form-wrapper .wpcf7-form input,
  .tsm-contact-form-wrapper .wpcf7-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Container Mobile */
  .tsm-container {
    padding: 0 24px;
  }

  /* Button Mobile */
  .tsm-btn-primary .wp-block-button__link {
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* Mobile Only (Small Screens) */
@media (max-width: 600px) {
  /* Carousel Extra Small - height controlled in carousel.css */

  .tsm-overlay-title {
    font-size: 28px;
  }

  .tsm-overlay-text {
    font-size: 13px;
  }

  /* Services Grid Extra Small */
  .products-grid {
    padding: 40px 16px;
  }

  /* Footer Extra Small */
  .tsm-footer {
    padding: 40px 16px !important;
  }

  /* About Us Extra Small */
  .tsm-about-section {
    padding: 40px 16px !important;
  }

  .tsm-about-title {
    font-size: 24px;
  }

  /* Contact Extra Small */
  .tsm-contact-section {
    padding: 32px 16px !important;
  }

  .tsm-contact-title {
    font-size: 24px;
  }

  .tsm-contact-form-wrapper {
    padding: 20px 16px;
  }

  /* Container Extra Small */
  .tsm-container {
    padding: 0 16px;
  }

  /* Header Extra Small */
  .tsm-header-inner {
    padding: 12px 16px;
  }
}

.tsm-services-dropdown .wp-block-navigation__submenu-container {
  background: #07070726 !important;
  backdrop-filter: blur(10px);
  padding: 16px 0 16px 0;
  border-radius: 12px;
  min-width: 220px;
}

.tsm-services-dropdown .wp-block-navigation-item {
  width: 100%;
}

.tsm-services-dropdown .wp-block-navigation-item__content {
  color: #fff !important;
  width: 100%;
  display: block;
  padding: 12px 0 12px 0;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.tsm-contact-form {
  background: #f6f5f4;
  padding: 0;
  border-radius: 24px;
  max-width: 100%;
  margin: 0 auto;
}

.tsm-form-title {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 50px;
}

.tsm-form-full {
  label {
    font-weight: bold !important;
    color: #191919;
    font-size: 14px;
  }
}

.tsm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;

  label {
    font-weight: bold !important;
    color: #191919;
    font-size: 14px;
  }

  p {
    margin: 0;
  }
}

.tsm-form-full {
  margin-top: 20px;
}

.tsm-contact-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}

.tsm-form-full br {
  display: none;
}

.tsm-form-full label {
  margin-bottom: 10px;
}

.tsm-contact-form input,
.tsm-contact-form textarea,
.tsm-contact-form select {
  width: 100%;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid #1c1c1c;
  font-size: 14px;
  outline: none;
}

.tsm-contact-form textarea {
  border-radius: 24px;
  min-height: 120px;
  resize: none;
}

.tsm-form-submit {
  margin-top: 50px;
}

.tsm-contact-form input[type="submit"] {
  width: 100%;
  background: #f21f3b;
  color: #fff;
  border: none;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
}

.tsm-contact-form input[type="submit"]:hover {
  opacity: 0.9;
}

/* Mobile */
@media (max-width: 640px) {
  .tsm-form-grid {
    grid-template-columns: 1fr;
  }

  .tsm-contact-form {
    padding: 32px 20px;
  }
}

.hidden-fields-container {
  display: none !important;
}

/* =========================
   LEGAL DOCUMENT PAGE
   Based on TSM Values Modal
========================= */
.tsm-legal-page {
  width: 100%;
  min-height: 60vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 60px 20px;
  background: white;
}

.tsm-legal-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.tsm-legal-content {
  background: #f7f7f7;
  border-radius: 37px;
  padding: 50px 60px;
  width: 100%;
  box-sizing: border-box;
  animation: legalFadeIn 0.3s ease;
}

@keyframes legalFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tsm-legal-title {
  font-size: 32px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 30px;
  color: #191919;
  line-height: 1.3;
  display: block !important;
}

.tsm-legal-body {
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  color: #191919a1;
}

.tsm-legal-body p {
  margin: 0 0 16px 0;
}

.tsm-legal-body p:last-child {
  margin-bottom: 0;
}

.tsm-legal-body h2,
.tsm-legal-body h3,
.tsm-legal-body h4 {
  color: #191919;
  margin-top: 24px;
  margin-bottom: 16px;
}

.tsm-legal-body h2 {
  font-size: 24px;
  font-weight: 600;
}

.tsm-legal-body h3 {
  font-size: 20px;
  font-weight: 600;
}

.tsm-legal-body ul,
.tsm-legal-body ol {
  margin: 0 0 16px 0;
  padding-left: 24px;
}

.tsm-legal-body li {
  margin-bottom: 8px;
}

/* Legal Page Responsive */
@media (max-width: 900px) {
  .tsm-legal-page {
    padding: 100px 20px 40px 20px;
  }

  .tsm-legal-content {
    padding: 40px 30px;
    border-radius: 30px;
  }

  .tsm-legal-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .tsm-legal-body {
    font-size: 16px;
    line-height: 28px;
  }

  .tsm-legal-body h2 {
    font-size: 20px;
  }

  .tsm-legal-body h3 {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .tsm-legal-page {
    padding: 80px 15px 30px 15px;
  }

  .tsm-legal-content {
    padding: 30px 20px;
    border-radius: 24px;
  }

  .tsm-legal-title {
    font-size: 22px;
  }

  .tsm-legal-body {
    font-size: 15px;
    line-height: 26px;
  }
}


/* Remove the default focus ring only for mouse/touch users; keyboard users
   still get a visible outline via :focus-visible (accessibility requirement). */
:where(.wp-site-blocks *:focus:not(:focus-visible)) {
  outline: none;
}

/* Mobile Safari/Chrome flash a gray tap-highlight box on any tapped link or
   button, independent of the focus outline above. Harmless to remove —
   keyboard focus-visible styling below is untouched. */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

.wp-site-blocks *:focus-visible {
  outline: 2px solid #ee2346 !important;
  outline-offset: 2px;
}