/* ==========================================================================
   darinka.co - static rebuild
   Values mirror the original WordPress/Total theme rendering.
   ========================================================================== */

:root {
  --indigo:        #250099;  /* body text, footer background */
  --indigo-deep:   #0e0059;  /* dark bands (Successes, Coaching Approach) */
  --indigo-darker: #10005d;  /* footer bottom bar */
  --red:           #ff2301;  /* solid buttons, logo */
  --red-alt:       #ff2400;  /* nav links, outline buttons */
  --peach:         #fce5d9;  /* header + hero */
  --peach-soft:    #fdf5f3;  /* "For Your Company" band */
  --peach-pale:    #ffe0d2;
  --blue-pale:     #ecf2ff;  /* "For You" band, CTA band */
  --blue-accent:   #536bff;
  --white:         #fff;
  --grey:          #bdbdbd;

  --container:     1050px;
  --header-h:      94px;

  --fs-body:  15px;
  --lh-body:  1.625;
  --fs-h1:    34px;
  --fs-h2:    24.225px;
  --fs-h3:    20.775px;
  --fs-h4:    17.25px;
  --ls:       0.5px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls);
  color: var(--indigo);
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--red-alt); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { margin: 0; padding: 0; }

h1, h2, h3, h4 {
  margin: 30px 0 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls);
  color: var(--indigo);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p  { margin: 0 0 20px; }

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

.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  left: 0; top: 0; z-index: 999;
  width: auto; height: auto;
  margin: 0; padding: 10px 16px;
  clip: auto; clip-path: none;
  background: var(--indigo); color: var(--white);
}

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- layout ---------- */
.container {
  width: 90%;
  max-width: var(--container);
  margin-inline: auto;
}

/* The original rows are padded 30px/0 but gain ~65px from WPBakery's
   per-element bottom margins; folded into the bottom padding here. */
.section { padding: 30px 0 95px; }
.section-lg { padding: 60px 0; }
@media (max-width: 767px) { .section { padding: 30px 0 50px; } }

.grid { display: grid; gap: 30px; }
/* Without this, a grid item's automatic minimum size is its content's
   min-content width, so a wide image stops the column ever shrinking
   and inflates the mobile layout viewport. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* colour bands */
.bg-peach      { background: var(--peach); }
.bg-peach-soft { background: var(--peach-soft); }
.bg-blue-pale  { background: var(--blue-pale); }
.bg-navy       { background: var(--indigo-deep); }
/* the original sets #ffe0d2 (peach-pale) on navy-band text, not white */
.bg-navy, .bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy p { color: var(--peach-pale); }

.rounded { border-radius: 10px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: var(--ls);
  line-height: 1.625;
  padding: 8px 16px;
  border-radius: 3px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-solid   { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-solid:hover { background: #d81d00; border-color: #d81d00; color: var(--white); }
.btn-outline { background: transparent; color: var(--red-alt); border-color: var(--red-alt); font-weight: 700; }
.btn-outline:hover { background: var(--red-alt); color: var(--white); }

/* ==========================================================================
   Header
   ========================================================================== */
#site-header {
  background: var(--peach);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
  gap: 20px;
}
.site-logo img { width: 150px; height: auto; }

#site-navigation .nav-list {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}
#site-navigation .nav-list > li { position: relative; }
#site-navigation .nav-list > li > a {
  display: block;
  font-size: 15px;
  line-height: 34px;
  color: var(--red-alt);
  border-bottom: 3px solid transparent;
}
#site-navigation .nav-list > li > a:hover { text-decoration: none; }
#site-navigation .nav-list > li.current > a { border-bottom-color: var(--red); }
/* inactive nav links keep their colour on hover, like the original */
#site-navigation .nav-list > li:not(.current) > a { color: var(--indigo); }

/* dropdown */
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--white);
  box-shadow: 0 6px 20px rgba(37, 0, 153, .14);
  border-radius: 4px;
  padding: 8px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.has-children:hover .sub-menu,
.has-children:focus-within .sub-menu,
.has-children.open .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.sub-menu a {
  display: block;
  padding: 8px 18px;
  color: var(--indigo);
  font-size: 15px;
}
.sub-menu a:hover { color: var(--red-alt); text-decoration: none; }

/* burger */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0;
  background: none; border: 0; cursor: pointer;
}
.burger-bar { display: block; width: 26px; height: 2px; background: var(--indigo); }

@media (max-width: 959px) {
  #site-navigation { display: none; }
  .mobile-menu-toggle { display: flex; }
}

/* ---------- mobile menu overlay ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(255, 255, 255, .97);
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu[hidden] { display: none; }
/* fade in on open, like the theme's full-screen overlay nav */
.mobile-menu:not([hidden]) { animation: fadeIn .3s ease both; }
.mobile-menu nav ul { list-style: none; text-align: center; }
.mobile-menu nav > ul > li > a {
  display: block;
  padding: 12px 0;
  font-size: 20px;
  color: var(--indigo);
}
.mobile-menu nav ul ul a { font-size: 16px; padding: 8px 0; display: block; color: var(--indigo); }
.mobile-menu-close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px;
  font-size: 34px; line-height: 1;
  background: none; border: 0; color: var(--indigo); cursor: pointer;
}
body.menu-open { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { background: var(--peach); padding: 30px 0 0; }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; align-items: center; }
.hero h1 { font-size: var(--fs-h1); margin-top: 0; }
.hero h2 { font-size: var(--fs-h2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; padding-bottom: 30px; }
.hero-img { border-radius: 10px; overflow: hidden; }
@media (max-width: 767px) {
  .hero-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card img { border-radius: 10px; margin-bottom: 18px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card h3 { margin: 0 0 12px; font-size: var(--fs-body); text-transform: uppercase; line-height: 1.6; }
.card h3.normal-case { text-transform: none; font-size: var(--fs-h3); }
.card p { margin-bottom: 16px; }

/* stats: the original gives the icon a fixed 60px box + 35px gap, so the
   text row starts at 95px in every column of the navy bands */
.stat { text-align: left; }
.stat > svg { display: block; margin-bottom: 55px; }
.stat h4 { margin-top: 0; }
.stat p { font-size: var(--fs-h3); line-height: 1.4; margin: 0; }

/* ==========================================================================
   Carousels
   ========================================================================== */
/* Item sizing lives in CSS (not JS) so it stays correct across any resize.
   --pv = items per view; JS only reads it and translates the track. */
.carousel { position: relative; --pv: 3; --gap: 30px; }
.carousel[data-per-view="2"] { --pv: 2; }
.carousel[data-per-view="1"] { --pv: 1; }
@media (max-width: 959px) { .carousel { --pv: 2; } }
@media (max-width: 767px) { .carousel { --pv: 1; } }

.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex;
  gap: var(--gap);
  transition: transform .45s ease;
  will-change: transform;
}
/* scoped to .carousel so the logo marquee keeps its fixed item width */
.carousel .carousel-track > * {
  flex: 0 0 calc((100% - var(--gap) * (var(--pv) - 1)) / var(--pv));
  min-width: 0;
}

.carousel-nav {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;
}
.carousel-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: 0;
  color: var(--indigo);
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
}
.carousel-btn:hover { background: rgba(37, 0, 153, .08); }
.carousel-btn[disabled] { opacity: .35; cursor: default; }

/* logo carousel: 6-up, stepping every 3s, infinite (original owl config:
   items 6, 768px: 3, below: 2, autoplayTimeout 3000, no arrows) */
.carousel-logos { --pv: 6; --gap: 12px; }
@media (max-width: 959px) { .carousel-logos { --pv: 3; } }
@media (max-width: 767px) { .carousel-logos { --pv: 2; } }
.logo-item {
  display: flex; align-items: center; justify-content: center;
  height: 125px;
}
.logo-item img { max-height: 125px; max-width: 100%; width: auto; object-fit: contain; }

/* testimonials - peach quote box with caret, avatar + name below,
   mirroring the theme's .testimonial-entry-content */
.carousel-testimonials { --gap: 14px; }
.testimonial { margin: 0; }
.t-box {
  position: relative;
  background: var(--peach-soft);
  padding: 20px;
}
.t-box blockquote {
  margin: 10px 0;
  padding: 4px 0 0 55px;
  background: url('../img/quote.png') 0 4px no-repeat;
  font-size: 18.465px;
  line-height: 1.5;
  color: var(--indigo-darker);
}
.t-box blockquote p { margin: 0; }
.t-caret {
  position: absolute;
  top: 100%; left: 10px;
  border: 12px solid transparent;
  border-top-color: var(--peach-soft);
  border-bottom: 0;
}
/* name inside the box, avatar alone below the caret */
.t-box .who { display: block; margin: 20px 0 0; }
.t-avatar { width: 45px; height: 45px; border-radius: 50%; padding: 3px; margin-top: 14px; }

/* ==========================================================================
   CTA band + footer
   ========================================================================== */
.cta-band { background: var(--blue-pale); padding: 50px 0; }
.cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.cta-inner > * { min-width: 0; }
.cta-photo img { border-radius: 10px; }
@media (max-width: 767px) { .cta-inner { grid-template-columns: 1fr; } }
.cta-band h2 { margin-top: 0; }
.cta-band h3 { max-width: 520px; font-weight: 400; }
.cta-band .btn { margin-top: 10px; }

/* no bottom padding: #footer-bottom sits inside #footer and must end
   flush with it, or the dark bar shows a stray indigo strip beneath */
#footer { background: var(--indigo); color: var(--white); padding: 45px 0 0; }
#footer h4 { color: var(--white); margin: 0 0 24px; font-size: var(--fs-h4); }
#footer a { color: var(--white); }
#footer .muted { color: rgba(255, 255, 255, .75); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-links { list-style: none; }
.footer-links li { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.footer-links a { display: block; padding: 10px 0; color: var(--grey); transition: color .15s ease; }
.footer-links a:hover { color: var(--white); text-decoration: none; }
#footer-bottom { background: var(--indigo-darker); color: var(--white); padding: 20px 0; margin-top: 40px; font-size: 13.845px; }
@media (max-width: 767px) {
  .footer-cols { grid-template-columns: 1fr; gap: 30px; }
}

/* back to top */
#back-to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 10px rgba(37, 0, 153, .2);
  color: var(--indigo);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
#back-to-top.visible { opacity: 1; visibility: visible; }

/* ==========================================================================
   Case studies
   ========================================================================== */
.cs-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 60px 0; }
@media (max-width: 767px) { .cs-list { grid-template-columns: 1fr; } }
.cs-card img { border-radius: 4px; margin-bottom: 20px; }
.cs-card h2 { margin-top: 0; font-size: var(--fs-h3); }
.cs-card .more { font-weight: 600; }

/* listing cards are bordered panels in the original (.wpex-card-inner):
   2px #eee frame, white fill, image flush to the frame, 25px inner
   margins, more-link pinned to the bottom edge */
.cs-panel {
  border: 2px solid #eee;
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.cs-panel-media img { border-radius: 0; margin: 0; width: 100%; }
.cs-panel-body { margin: 25px 25px 0; }
.cs-panel-body h2 { margin-bottom: 15px; }
.cs-panel-footer { margin: auto 25px 25px; padding-top: 4px; }

.cs-hero img { width: 100%; border-radius: 4px; }
.cs-body { padding: 30px 0 60px; }
.cs-body h1 { font-size: 27.69px; }
/* matches the original: no extra indent, no per-item spacing */
.cs-body ul { padding-left: 1.1em; margin: 0 0 20px; list-style: disc; }
.cs-body li { margin-bottom: 0; }

.related { padding: 30px 0 60px; }
.related h3 { margin-bottom: 24px; }

/* ==========================================================================
   Page-specific components
   ========================================================================== */

/* contributions carousel item: image + bordered details box (theme's
   .wpex-carousel-entry-details.wpex-bordered) */
/* original owl config: 2-up on desktop AND phones, 3-up on tablets */
.carousel-contrib { --gap: 15px; }
@media (max-width: 959px) { .carousel-contrib { --pv: 3; } }
@media (max-width: 767px) { .carousel-contrib { --pv: 2; } }
.contribution img { width: 100%; }
.contribution .contribution-details {
  border: 1px solid #eee;
  padding: 20px;
}
.contribution p { margin: 0; font-size: 16.155px; }

/* ---------- decorative background shapes ----------
   Row backgrounds from the original (asset-1 = quarter blue circle,
   circle-blue = solid blue circle, circle-dotted = dashed outline). */
.deco-asset-bl   { background-image: url('../img/asset-1.png');       background-position: left bottom;  background-size: 150px; background-repeat: no-repeat; }
.deco-asset-r    { background-image: url('../img/asset-1.png');       background-position: right center; background-size: 200px; background-repeat: no-repeat; }
.deco-blue-bl    { background-image: url('../img/circle-blue.png');   background-position: left bottom;  background-size: 300px; background-repeat: no-repeat; }
.deco-dot-bl     { background-image: url('../img/circle-dotted.png'); background-position: left bottom;  background-size: 200px; background-repeat: no-repeat; }
.deco-dot-r-150  { background-image: url('../img/circle-dotted.png'); background-position: right center; background-size: 150px; background-repeat: no-repeat; }
.deco-dot-r-200  { background-image: url('../img/circle-dotted.png'); background-position: right center; background-size: 200px; background-repeat: no-repeat; }

/* ---------- scroll-triggered fade-in (original: wpb_animate fadeIn) ---------- */
.fade { opacity: 0; }
.fade.in { animation: fadeIn 1s both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1; }
  .fade.in { animation: none; }
}
/* if JS never runs, content must not stay invisible */
.no-js .fade { opacity: 1; }

/* "Recipe" steps: five side-by-side columns, each headed by a 30px red
   icon (original: vc_col-sm-1 x5, icons 60px box, still 5-up at 768,
   stacked below) */
.recipe {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  padding-bottom: 30px;
}
/* Row alignment across the five columns comes from the original's fixed
   slots: 60px icon box + 35px gap (next block at 95), then min-height
   190px for label+title and again for the objective, so every column
   hits 0 / 95 / 285 / 475. */
.recipe-step > svg { display: block; height: 60px; margin-bottom: 35px; }
.recipe-step .step-head { min-height: 190px; }
.recipe-step .step-label { font-weight: 700; margin-bottom: 24px; }
.recipe-step .step-title { font-size: 18.5px; font-weight: 700; line-height: 1.45; margin-bottom: 0; }
/* objective paragraphs are red in the original */
.recipe-step .objective { color: var(--red); min-height: 190px; margin-bottom: 0; }
.recipe-step .step-items { margin: 0; }
@media (max-width: 767px) {
  /* stacked columns: fixed slots would just leave holes */
  .recipe-step .step-head, .recipe-step .objective { min-height: 0; }
  .recipe-step .objective { margin-bottom: 20px; }
}
@media (max-width: 767px) {
  .recipe { grid-template-columns: 1fr; gap: 34px; }
}

.cert-list { list-style: none; }
.cert-list li { margin-bottom: .6em; padding-left: 1em; position: relative; }
.cert-list li::before { content: "\2022"; position: absolute; left: 0; }

/* Other mentoring roles: logos sit in a fixed 85px slot + 35px gap so the
   role text starts at 120px in every column, as in the original */
.roles .role img { height: 85px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 35px; }
.roles .role p { margin: 0; }

/* CTA extra links (For You page) */
.cta-extra { margin-top: 30px; }
.cta-extra p { margin: 0 0 6px; }

/* share links */
.share { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 40px; }
.share a { font-weight: 600; }

/* testimonial pages */
.single-testimonial { max-width: 720px; }
.avatar { border-radius: 50%; width: 150px; height: 150px; object-fit: cover; margin-bottom: 20px; }
.post-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; border-top: 1px solid #eee; padding: 20px 0; }
.post-nav .next { margin-left: auto; }

/* related case studies */
.cs-card h4 { margin: 12px 0 0; font-size: var(--fs-body); }
.cs-card h4 a, .cs-card h2 a { color: var(--indigo); }
.cs-card h4 a:hover, .cs-card h2 a:hover { color: var(--red-alt); }

/* misc */
.page-blank { min-height: 40vh; }
.error-404 { padding: 60px 0 90px; }
.breadcrumbs { font-size: 13.8px; margin-bottom: 20px; }

/* two contiguous bands that read as one (original recipe rows);
   flow-root keeps child margins from collapsing into a visible gap */
.section-joined-top { padding: 30px 0 0; display: flow-root; }
.section-joined-bottom { padding: 0 0 95px; display: flow-root; }
@media (max-width: 767px) { .section-joined-bottom { padding: 0 0 50px; } }