/* ==========================================================================
   TutorJapan brand overrides  (A2 Lab LLC)
   Loaded AFTER main.css. Applies the brand system from 00-Admin/brand/:
   green #86B131 · charcoal #373837 · Noto Sans + Noto Sans JP.
   Also fixes: hero readability, equal-height dropdowns, partner-logo marquee.
   ========================================================================== */

:root{
  /* Brand typography */
  --bd-ff-body:    'Noto Sans','Noto Sans JP','Segoe UI',Arial,sans-serif;
  --bd-ff-heading: 'Noto Sans','Noto Sans JP','Segoe UI',Arial,sans-serif;
  --bd-ff-p:       'Noto Sans','Noto Sans JP','Segoe UI',Arial,sans-serif;

  /* Brand colour system */
  --bd-theme-primary:  #86B131;  /* green — accents, links, borders */
  --bd-heading-primary:#373837;  /* charcoal headings */
  --bd-text-1:         #373837;
  --bd-text-body:      #5b5f5c;  /* softened body text */
  --tj-green:          #86B131;
  --tj-green-dark:     #698A26;
  --tj-green-darkest:  #4A611B;
  --tj-charcoal:       #373837;
}

body{ color:var(--bd-text-body); }
h1,h2,h3,h4,h5,h6{ color:var(--tj-charcoal); }

/* Solid buttons: green fill with white text uses the AA-safe darker green */
.bd-btn,.bd-btn:link{ background-color:var(--tj-green-dark); border-color:var(--tj-green-dark); color:#fff; }
.bd-btn:hover{ background-color:var(--tj-green-darkest); border-color:var(--tj-green-darkest); color:#fff; }

/* --------------------------------------------------------------------------
   HERO / SLIDER — readable single header, brand-styled over the photo
   -------------------------------------------------------------------------- */
.bd-slider__height{ min-height:620px; }
@media (max-width:767px){ .bd-slider__height{ min-height:520px; } }

/* readability scrim: dark on the left where the text sits, fading right */
.bd-slider__item{ position:relative; }
.bd-slider__item::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
      rgba(28,34,24,.78) 0%, rgba(28,34,24,.55) 38%,
      rgba(28,34,24,.18) 68%, rgba(28,34,24,0) 90%);
}
.bd-slider__item > .container{ position:relative; z-index:2; }

.bd-slider__subtitle{
  color:#c6de9b !important;                /* light-green eyebrow */
  font-size:clamp(13px,1.6vw,18px);
  letter-spacing:3px; margin-bottom:14px; font-weight:600;
}
.bd-slider__title{
  color:#ffffff !important;
  font-size:clamp(30px,4.6vw,52px) !important;
  letter-spacing:1px; line-height:1.12; margin-bottom:20px; font-weight:700;
}
.bd-slider__content p{
  color:#f2f4ee !important;
  font-size:clamp(15px,1.9vw,19px); margin-bottom:34px; max-width:34em;
}
/* Guarantee hero text is always visible (don't depend on the JS entrance animation) */
.bd-slider__content [data-animation]{ opacity:1 !important; visibility:visible !important; transform:none !important; }

/* --------------------------------------------------------------------------
   TOP NAV — simple hover (no slow underline) + uniform-height drop-downs
   -------------------------------------------------------------------------- */
/* Kill the slow 0.3s growing-underline on top-level items; use an instant colour change */
.main-menu > ul > li > a::before{ display:none !important; }
.main-menu > ul > li:hover > a,
.main-menu > ul > li > a:hover{ color:var(--tj-green) !important; }

/* Flex column makes the browser ignore the stray whitespace text-nodes that sat
   between the <li>s (the cause of the uneven row gaps) → every row identical height */
.main-menu ul li .submenu{
  display:flex; flex-direction:column;
  width:auto; min-width:250px; padding:6px 0; border-top:3px solid var(--tj-green);
}
.main-menu ul li .submenu li{ width:100%; margin:0; border-bottom:0 !important; }
.main-menu ul li .submenu li a{
  display:flex; align-items:center; height:46px; min-height:46px;
  padding:0 26px; font-size:14px; line-height:1.2; white-space:nowrap; width:100%;
  transition:background-color .15s ease, color .15s ease;
}
/* Replace the sliding green "wipe" with a simple, immediate highlight */
.main-menu ul li .submenu li a::before{ display:none !important; }
.main-menu ul li .submenu li a:hover,
.main-menu ul li .submenu li:hover > a{ background-color:#eef4e2; color:var(--tj-green-darkest) !important; }

/* --------------------------------------------------------------------------
   PARTNER / PARTNER-SCHOOL LOGOS — edge-to-edge drifting marquee, no borders
   -------------------------------------------------------------------------- */
.bd-marquee{
  width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.bd-marquee__track{
  display:flex; align-items:center; gap:72px; width:max-content;
  animation:tj-marquee 34s linear infinite;
}
.bd-marquee:hover .bd-marquee__track{ animation-play-state:paused; }
.bd-marquee__item{ flex:0 0 auto; height:66px; display:flex; align-items:center; }
.bd-marquee__item img{
  max-height:60px; width:auto; object-fit:contain;
  filter:grayscale(100%); opacity:.62; transition:filter .3s ease,opacity .3s ease;
}
.bd-marquee__item img:hover{ filter:none; opacity:1; }
@keyframes tj-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .bd-marquee__track{ animation:none; } }

/* ==========================================================================
   Round 2 — contrast, colour & consistency (from the UI/UX review)
   ========================================================================== */

/* Pure black -> brand charcoal everywhere (nav, headings, names, icons) */
:root{ --bd-common-black:#373837; --bd-text-1:#373837; --tj-green-text:#4A611B; }
.bd-section__title{ color:var(--tj-charcoal); }

/* AA-safe green for small TEXT on white (bright green stays for fills/bars/rules) */
.bd-section__subtitle,.bd-section__subtitle-lg,
.link-btn-2,.link-btn-3{ color:var(--tj-green-text) !important; }

/* CTA "お問い合わせ" band: charcoal on green (brand rule; white-on-green fails AA) */
.bd-cta__title.text-white,
.bd-cta__section .bd-cta__content span,
.bd-cta__section span{ color:var(--tj-charcoal) !important; }
.bd-border-btn{ color:var(--tj-charcoal); border-color:var(--tj-charcoal); }
.bd-border-btn:hover{ background:var(--tj-charcoal); color:#fff; border-color:var(--tj-charcoal); }

/* Stop the infinite pulsing bar under section titles */
.bd-section__title.bd-title-border::after{ animation:none !important; }

/* Service cards: equal height + tighter tracking on Japanese titles */
.bd-services__area .row{ display:flex; flex-wrap:wrap; }
.bd-services__area [class*="col-"]{ display:flex; }
.bd-services-2__item{ display:flex; flex-direction:column; width:100%; }
.bd-services-2__title{ letter-spacing:1px; }
.bd-services-2__title a:hover{ color:var(--tj-green-text); }

/* Dropdown: neutralise any stray whitespace text-nodes (safety net) */
.main-menu ul li .submenu{ font-size:0; }
.main-menu ul li .submenu li a{ font-size:14px; }

/* Off-canvas polish: quicker panel, larger social tap targets */
.offcanvas__area{ transition-duration:.4s !important; }
.offcanvas__social ul li a{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; }

/* ==========================================================================
   Round 3 — Tutors-International-inspired tightening
   (5-item nav + one CTA, stat band, footer contact column)
   ========================================================================== */

/* Nav CTA button — the single primary action, repeated nowhere else in the header */
.main-menu nav > ul > li.nav-cta > a{
  background:var(--tj-green-dark); color:#fff !important;
  padding:12px 20px !important; border-radius:6px; line-height:1;
  display:inline-block; margin-left:6px;
}
.main-menu nav > ul > li.nav-cta > a:hover{ background:var(--tj-green-darkest); color:#fff !important; }
.main-menu nav > ul > li.nav-cta > a::before{ display:none !important; }

/* Fact band — numbers as proof, charcoal band for section rhythm */
.bd-fact__band{ background:var(--tj-charcoal); padding:56px 0 26px; }
.bd-fact__item{ text-align:center; margin-bottom:30px; }
.bd-fact__num{
  display:block; font-family:"Noto Sans","Noto Sans JP",sans-serif;
  font-size:40px; font-weight:700; line-height:1.1; color:var(--tj-green);
  letter-spacing:.5px;
}
.bd-fact__label{ display:block; margin-top:8px; font-size:14px; color:#e8e8e6; }
@media (max-width: 767px){ .bd-fact__num{ font-size:30px; } }

/* Footer contact column: allow long addresses/emails to wrap cleanly */
.footer-col-3 .bd-footer-widget__menu ul li a{ word-break:break-all; }

/* ==========================================================================
   Round 4 — Three service pillars (Option A: pillars up top, detail pages
   linked underneath each as "read more")
   ========================================================================== */
.bd-pillars__row{ display:flex; flex-wrap:wrap; }
.bd-pillars__row [class*="col-"]{ display:flex; }

.bd-pillar{
  display:flex; flex-direction:column; height:100%; width:100%;
  background:#fff; border:1px solid #e7e9e2; border-radius:10px;
  padding:38px 30px 30px;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.bd-pillar:hover{
  box-shadow:0 18px 40px rgba(55,56,55,.10); transform:translateY(-4px);
  border-color:#d9e4c4;
}
.bd-pillar__icon{
  width:64px; height:64px; border-radius:50%; background:#eef4e2;
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}
.bd-pillar__icon i{ font-size:26px; color:var(--tj-green-text); }
.bd-pillar__eyebrow{
  display:block; font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--tj-green-text); font-weight:600; margin-bottom:8px;
}
.bd-pillar__title{ font-size:22px; color:var(--tj-charcoal); margin:0 0 10px; letter-spacing:.5px; }
.bd-pillar__promise{ font-size:15px; font-weight:600; color:var(--tj-green-dark); margin-bottom:14px; }
.bd-pillar__desc{ font-size:15px; line-height:1.85; color:var(--bd-text-body); margin-bottom:18px; }
.bd-pillar__covers{
  list-style:none; padding:0; margin:0 0 22px; display:flex; flex-wrap:wrap; gap:8px;
}
.bd-pillar__covers li{
  font-size:12.5px; color:var(--tj-charcoal); background:#f3f5ee;
  border-radius:20px; padding:5px 12px; line-height:1.3;
}
.bd-pillar__links{
  margin-top:auto; border-top:1px solid #eef0ea; padding-top:16px;
  display:flex; flex-direction:column; gap:10px;
}
.bd-pillar__links a{
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px; font-weight:600; color:var(--tj-charcoal); transition:color .15s ease;
}
.bd-pillar__links a:hover{ color:var(--tj-green-text); }
.bd-pillar__links a i{ font-size:12px; color:var(--tj-green); margin-left:10px; }
@media (max-width:767px){ .bd-pillar{ padding:30px 24px 26px; } }

/* ==========================================================================
   Round 5 — preloader modernised, section-underline reveal, perf polish
   ========================================================================== */

/* Preloader: static, centred logo + a slim indeterminate progress bar
   (replaces the "beating"/zooming logo, which also read as off-centre) */
.bd-preloader__center{ flex-direction:column; gap:26px; }
.bd-preloader img, .bd-preloader svg{ width:150px; animation:none !important; }
.bd-preloader__center::after{
  content:""; width:160px; height:3px; border-radius:3px;
  background-color:#e7ece0;                 /* track */
  background-image:linear-gradient(90deg, rgba(134,177,49,0) 0%, var(--tj-green) 50%, rgba(134,177,49,0) 100%);
  background-size:45% 100%; background-repeat:no-repeat; background-position:-45% 0;
  animation:tj-preload 1.15s ease-in-out infinite;
}
@keyframes tj-preload{
  0%{ background-position:-45% 0; }
  100%{ background-position:145% 0; }
}
@media (prefers-reduced-motion:reduce){
  .bd-preloader__center::after{ animation:none; background-position:50% 0; }
}

/* Section-title underline: a clean one-time left-to-right reveal when the
   heading scrolls into view (JS adds .tj-inview). Replaces the cheap infinite pulse. */
.bd-section__title.bd-title-border::after{
  width:52px; height:3px; border-radius:2px; bottom:-12px;
  left:0; right:0; margin:0 auto;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .7s cubic-bezier(.22,.61,.36,1) .1s;
  animation:none !important;
}
.bd-section__title.bd-title-border.tj-inview::after{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  .bd-section__title.bd-title-border::after{ transform:scaleX(1); transition:none; }
}