/* Tanışman Hukuk — sessiz güven. Child theme only. */

:root {
  --tn-night: #111927;
  --tn-ink: #171a1f;
  --tn-paper: #f5f2eb;
  --tn-white: #ffffff;
  --tn-bronze: #aa8050;
  --tn-stone: #706d68;
  --tn-line: #d9d2c7;
  --tn-space: 8px;
  --tn-measure: 68ch;
  --tn-wide: 1200px;
  --tn-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --tn-sans: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tn-ease: 180ms ease;
  --tn-radius: 14px;
  --tn-radius-sm: 10px;
  --tn-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
  --tn-shadow-lg: 0 18px 40px rgba(17, 24, 39, 0.08);
}

html {
  font-size: 100%;
}

.tn-site,
.tn-site body,
body.tn-site {
  background: var(--tn-paper);
  color: var(--tn-ink);
  font-family: var(--tn-sans);
  font-size: 17px;
  line-height: 1.65;
}

@media (max-width: 767px) {
  body.tn-site {
    font-size: 16px;
  }
}

body.tn-site h1,
body.tn-site h2,
body.tn-site h3,
body.tn-site .tn-hero h1,
body.tn-site .th-hero h1,
body.tn-site .th2-hero h1,
body.tn-site .title-h1,
body.tn-site .title-h2 {
  font-family: var(--tn-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tn-night);
  text-transform: none;
}

body.tn-site a {
  color: var(--tn-night);
}

body.tn-site a:hover {
  color: var(--tn-bronze);
}

body.tn-site :focus-visible {
  outline: 2px solid var(--tn-bronze);
  outline-offset: 3px;
}

/* Header */
body.tn-site #site-header,
body.tn-site .header-background,
body.tn-site .header-main {
  background: var(--tn-night) !important;
  box-shadow: none !important;
}

body.tn-site .th-topbar-wrap {
  border-bottom: 1px solid rgba(217, 210, 199, 0.18) !important;
  background: transparent !important;
}

body.tn-site .th-item,
body.tn-site .th-icon-btn,
body.tn-site .th-cta {
  background: transparent !important;
  border: 1px solid rgba(217, 210, 199, 0.22) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 2px !important;
}

body.tn-site .th-cta::after {
  display: none !important;
  animation: none !important;
}

body.tn-site .th-cta {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (min-width: 992px) {
  body.tn-site .desktop-view .menu-toggle.hamburger-toggle,
  body.tn-site .thegem-te-menu__hamburger .hamburger-toggle {
    display: none !important;
  }
}

/* Desktop nav dropdowns: horizontal layout instead of a single tall
   vertical column. Applies to every "sub-menu" dropdown in the header
   (both the main and sticky templates render the same WP menu, hence two
   matches per item). */
@media (min-width: 992px) {
  /* The theme's own dropdown-width rule —
     ".thegem-te-menu__default.desktop-view ul.nav-menu > li:not(...):not(...) ul"
     — resolves to specificity (0,5,3): 5 classes (2 :not() arguments count
     as classes) and 3 type selectors. A selector tied at 5 classes still
     loses to it on type-selector count, so every override below repeats
     the li's own "menu-item-has-children.menu-item-parent" classes to
     reach 6+ classes and win outright on class count alone. */
  /* "width: auto" on an absolutely-positioned flex-wrap container doesn't
     reliably shrink-to-fit around SIDE-BY-SIDE children — browsers can
     size it to only the widest single item, which then forces every other
     item to wrap onto its own line, right back to a vertical stack (this
     is what happened to the 2-item "Araçlar" dropdown). "max-content"
     sizes the box to fit all children in a row with no wrapping, which is
     what a small dropdown like that actually needs. */
  body.tn-site .thegem-te-menu .menu-item-has-children.menu-item-parent > .sub-menu.dl-submenu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: max-content !important;
    max-width: min(600px, 92vw) !important;
  }
  body.tn-site .thegem-te-menu .menu-item-has-children.menu-item-parent > .sub-menu.dl-submenu > li {
    width: auto !important;
    flex: 0 0 auto !important;
    background: var(--tn-white) !important;
  }
  /* Flex "stretch" only resizes the <li> to match its row's tallest
     sibling — the <a> inside kept its own natural (shorter) height, so
     rows of unequal text length left a gap at the bottom of the shorter
     cells with nothing but the transparent <li> behind it, exposing
     whatever hero image/dark background sits behind the header. Forcing
     the link itself to 100% height (it's already `display:flex` from the
     theme, so this just stretches its box) closes that gap, and a flat
     white background + normal ink text color replaces the theme's
     slightly-tinted, muted-gray default so the whole panel reads as one
     solid, evenly-colored surface. */
  body.tn-site .thegem-te-menu .menu-item-has-children.menu-item-parent > .sub-menu.dl-submenu > li > a {
    white-space: nowrap;
    height: 100% !important;
    background: var(--tn-white) !important;
    color: var(--tn-ink) !important;
  }
  /* "Faaliyet Alanlarımız" has 12 practice-area links — left to wrap on
     its own that becomes a ragged single row of very different widths, so
     it gets a fixed 3-column grid instead. */
  body.tn-site .thegem-te-menu .menu-item-3450.menu-item-has-children.menu-item-parent > .sub-menu.dl-submenu {
    width: 720px !important;
    max-width: min(720px, 92vw) !important;
    left: auto !important;
    right: 0 !important;
  }
  body.tn-site .thegem-te-menu .menu-item-3450.menu-item-has-children.menu-item-parent > .sub-menu.dl-submenu > li {
    flex: 0 0 33.333% !important;
    width: 33.333% !important;
  }
  body.tn-site .thegem-te-menu .menu-item-3450.menu-item-has-children.menu-item-parent > .sub-menu.dl-submenu > li > a {
    white-space: normal !important;
  }
  body.tn-rtl .thegem-te-menu .menu-item-3450.menu-item-has-children.menu-item-parent > .sub-menu.dl-submenu {
    left: 0 !important;
    right: auto !important;
  }
}

body.tn-site .tn-lang {
  display: none !important;
}

/* Header language switcher — dropdown (real per-language URLs, see tn_lang_switcher) */
body.tn-site .tn-hdr-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 500;
}
/* Trigger styling is light-background-safe (dark text on a faint dark
   tint): confirmed via live screenshots that both header templates
   (main navbar 3161 and sticky 3189) render their menu row on a
   white/light background at every scroll position and on every page
   tested — there is no actual dark-navbar context on this site. An
   earlier version of this rule assumed 3161 was dark and force-applied
   cream-on-transparent text there, which is what made the switcher read
   as an invisible white box on the main menu. */
body.tn-site .tn-hdr-lang__trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-family: var(--tn-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(17, 25, 39, 0.75) !important;
  background: rgba(17, 25, 39, 0.05) !important;
  border: 1px solid rgba(17, 25, 39, 0.16) !important;
  border-radius: 999px !important;
  padding: 7px 12px !important;
  cursor: pointer;
  transition: all 0.18s ease;
}
body.tn-site .tn-hdr-lang__trigger:hover,
body.tn-site .tn-hdr-lang.is-open .tn-hdr-lang__trigger {
  color: var(--tn-night) !important;
  border-color: var(--tn-bronze) !important;
  background: rgba(17, 25, 39, 0.08) !important;
}
body.tn-site .tn-hdr-lang__globe {
  opacity: 0.85;
  flex: none;
}
body.tn-site .tn-hdr-lang__chevron {
  flex: none;
  transition: transform 0.18s ease;
}
body.tn-site .tn-hdr-lang.is-open .tn-hdr-lang__chevron {
  transform: rotate(180deg);
}
body.tn-site .tn-hdr-lang__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  background: var(--tn-night);
  border: 1px solid rgba(245, 242, 235, 0.14);
  border-radius: var(--tn-radius-sm);
  box-shadow: var(--tn-shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
body.tn-site .tn-hdr-lang.is-open .tn-hdr-lang__panel {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
body.tn-site .tn-hdr-lang__item {
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  font-family: var(--tn-sans) !important;
  color: rgba(245, 242, 235, 0.78) !important;
  border: 0 !important;
  border-radius: 7px !important;
  padding: 8px 10px !important;
  text-decoration: none !important;
  transition: background 0.14s ease, color 0.14s ease;
}
body.tn-site .tn-hdr-lang__item:hover {
  color: var(--tn-paper) !important;
  background: rgba(245, 242, 235, 0.08) !important;
}
body.tn-site .tn-hdr-lang__item.is-active {
  color: var(--tn-night) !important;
  background: var(--tn-bronze) !important;
}
body.tn-site .tn-hdr-lang__item-code {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  opacity: 0.75;
  min-width: 20px;
}
body.tn-site .tn-hdr-lang__item.is-active .tn-hdr-lang__item-code {
  opacity: 1;
}
body.tn-site .tn-hdr-lang__item-name {
  font-size: 13px !important;
  font-weight: 600 !important;
}
@media (max-width: 767px) {
  body.tn-site .tn-hdr-lang__trigger {
    padding: 6px 10px !important;
  }
  body.tn-site .tn-hdr-lang__panel {
    right: 0;
    left: auto;
  }
}
body.tn-rtl .tn-hdr-lang__panel {
  right: auto;
  left: 0;
}

/* Arabic pages: right-to-left */
body.tn-rtl {
  direction: rtl;
}
body.tn-rtl .tn-land {
  direction: rtl;
  text-align: right;
}
body.tn-rtl .tn-land .tn-hero__actions,
body.tn-rtl .tn-l-hero .actions,
body.tn-rtl .tn-langbar {
  justify-content: flex-start;
}

/* Quick-info band: three columns unified on one background (design-system
   fix); separate them with a hairline instead of clashing block colors. */
body.tn-site .elementor-element-f78b765,
body.tn-site .elementor-element-26c2815 {
  border-left: 1px solid rgba(245, 242, 235, 0.12);
}
@media (max-width: 991px) {
  body.tn-site .elementor-element-f78b765,
  body.tn-site .elementor-element-26c2815 {
    border-left: 0;
    border-top: 1px solid rgba(245, 242, 235, 0.12);
  }
}

/* Hero */
.tn-hero {
  background: var(--tn-night);
  color: var(--tn-paper);
  padding: 56px 24px 64px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

.tn-hero__inner {
  max-width: var(--tn-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}

.tn-hero h1 {
  margin: 0 0 16px;
  color: var(--tn-paper) !important;
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  line-height: 1.15;
  max-width: 16ch;
}

.tn-hero p {
  margin: 0 0 28px;
  max-width: 42ch;
  color: rgba(245, 242, 235, 0.82);
  font-size: 1.05rem;
  line-height: 1.7;
}

.tn-hero__rule {
  width: 48px;
  height: 1px;
  background: var(--tn-bronze);
  margin-bottom: 20px;
}

.tn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tn-hero__media {
  margin: 0;
  position: relative;
}

.tn-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.05);
}

.tn-hero__media::after {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid rgba(170, 128, 80, 0.45);
  pointer-events: none;
}

.tn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--tn-radius-sm);
  text-decoration: none !important;
  font-family: var(--tn-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background var(--tn-ease), color var(--tn-ease), border-color var(--tn-ease);
}

.tn-btn--primary {
  background: var(--tn-bronze);
  color: var(--tn-night) !important;
  border: 1px solid var(--tn-bronze);
}

.tn-btn--primary:hover {
  background: #c0925e;
  color: var(--tn-night) !important;
}

.tn-btn--ghost {
  background: transparent;
  color: var(--tn-paper) !important;
  border: 1px solid rgba(245, 242, 235, 0.35);
}

.tn-btn--ghost:hover {
  border-color: var(--tn-bronze);
  color: var(--tn-paper) !important;
}

@media (max-width: 860px) {
  .tn-hero {
    padding: 36px 20px 40px;
  }
  .tn-hero__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .tn-hero h1 {
    max-width: none;
  }
  .tn-hero__media::after {
    inset: 8px -8px -8px 8px;
  }
}

/* Hide leftover homepage H1 band if hero is present */
body.home .tn-home-h1 {
  display: none;
}

/* Page titles */
body.tn-service #page-title .page-title-title,
body.tn-tools #page-title .page-title-title,
body.home #page-title,
body.page-id-3562 #page-title,
body.tn-lang-alt #page-title {
  display: none !important;
}

/* Elementor/TheGem bakes a per-page "#page-title{background-color:...}"
   rule into each page's generated CSS (inherited from whichever template
   post the page was cloned from). An ID selector beats our plain-class
   override below no matter what order the stylesheets load in, so the
   flat service/tools breadcrumb bar kept its dark background — leaving
   the muted --tn-stone breadcrumb text (meant for a light bar) almost
   invisible against it. Matching the ID here (specificity: 1 id + 2
   classes) beats the bare "#page-title" rule (1 id) regardless of source
   order. */
body.tn-service #page-title.page-title-block {
  background: var(--tn-paper) !important;
  padding: 20px 0 8px !important;
}

/* The theme's ".breadcrumbs-container" is absolutely positioned with a
   built-in negative top offset (~-15px), meant to pull it up under a big
   hero-photo title so it overlaps the bottom of the photo. The flat
   service/tools bar has no photo to overlap — that same negative offset
   just dragged the breadcrumb text up under the header (clipping it), and
   pushing it back down with a plain "top" offset only moved the text
   below the cream bar into the white content area instead of keeping it
   inside the bar. Taking it out of absolute positioning entirely lets it
   flow right after the (hidden) title, inside the bar's own padding, so
   the bar sizes itself around the text instead of the text floating free
   of it. */
body.tn-service .breadcrumbs-container,
body.tn-tools .breadcrumbs-container {
  position: static !important;
  padding: 6px 0 0 !important;
}

body.page:not(.home) .page-title-block,
body.page:not(.home) .breadcrumbs,
body.page:not(.home) .breadcrumbs a,
body.page:not(.home) .breadcrumbs span {
  color: var(--tn-stone) !important;
}

/* Hakkımızda / İletişim keep the theme's default hero-photo page title,
   but its breadcrumb row uses the same 17px icon-font size as the H1
   hero — same absolute size as everywhere else, yet it reads as
   oversized/heavy sitting on its own line under a big hero. Shrink it to
   match the compact scale used on service/tool pages. */
body.tn-hero-slim .breadcrumbs-container {
  padding-bottom: 14px !important;
}
body.tn-hero-slim .breadcrumbs,
body.tn-hero-slim .breadcrumbs a,
body.tn-hero-slim .breadcrumbs span,
body.tn-hero-slim .breadcrumbs .bc-devider {
  font-size: 13px !important;
}

/* Service pages */
body.tn-site .th-page,
body.tn-site .th-hero,
body.tn-site .th2-hero {
  font-family: var(--tn-sans);
}

body.tn-site .th-hero,
body.tn-site .th2-hero {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 8px 0 16px !important;
}

body.tn-site .th-hero:after,
body.tn-site .th2-hero:after {
  display: none !important;
}

body.tn-site .th-card,
body.tn-site .th2-card,
body.tn-site .th-side-cta,
body.tn-site .th2-side-cta {
  background: var(--tn-white) !important;
  border: 1px solid var(--tn-line) !important;
  border-radius: var(--tn-radius) !important;
  box-shadow: var(--tn-shadow) !important;
  backdrop-filter: none !important;
}

body.tn-site .th-dot,
body.tn-site .th2-dot,
body.tn-site .th-btn-primary,
body.tn-site .th2-btn-primary {
  background: var(--tn-bronze) !important;
  color: var(--tn-night) !important;
}

body.tn-site .th-btn,
body.tn-site .th2-btn {
  border-radius: var(--tn-radius-sm) !important;
}

/* Principles / quote blocks */
body.tn-site .thp-wrap,
body.tn-site .tn-quote-slider {
  background: var(--tn-night) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.tn-site .thp-title,
body.tn-site .tn-qs-name {
  font-family: var(--tn-serif) !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  color: var(--tn-paper) !important;
}

body.tn-site .thp-card {
  background: var(--tn-night) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.tn-site .thp-card:hover {
  background: #171e2d !important;
  transform: none !important;
}

body.tn-site .thp-card h3 {
  color: var(--tn-paper) !important;
}

/* Footer */
body.tn-site .thf-wrap,
body.tn-site #footer-nav,
body.tn-site .footer-widget-area {
  background: var(--tn-night) !important;
}

body.tn-site .thf-title {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  font-family: var(--tn-serif) !important;
}

body.tn-site .thf-links a:hover {
  transform: none !important;
}

/* Footer links inherit the generic dark anchor color otherwise (invisible on
   the dark footer background) because "body.tn-site a" outranks the widget's
   own scoped ".thf-links a" rule on specificity. */
body.tn-site footer.custom-footer .thf-links a,
body.tn-site footer.custom-footer .thf-brand a,
body.tn-site footer.custom-footer .thf-bottom a {
  color: rgba(255, 242, 235, 0.82) !important;
}
body.tn-site footer.custom-footer .thf-links a:hover,
body.tn-site footer.custom-footer .thf-brand a:hover,
body.tn-site footer.custom-footer .thf-bottom a:hover {
  color: var(--tn-bronze) !important;
}
body.tn-site .tn-quote-slider a {
  color: rgba(255, 242, 235, 0.82) !important;
}

/* Forms */
body.tn-site input,
body.tn-site select,
body.tn-site textarea,
body.tn-site .wpcf7 input,
body.tn-site .wpcf7 select,
body.tn-site .wpcf7 textarea {
  border-radius: var(--tn-radius-sm) !important;
  border-color: var(--tn-line) !important;
  min-height: 44px;
  font-family: var(--tn-sans);
}

body.tn-site .wpcf7 input[type="submit"],
body.tn-site .gem-button {
  background: var(--tn-bronze) !important;
  color: var(--tn-night) !important;
  border: 0 !important;
  border-radius: var(--tn-radius-sm) !important;
  text-transform: none !important;
  min-height: 44px;
  box-shadow: none !important;
}

/* WhatsApp */
.tn-wa-wrap {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
body.tn-rtl .tn-wa-wrap {
  right: auto;
  left: 18px;
  align-items: flex-start;
}
@media (max-width: 480px) {
  .tn-wa-wrap {
    right: 14px;
    bottom: 14px;
  }
  body.tn-rtl .tn-wa-wrap {
    left: 14px;
  }
}

.tn-wa {
  position: static;
  width: 56px;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.tn-wa:hover,
.tn-wa:focus {
  background: #20bd5a;
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.5);
}

.tn-wa svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

.tn-wa-bubble {
  max-width: 280px;
  background: var(--tn-white);
  border: 1px solid var(--tn-line);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.18);
  padding: 14px;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.tn-wa-bubble.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
@media (max-width: 480px) {
  .tn-wa-bubble {
    max-width: calc(100vw - 28px);
  }
}

.tn-wa-bubble__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--tn-stone);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
}
body.tn-rtl .tn-wa-bubble__close {
  right: auto;
  left: 8px;
}
.tn-wa-bubble__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--tn-night);
}

.tn-wa-bubble__body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-decoration: none;
  padding-right: 14px;
}
body.tn-rtl .tn-wa-bubble__body {
  padding-right: 0;
  padding-left: 14px;
}
.tn-wa-bubble__avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tn-wa-bubble__avatar svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}
.tn-wa-bubble__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tn-wa-bubble__text strong {
  font-family: var(--tn-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--tn-night);
}
.tn-wa-bubble__text span {
  font-family: var(--tn-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tn-stone);
}

/* Legal note */
.tn-legal-note {
  max-width: var(--tn-wide);
  margin: 0 auto 32px;
  padding: 16px 20px;
  border-top: 1px solid var(--tn-line);
  color: var(--tn-stone);
  font-size: 0.9rem;
}

/* 404 */
.tn-404 {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 20px 96px;
}

.tn-404 h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 12px;
}

.tn-404 p {
  color: var(--tn-stone);
  margin-bottom: 24px;
}

/* Reduce TheGem chrome */
body.tn-site .page-title-parallax-background,
body.tn-site .thegem-ken-burns-zoom-in {
  animation: none !important;
}

/* Elementor's scroll-triggered entrance animation relies on its own JS
   (waypoints) removing this class in time; any script error or slow
   observer leaves content permanently invisible. Content must never
   depend on that timing — always show it, with a short, tasteful
   CSS-only fade instead of Elementor's JS-driven one. */
body.tn-site .elementor-invisible {
  opacity: 1 !important;
  visibility: visible !important;
  animation: tn-reveal 260ms ease both !important;
}

@keyframes tn-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.tn-site img[src*="sep.png"],
body.tn-site img[src*="/sep"] {
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 360px) {
  .tn-hero,
  .tn-404,
  body.tn-site .th-container,
  body.tn-site .th2-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Calculation hub */
body.tn-site .calc-hub {
  background: transparent !important;
  padding: 8px 0 48px !important;
  font-family: var(--tn-sans) !important;
  color: var(--tn-ink) !important;
}
body.tn-site .calc-hub__inner {
  max-width: var(--tn-wide) !important;
}
body.tn-site .calc-hub__header {
  text-align: left !important;
  max-width: 68ch !important;
  margin: 0 0 28px !important;
}
body.tn-site .calc-hub__header h1,
body.tn-site .calc-hub__header h2 {
  font-family: var(--tn-serif) !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--tn-night) !important;
}
body.tn-site .calc-hub__header p {
  color: var(--tn-stone) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}
/* The markup only supplies bare `.calc-hub/.calc-grid/.calc-card` classes
   with no layout CSS of its own (no embedded <style> in the html widget),
   so every structural property — grid display, card layout, icon sizing —
   has to live here. Without an explicit width/height the icon <svg> falls
   back to its intrinsic size and fills the whole card (this is what made
   the tools page render as giant unstyled bar-chart/house icons instead of
   compact clickable cards). */
body.tn-site .calc-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 1100px) {
  body.tn-site .calc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
body.tn-site .calc-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  text-decoration: none !important;
  border: 1px solid var(--tn-line) !important;
  border-radius: var(--tn-radius) !important;
  box-shadow: var(--tn-shadow) !important;
  min-height: 0 !important;
  background: var(--tn-white) !important;
  padding: 20px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body.tn-site .calc-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--tn-bronze) !important;
  box-shadow: var(--tn-shadow-lg) !important;
}
body.tn-site .calc-card__icon {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  background: rgba(178, 58, 72, 0.08) !important;
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius-sm) !important;
}
body.tn-site .calc-card__icon svg {
  width: 24px !important;
  height: 24px !important;
  fill: var(--tn-bronze) !important;
}
body.tn-site .calc-card__content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.tn-site .calc-card__content h2,
body.tn-site .calc-card__content h3 {
  font-family: var(--tn-serif) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  margin: 0 0 6px !important;
  color: var(--tn-night) !important;
}
body.tn-site .calc-card__content p {
  color: var(--tn-stone) !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  margin: 0 0 10px !important;
}
body.tn-site .calc-card__cta {
  display: inline-block !important;
  color: var(--tn-night) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}
body.tn-site .calc-card--highlight {
  border-color: var(--tn-line) !important;
  box-shadow: none !important;
}
body.tn-tools #page-title.page-title-block {
  background: var(--tn-paper) !important;
  padding: 20px 0 8px !important;
}
@media (max-width: 720px) {
  body.tn-site .calc-grid {
    grid-template-columns: 1fr !important;
  }
}