/**
 * JS CONSULTING reusable, site-wide styles (header branding, eyebrow labels,
 * buttons, footer widget content). Plain custom classes added via each
 * block's "Additional CSS Class(es)" field, not block-style variations.
 */

/* ---------- Header display fix ----------
   Diagnosis (v3): Lightning renders the header logo and global-nav as
   floated elements (.site-header-logo{float:left}, nav floated right via
   the "nav-float" layout), but .site-header-container has no clearfix in
   this configuration, so the container collapses to near-zero height and
   only Lightning's own header box-shadow remains visible — the "thin
   line" reported. This adds a standard clearfix only; it does not touch
   Lightning's own logo/nav markup, positioning, or layout choice. */
.site-header-container::after {
	content: "";
	display: table;
	clear: both;
}

/* ---------- English eyebrow label above a heading ---------- */
.jsc-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--jsc-font-label);
	font-size: 12.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--jsc-gold);
	font-weight: 700;
	margin: 0 0 16px;
}
.jsc-eyebrow::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 2px;
	background: var(--jsc-gold);
	flex: none;
}
.jsc-section-head.is-left .jsc-eyebrow::before,
.jsc-eyebrow.is-left::before { order: -1; }

/* ---------- Buttons ---------- */
.wp-block-button.jsc-btn .wp-block-button__link {
	background: var(--jsc-navy);
	color: var(--jsc-white);
	border-radius: var(--jsc-radius);
	padding: 17px 36px;
	font-weight: 600;
	font-size: 15px;
	border: 1px solid var(--jsc-navy);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.wp-block-button.jsc-btn .wp-block-button__link:hover {
	background: var(--jsc-navy-soft);
	border-color: var(--jsc-navy-soft);
	color: var(--jsc-white);
	transform: translateY(-1px);
}
.wp-block-button.jsc-btn-outline .wp-block-button__link {
	background: transparent;
	color: var(--jsc-navy);
	border: 1px solid var(--jsc-navy);
	border-radius: var(--jsc-radius);
	padding: 17px 36px;
	font-weight: 600;
	font-size: 15px;
	transition: background-color .2s ease, color .2s ease;
}
.wp-block-button.jsc-btn-outline .wp-block-button__link:hover {
	background: var(--jsc-navy);
	color: var(--jsc-white);
}
.wp-block-button.jsc-btn-gold .wp-block-button__link {
	background: var(--jsc-gold);
	border: 1px solid var(--jsc-gold);
	border-radius: var(--jsc-radius);
	padding: 17px 36px;
	color: var(--jsc-navy-deep);
	font-weight: 700;
	font-size: 15px;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.wp-block-button.jsc-btn-gold .wp-block-button__link:hover {
	background: var(--jsc-white);
	color: var(--jsc-navy);
	transform: translateY(-1px);
}

/* ---------- Footer branding widget ---------- */
/* v7: the image logo mark was removed from the footer widget entirely
   (it re-appeared as an oversized block right after CONTACT, reading as
   a new section rather than a footer sign-off — the header logo already
   carries the brand). Only the text sign-off remains. */
.jsc-footer-tagline {
	font-family: var(--jsc-font-heading);
	font-size: 14px;
	letter-spacing: .04em;
	color: rgba(255,255,255,.75);
	margin: 0;
}

/* ---------- Global nav: SERVICE dropdown ----------
   "サービス" gains a 2-item submenu (サービス一覧 / 5S診断・現場改善支援).
   No new JS: PC hover-reveal and mobile tap-to-expand accordion both come
   from Lightning's own existing .sub-menu / vk-menu-acc mechanism, already
   wired up site-wide by the theme's own templates and vk-mobile-nav.js —
   this only re-colors the default red (var(--vk-color-primary)) look to
   the site's navy/gold palette. Scoped entirely to .global-nav-list (the
   PC header nav's own class — the mobile slide-out panel is a separate
   #vk-mobile-nav tree that never carries this class), so none of this
   touches the mobile accordion menu.
   Bugfix (root cause of the "text invisible until hovered" report): this
   stylesheet (jsc-blocks) loads BEFORE Lightning's own style-theme-json.css
   in this theme's enqueue order (the same load-order quirk already
   documented on the 5S page's own CSS). Lightning ships
   ".global-nav-list .sub-menu li a, .global-nav-list .sub-menu li a:hover
   { color:#fff }" — an EXACT selector match for both the item's normal
   and hover state — so on the cascade tie it was winning and silently
   keeping the text white (invisible on our white dropdown background)
   except while :hover, where our own hover rule's color happened to still
   apply. Fixed by prefixing every previously-tied selector with `body`,
   which adds one element to the specificity count and wins the tie
   outright — no !important needed anywhere in this block. */
body .global-nav-list > li > ul.sub-menu {
	background-color: var(--jsc-white);
	box-shadow: 0 4px 14px rgba(30,51,88,.16);
	border: 1px solid var(--jsc-navy-tint);
}
body .global-nav-list .sub-menu li a {
	color: #203864;
	border-bottom: 1px solid var(--jsc-navy-tint);
	font-weight: 500;
}
body .global-nav-list .sub-menu li a:hover,
body .global-nav-list .sub-menu li a:focus-within {
	background-color: var(--jsc-navy-tint);
	color: #203864;
	border-left: 3px solid var(--jsc-gold);
	padding-left: calc(1.2em - 3px);
}
.global-nav-list .sub-menu li:last-child a { border-bottom: none; }
.global-nav-list .sub-menu .acc-btn {
	background-color: var(--jsc-navy);
	border-color: var(--jsc-navy);
	border-radius: 3px;
}
/* Same menu object is also assigned to footer-nav; that template has no
   submenu styling or accordion JS of its own, so keep the new children
   hidden there rather than leaving them to an unstyled fallback. */
.footer-nav-list .sub-menu { display: none; }

/* ---------- Mobile-only: nav toggle + back-to-top ---------- */
@media (max-width: 760px) {
	/* Lightning's own mobile menu button (#vk-mobile-nav-menu-btn).
	   v9: reverted the v8 position:absolute !important entirely.
	   Lightning's own rule (style-theme-json.css:
	   .vk-mobile-nav-menu-btn{position:fixed;...}) is left to apply on
	   its own — the button is viewport-fixed again, as it was before any
	   of our overrides. Only size stays customized. Visibility during
	   scroll is handled by the .jsc-nav-btn-hidden class below, toggled
	   by assets/js/mobile-nav-toggle.js — opacity/visibility/pointer-
	   events only, never display:none, so layout and click area are
	   never disrupted. */
	.vk-mobile-nav-menu-btn {
		width: 28px;
		height: 28px;
		background-size: 18px 18px;
		transition: opacity .18s ease, visibility .18s ease;
	}
	.vk-mobile-nav-menu-btn.jsc-nav-btn-hidden {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	/* Lightning's own "back to top" button (.page_top_btn, shown after
	   scroll via its own .scrolled class toggle — untouched here). */
	.page_top_btn {
		width: 32px;
		height: 30px;
	}
}