/* =============================================================================
   Binarium — design layer  (loaded last on every page)

   Palette is taken from the brand's own artwork:
     - navy  #13294b / #1d3a66   (site-binarium.webp, promokod-binarium.webp)
     - blue->green CTA gradient  (the theme's own .gb-button rule)
     - light teal surfaces       (#e9f6f7)
   Headings use Oswald (the theme already asks for it but never loaded it);
   body copy uses a system stack so Cyrillic, Devanagari and Turkish diacritics
   all render from one consistent family on every platform.
   ============================================================================= */

:root {
  --brand-navy: #13294b;
  --brand-navy-soft: #1d3a66;
  --brand-green: #0aa756;
  --brand-green-dark: #078544;
  --brand-blue: #297fad;
  --brand-teal: #2aa79b;
  --brand-teal-light: #e9f6f7;

  --ink: #16202c;
  --muted: #5b6b7c;
  --line: #dde7ec;
  --surface: #ffffff;
  --surface-alt: #f4f9fa;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(19, 41, 75, .06), 0 2px 8px rgba(19, 41, 75, .06);
  --shadow-md: 0 10px 30px rgba(19, 41, 75, .10);
  --shadow-lg: 0 24px 60px rgba(19, 41, 75, .18);

  --grad-cta: linear-gradient(70deg, #297fad 0%, #0aa756 100%);
  --wrap: 1140px;

  --font-head: 'Oswald', 'Archivo', system-ui, 'Arial Narrow', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
               Arial, 'Noto Sans', 'Noto Sans Devanagari', sans-serif;
}

/* ---------------------------------------------------------------- base ---- */
body,
.entry-content {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.entry-content p { margin: 0 0 1.15em; }

/* -------------------------------------------------------------- headings -- */
/* specificity note: the theme sets colour/size on .gb-headline-XXXX (0,1,0),
   so every rule below is written at 0,2,0 or higher to actually win.         */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: var(--font-head);
  color: var(--brand-navy);
  line-height: 1.16;
  letter-spacing: .005em;
  font-weight: 600;
}

.entry-content h1 { font-size: clamp(30px, 4.6vw, 50px); margin: 0 0 .5em; }
.entry-content h2 { font-size: clamp(23px, 3.2vw, 34px); margin: 1.9em 0 .6em; }
.entry-content h3 { font-size: clamp(19px, 2.3vw, 25px); margin: 1.6em 0 .5em; }
.entry-content h4 { font-size: 19px; margin: 1.4em 0 .5em; }
.entry-content h5 { font-size: 17px; margin: 1.3em 0 .45em; }

/* section titles that the theme marks up as <p class="gb-headline"> */
.entry-content .gb-headline-ffcb07ac,
.entry-content .gb-headline-b71ad1e1,
.entry-content .gb-headline-1770a81e,
.entry-content .gb-headline-990ad8dd,
.entry-content .gb-headline-f1f1618d,
.entry-content .gb-headline-9a8a228a,
.entry-content .gb-headline-afaf33d2,
.entry-content .gb-headline-d093e8c1,
.entry-content .gb-headline-13266f67,
.entry-content .gb-headline-89cce2b3,
.entry-content .gb-headline-d198aa83,
.entry-content .gb-headline-830592fd,
.entry-content .gb-headline-33472ff2,
.entry-content .gb-headline-13e94719,
.entry-content .gb-headline-29981b92 {
  font-family: var(--font-head);
  color: var(--brand-navy);
  font-weight: 600;
  letter-spacing: .01em;
}

/* a short brand rule under real <h2> section headings */
.entry-content h2 { position: relative; padding-bottom: .32em; }
.entry-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-cta);
}

/* --------------------------------------------------------------- links ---- */
.entry-content a:not(.gb-button):not(.ez-toc-link) {
  color: var(--brand-green-dark);
  text-underline-offset: 2px;
}
.entry-content a:not(.gb-button):not(.ez-toc-link):hover { color: var(--brand-navy); }

/* ------------------------------------------------------------- buttons ---- */
.entry-content .gb-button,
.entry-content .wp-block-button__link,
.entry-content input[type="submit"],
.entry-content button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 15px 34px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  text-decoration: none;
  background-color: var(--brand-green);
  background-image: var(--grad-cta);
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease,
              background-color .15s ease, color .15s ease, border-color .15s ease;
}
.entry-content .gb-button:hover,
.entry-content .wp-block-button__link:hover,
.entry-content input[type="submit"]:hover,
.entry-content button[type="submit"]:hover {
  background-color: var(--brand-green-dark);
  background-image: linear-gradient(70deg, #23709a 0%, #078544 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.entry-content .gb-button:focus-visible {
  outline: 3px solid rgba(10, 167, 86, .45);
  outline-offset: 2px;
}

/* ------------------------------------------------------ hero (all pages) -- */
/* 71 pages share this block. It used to be a 930px-tall light banner with a
   raster mockup as its background and the text pushed to the right; it is
   replaced here by a navy brand panel so each page's own translated headline
   becomes the focal point instead of baked-in English artwork.               */
.entry-content .gb-container-e3a83794 {
  min-height: 0 !important;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  border-radius: var(--radius-lg);
  background-color: var(--brand-navy);
  background-image:
    radial-gradient(120% 150% at 8% 0%, rgba(42, 167, 155, .50) 0%, rgba(42, 167, 155, 0) 58%),
    radial-gradient(90% 120% at 100% 100%, rgba(41, 127, 173, .45) 0%, rgba(41, 127, 173, 0) 60%),
    linear-gradient(135deg, #13294b 0%, #1d3a66 55%, #17507a 100%) !important;
  box-shadow: var(--shadow-lg);
}

.entry-content .gb-container-933452f0 {
  max-width: var(--wrap);
  display: block;
  align-items: stretch;
  text-align: left;
  padding: clamp(44px, 7vw, 84px) clamp(20px, 4vw, 48px) !important;
  margin-right: auto;
  margin-left: auto;
}

.entry-content .gb-container-0a0d448b { max-width: 780px; }

.entry-content .gb-container-e3a83794 h1,
.entry-content .gb-container-e3a83794 h2,
.entry-content .gb-container-e3a83794 h3,
.entry-content .gb-container-e3a83794 .gb-headline {
  color: #fff;
}
.entry-content .gb-container-e3a83794 h1 {
  font-size: clamp(31px, 5.2vw, 54px);
  margin-bottom: .35em;
}
/* the small brand wedge that the theme inlines before the h1 text */
.entry-content .gb-container-e3a83794 h1 img {
  vertical-align: middle;
  margin-right: .35em;
  margin-bottom: .1em;
}
.entry-content .gb-container-e3a83794 .gb-headline-c4891def {
  color: rgba(255, 255, 255, .90);
  font-size: 18px;
  padding-bottom: 0;
}
/* the bonus line becomes a pill badge */
.entry-content .gb-container-e3a83794 .gb-headline-00f8d92c {
  display: inline-block;
  margin-top: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(10, 167, 86, .20);
  border: 1px solid rgba(255, 255, 255, .30);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  border-bottom: 0;
}
.entry-content .gb-container-e3a83794 .gb-headline-00f8d92c strong { color: #fff !important; }

.entry-content .gb-container-aa37815d {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  text-align: left;
  padding-top: 30px;
}
.entry-content .gb-container-aa37815d .gb-button { margin-left: 0 !important; }
/* the second button of the pair reads as a secondary action */
.entry-content .gb-container-aa37815d .gb-button + .gb-button {
  background-image: none;
  background-color: rgba(255, 255, 255, .10);
  color: #fff;
  border-color: rgba(255, 255, 255, .70);
}
.entry-content .gb-container-aa37815d .gb-button + .gb-button:hover {
  background-color: #fff;
  background-image: none;
  color: var(--brand-navy);
}

/* --------------------------------------------------- figures + showcase --- */
.entry-content .gb-container-32843d3d { padding-top: 34px; }
/* only lift the block when it actually holds a hero screenshot */
.entry-content .gb-container-32843d3d:has(figure.gb-block-image) {
  margin-top: -38px;
  position: relative;
  z-index: 2;
}

.entry-content img.gb-image,
.entry-content .gb-block-image img,
.entry-content .wp-block-image img,
.entry-content figure img {
  border-radius: var(--radius);
  height: auto;
  max-width: 100%;
}
.entry-content .gb-container-32843d3d img.gb-image {
  width: 100%;
  box-shadow: var(--shadow-md);
  background: var(--surface);
}
.entry-content figcaption {
  font-size: 14px;
  color: var(--muted);
  margin-top: .6em;
  text-align: center;
}

/* ------------------------------------------------------- cards / grids ---- */
/* rounding is scoped to containers living inside grid columns, i.e. cards,
   so full-width background bands stay full-bleed */
.entry-content .gb-grid-column > .gb-container {
  border-radius: var(--radius);
  overflow: hidden;
}
.entry-content .gb-grid-wrapper { align-items: stretch; }
.entry-content .gb-grid-column { display: flex; }
.entry-content .gb-grid-column > .gb-container { flex: 1 1 auto; width: 100%; }

/* --------------------------------------------------------------- lists ---- */
.entry-content ul, .entry-content ol { padding-left: 1.35em; margin: 0 0 1.2em; }
.entry-content li { margin-bottom: .45em; }
.entry-content ul li::marker { color: var(--brand-green); }
.entry-content ol li::marker { color: var(--brand-green); font-weight: 700; }

/* --------------------------------------------------------------- table ---- */
.entry-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.4em 0;
  font-size: 16px;
}
.entry-content th, .entry-content td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.entry-content thead th {
  background: var(--brand-navy);
  color: #fff;
  font-family: var(--font-head);
  letter-spacing: .03em;
  font-weight: 600;
}
.entry-content tr:last-child td { border-bottom: 0; }
.entry-content tbody tr:nth-child(even) { background: var(--surface-alt); }

/* ------------------------------------------------------- quote + callout -- */
.entry-content blockquote {
  margin: 1.6em 0;
  padding: 18px 22px;
  border-left: 4px solid var(--brand-green);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--brand-teal-light);
  color: var(--ink);
  font-style: normal;
}

/* the hand-written promo box carries raw inline orange styles - normalise it */
.entry-content div[style*="ff9800"],
.entry-content div[style*="ff5722"] {
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(135deg, #13294b 0%, #1d3a66 100%) !important;
  max-width: 100% !important;
  padding: clamp(20px, 3vw, 34px) !important;
  margin: 1.8em 0 !important;
  box-shadow: var(--shadow-md);
}
.entry-content div[style*="ff9800"] h2,
.entry-content div[style*="ff5722"] h2 { color: #fff !important; margin-top: 0; }
.entry-content div[style*="ff9800"] h2::after,
.entry-content div[style*="ff5722"] h2::after { background: var(--brand-green); }
.entry-content div[style*="ff9800"] p,
.entry-content div[style*="ff5722"] p { color: rgba(255, 255, 255, .92) !important; font-size: 17px !important; }
.entry-content div[style*="ff9800"] a,
.entry-content div[style*="ff5722"] a {
  display: inline-block !important;
  background-color: var(--brand-green) !important;
  background-image: var(--grad-cta) !important;
  color: #fff !important;
  padding: 14px 28px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease;
}
.entry-content div[style*="ff9800"] a:hover,
.entry-content div[style*="ff5722"] a:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------- contents --- */
#ez-toc-container {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--brand-teal-light) !important;
  box-shadow: none !important;
  padding: 18px 22px !important;
  margin: 1.8em 0 !important;
}
#ez-toc-container .ez-toc-title {
  font-family: var(--font-head);
  font-size: 19px;
  color: var(--brand-navy);
  font-weight: 600;
}
.ez-toc-list a { color: var(--brand-navy) !important; text-decoration: none; }
.ez-toc-list a:hover { color: var(--brand-green-dark) !important; text-decoration: underline; }

/* --------------------------------------------------- related articles ----- */
.rt-holder.tpg-post-holder,
.rt-grid-item .rt-holder {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.rt-holder.tpg-post-holder:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(10, 167, 86, .45);
}
.tpg-widget-heading { font-family: var(--font-head); color: var(--brand-navy); font-size: 21px; }
.rt-holder .entry-title a { color: var(--brand-navy); text-decoration: none; font-weight: 600; }
.rt-holder .read-more a { color: var(--brand-green-dark); font-weight: 700; text-decoration: none; }

/* -------------------------------------------------------------- header ---- */
/* The theme floats the header over the hero (`.header-wrap` is absolute with a
   transparent `.site-header`), which only worked while the hero background was
   the light teal artwork. With the navy hero the dark logo and dark nav links
   became unreadable and the h1 collided with the 151px-tall header, so the
   header gets its own white row instead. Done with plain specificity (no
   !important) so the theme's sticky-menu scripting can still pin it on scroll. */
.header-wrap {
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid var(--line);
}
.header-wrap .site-header {
  background-color: #fff;
  background-image: none;
}
.header-wrap #site-navigation:not(.toggled),
.header-wrap #mobile-header:not(.toggled) {
  background-color: transparent;
}

.site-header, header.site-header {
  background-color: #fff;
  border-bottom: 1px solid var(--line);
}
.main-navigation a { font-family: var(--font-body); font-weight: 600; color: var(--brand-navy); }
.main-navigation a:hover { color: var(--brand-green-dark); }

/* -------------------------------------------------------------- footer ---- */
.site-footer { background: var(--brand-navy); color: rgba(255, 255, 255, .80); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--brand-green); text-decoration: underline; }
.site-footer .gb-headline, .site-footer .gb-headline-text { color: #fff; }
.site-footer p { color: rgba(255, 255, 255, .78); }

/* -------------------------------------------------------- accessibility --- */
a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(10, 167, 86, .45);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- mobile --- */
@media (max-width: 900px) {
  body, .entry-content { font-size: 16.5px; }
  .entry-content .gb-container-e3a83794 { border-radius: var(--radius); }
  .entry-content .gb-container-32843d3d:has(figure.gb-block-image) { margin-top: -18px; }
  .entry-content .gb-container-aa37815d { flex-direction: column; }
  .entry-content .gb-container-aa37815d .gb-button { width: 100%; }
  .entry-content table { font-size: 15px; }
  .entry-content th, .entry-content td { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .entry-content .gb-button, .rt-holder.tpg-post-holder { transition: none; }
  .entry-content .gb-button:hover { transform: none; }
}