/**
 * Editor + frontend styles for custom block styles registered in
 * functions.php (astra_child_register_block_styles). Loaded site-wide (both
 * posts and pages) and inside the block editor, unlike css/article.css
 * (the column-page-only automatic H2–H6 design), so every style here works
 * anywhere the block itself can be used.
 *
 * @package astra-child
 */

:root {
	--gh-orange: #f39800;
	--gh-orange-d: #d97f00;
	--gh-orange-l: #fdf3e3;
	--gh-yellow: #f5c518;
	--gh-blue: #4a90d9;
	--gh-blue-d: #2f72b8;
	--gh-line: #e6e6e6;
	--gh-cream: #fdf8ec;
	--gh-gray: #f7f7f7;
	--gh-ink: #333333;
}

.is-style-gh-gold-frame {
	padding: 20px;
	border-radius: 20px;
	border: 2px solid #ffb700;
}

/* "ひとくちメモ枠" — pairs with an H5 title inside for a callout box. */
.is-style-gh-note-box {
	background: var(--gh-gray);
	border-left: 5px solid var(--gh-blue);
	border-radius: 0 6px 6px 0;
	padding: 20px 24px;
}

/* "タブ（見出し付きボックス）" Group style — a bordered box with a fixed
   "POINT" tab label above it (was heading variation 14). */
.is-style-gh-tab-box {
	position: relative;
	margin-top: 60px !important;
	border: 2px solid #4a90d9;
	border-radius: 0 6px 6px 6px;
	padding: 14px 18px;
}
.is-style-gh-tab-box::before {
	content: "POINT";
	position: absolute;
	top: -45px;
    left: -2px;
	display: inline-block;
	background: #4a90d9;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 5px 16px;
	border-radius: 4px 4px 0 0;
}

/* "CTAボックス" — same cream/orange gradient callout as the article page's
   "親子体験会に申し込む" section, selectable on any Group/Columns block. */
.is-style-gh-cta-frame {
	background: linear-gradient(135deg, #fdf3e3, #fdf8ec);
	border-radius: 8px;
	padding: clamp(24px, 3.5vw, 38px);
	text-align: center;
}

/* "グレー全幅背景" / "薄いオレンジ全幅背景" — the block keeps its normal
   (narrow, centered) content width, but its background bleeds to the
   screen edges regardless of any parent container's max-width. A plain
   background-color can't do that by itself (it's confined to the block's
   own box); box-shadow's spread isn't confined to the box, and clip-path
   trims that spread so it only shows top-to-bottom within this block, not
   into whatever comes before/after it on the page. */
.is-style-gh-full-gray,
.is-style-gh-full-orange,
.is-style-gh-full-white,
.is-style-gh-full-yellow {
	padding: 60px 0;
	clip-path: inset(0 -100vmax);
}
.is-style-gh-full-gray {
	background-color: #d9d9d9;
	box-shadow: 0 0 0 100vmax #d9d9d9;
}
.is-style-gh-full-orange {
	background-color: rgba(249, 207, 0, .3);
	box-shadow: 0 0 0 100vmax rgba(249, 207, 0, .3);
}
.is-style-gh-full-white {
	background-color: #fff;
	box-shadow: 0 0 0 100vmax #fff;
}
.is-style-gh-full-yellow {
	background-color: #fdf8ec;
	box-shadow: 0 0 0 100vmax #fdf8ec;
}

/* Narrow the block itself to a fixed reading width within a wider (e.g.
   1200px) page, for a section that should read narrower than the rest. */
.is-style-gh-narrow-1000 {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.is-style-gh-narrow-800 {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Fixed pages have no built-in content max-width. functions.php
   (astra_child_block_page_body_class) adds "gh-block-page" to the body
   only for pages never opened/saved in Elementor's own editor, so this
   never touches a page someone actually designed in Elementor — only
   plain-blocks pages get the 1200px system below. #main is the one
   wrapper common to every page regardless of how its own layout is built
   underneath it. */
body.gh-block-page #main {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	/* A run of text with no space/break opportunity (a long URL, a typo'd
	   wall of characters) would otherwise overflow horizontally — on
	   narrow screens that forces the whole page's layout viewport to
	   expand to fit it, making everything (header included) render at
	   that wider size instead of the device's real width. */
	overflow-wrap: break-word;
}

/* Any block set to "Full width" alignment (Cover, Group, etc.) on a
   plain-blocks page breaks out of the 1200px cap above to the true edge
   of the screen, the same way core block themes handle alignfull —
   Astra/Elementor don't provide this on their own. */
body.gh-block-page .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* A full-width block's own inner content (e.g. a Cover block's heading/
   buttons) isn't given any max-width by Astra's theme.json (its
   contentSize var is empty on the front end), so at very wide screens it
   would otherwise stretch edge-to-edge too. Keep it aligned to the same
   1160px column as the rest of the page. */
body.gh-block-page .alignfull > .wp-block-cover__inner-container {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* Elementor's global Kit CSS (".elementor-kit-150 h1" etc.) and Astra's
   own dynamic CSS (".content-area .elementor-widget-theme-post-content
   h1..h6") both style bare heading tags site-wide — including on a
   plain-blocks page, since it's still wrapped by Elementor's Theme
   Builder template underneath (see the bf88cc4 override above). Reset to
   a plain, predictable baseline so a heading's look always comes from
   this theme, not from whatever Elementor's Kit happens to set —
   :not(...) leaves a heading alone once one of this theme's own
   selectable styles (is-style-gh-h-*) is chosen, so that still wins. */
body.gh-block-page h1:not([class*="is-style-gh-h-"]),
body.gh-block-page h2:not([class*="is-style-gh-h-"]),
body.gh-block-page h3:not([class*="is-style-gh-h-"]),
body.gh-block-page h4:not([class*="is-style-gh-h-"]),
body.gh-block-page h5:not([class*="is-style-gh-h-"]),
body.gh-block-page h6:not([class*="is-style-gh-h-"]) {
	font-family: inherit !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	margin-top: 0 !important;
	margin-bottom: 0.6em !important;
}

/* Elementor's site-wide "Single Page" Theme Builder template
   (.elementor-410) hard-codes this one wrapping element to 1000px via its
   own --width custom property, which silently caps a plain-blocks page's
   real content below the #main max-width above. Scoped to gh-block-page
   only, so a page actually designed in Elementor keeps its own width.
   !important is needed since Elementor's own generated CSS sets --width
   directly with the same specificity and can load after this stylesheet. */
body.gh-block-page .elementor-410 .elementor-element.elementor-element-bf88cc4 {
	--width: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Elementor's own frontend CSS (".elementor img { border-radius: 0 }")
   also leaks onto a plain-blocks page through that same wrapping
   template, and — being a real class selector — beats core's own
   ":where(.is-style-rounded img)" rule (:where() carries zero
   specificity), flattening the core Image block's "Rounded" style back
   to square corners. Restore it here with normal (non-:where) specificity. */
body.gh-block-page .wp-block-image.is-style-rounded img {
	border-radius: 9999px;
}

/* Heading style variations (見出しデザイン集) — select from the Heading
   block's Styles panel, on any heading level, on any post or page.
   Reset first: without it, a variation that doesn't redeclare
   border-bottom would show a stray underline (nothing here sets one
   automatically the way css/article.css's per-level look does — this
   reset just keeps every variation predictable if a theme or plugin adds
   its own heading border later). It also forces the text color: Astra's
   own theme CSS sets a plain element selector like "h3 { color:#808285 }",
   and since none of these variations originally declared their own color,
   that default gray was showing through instead of the design's dark ink.
   !important here is deliberate — it's neutralizing a plain, low-specificity
   rule from a theme we don't control, not fighting our own CSS. Same
   specificity as each rule below, so source order decides: 01, 02, 11, 13,
   base-2, base-3 redeclare their own border/border-bottom and win; 03
   redeclares its own (white) color and wins; the rest end up with none /
   the shared ink color. Margin is here too (not !important) since applying
   a style makes css/article.css exclude that heading from its own
   margin — without a fallback here, styled headings on a post would sit
   flush against the text above/below; 11's own margin-bottom still wins
   below. */
.is-style-gh-h-01,
.is-style-gh-h-02,
.is-style-gh-h-03,
.is-style-gh-h-04,
.is-style-gh-h-08,
.is-style-gh-h-09,
.is-style-gh-h-10,
.is-style-gh-h-11,
.is-style-gh-h-12,
.is-style-gh-h-13,
.is-style-gh-h-17,
.is-style-gh-h-18,
.is-style-gh-h-base-2,
.is-style-gh-h-base-3,
.is-style-gh-h-base-4,
.is-style-gh-h-base-5,
.is-style-gh-h-base-6 {
	border-bottom: none;
	padding-bottom: 0;
	color: var(--gh-ink) !important;
	margin: 40px 0 20px;
}
.is-style-gh-h-01 {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 2px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--gh-line);
}
.is-style-gh-h-01::before {
	content: "";
	width: 6px;
	min-height: 1.7em;
	background: var(--gh-orange);
	display: inline-block;
	flex: none;
}
.is-style-gh-h-02 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 2px;
	padding-bottom: 10px;
	border-bottom: 5px solid var(--gh-line);
	position: relative;
}
.is-style-gh-h-02::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 120px;
	height: 5px;
	background: var(--gh-orange);
}
.is-style-gh-h-03 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 2px;
	background: var(--gh-orange);
	color: #fff !important;
	padding: 12px 20px;
	border-radius: 4px;
}
.is-style-gh-h-04 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 2px;
	background: var(--gh-cream);
	border-left: 8px solid var(--gh-orange);
	padding: 14px 20px;
	border-radius: 0 4px 4px 0;
}
.is-style-gh-h-08 {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.7;
}
.is-style-gh-h-08::before,
.is-style-gh-h-08::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--gh-line);
}
.is-style-gh-h-09 {
	text-align: center;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.7;
	position: relative;
	padding-bottom: 16px;
}
.is-style-gh-h-09::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 48px;
	height: 4px;
	border-radius: 2px;
	background: var(--gh-orange);
}
.is-style-gh-h-10 {
	position: relative;
	padding-top: 20px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.7;
	counter-increment: gh-step-heading;
}
.is-style-gh-h-10::before {
	content: "STEP " counter(gh-step-heading, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	color: var(--gh-orange);
}
.is-style-gh-h-11 {
	position: relative;
	display: table;
	background: var(--gh-cream);
	border: 2px solid var(--gh-orange);
	border-radius: 8px;
	padding: 12px 20px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.7;
	margin-bottom: 9px;
}
.is-style-gh-h-11::after {
	content: "";
	position: absolute;
	left: 28px;
	bottom: -9px;
	width: 14px;
	height: 14px;
	background: var(--gh-cream);
	border-right: 2px solid var(--gh-orange);
	border-bottom: 2px solid var(--gh-orange);
	transform: rotate(45deg);
}
.is-style-gh-h-12 {
	display: table;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.9;
	background: linear-gradient(transparent 62%, #fde9a8 62%);
	padding: 0 2px;
}
.is-style-gh-h-13 {
	display: table;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.7;
	border-bottom: 3px dotted var(--gh-orange);
	padding-bottom: 8px;
}
.is-style-gh-h-17 {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.7;
}
.is-style-gh-h-17::before {
	content: "";
	width: 8px;
	min-height: 1.7em;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--gh-yellow), var(--gh-orange));
	display: inline-block;
	flex: none;
}
.is-style-gh-h-18 {
	display: table;
	border: 2px solid var(--gh-line);
	border-radius: 999px;
	padding: 10px 24px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.7;
}

/* The look normally tied automatically to each heading level on column
   pages (css/article.css), made selectable on any level, on any post or
   page (e.g. an H4 styled to look like an H2). */
.is-style-gh-h-base-2 {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	font-size: clamp(20px, 2.4vw, 25px);
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 2px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--gh-line);
}
.is-style-gh-h-base-2::before {
	content: "";
	width: 6px;
	min-height: 1.7em;
	background: var(--gh-orange);
	display: inline-block;
	flex: none;
}
.is-style-gh-h-base-3 {
	display: table;
	font-size: clamp(18px, 2vw, 21px);
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.7;
	border-bottom: 2px solid var(--gh-orange);
	padding-bottom: 6px;
}
.is-style-gh-h-base-4 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: clamp(16px, 1.8vw, 18px);
	font-weight: 700;
	letter-spacing: 2px;
}
.is-style-gh-h-base-4::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--gh-yellow);
	border-radius: 2px;
	display: inline-block;
	flex: none;
}
.is-style-gh-h-base-5 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.6;
	color: var(--gh-blue-d) !important;
}
.is-style-gh-h-base-6 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gh-orange) !important;
}

/* List styles
--------------------------------------------- */

/* "番号バッジ" — for ordered lists: replace the default number with an
   orange circle badge (was heading variation 06). */
ol.is-style-gh-list-badge {
	list-style: none !important;
	margin-left: 0;
	padding-left: 0;
	counter-reset: gh-list-badge;
}
ol.is-style-gh-list-badge > li::marker {
	content: "";
}
ol.is-style-gh-list-badge > li {
	position: relative;
	padding-left: 44px;
	margin-bottom: 12px;
	counter-increment: gh-list-badge;
}
ol.is-style-gh-list-badge > li::before {
	content: counter(gh-list-badge);
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #f39800;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* "チェック" — for unordered lists: replace the bullet with a green
   checkmark badge (was heading variation 16). */
ul.is-style-gh-list-check {
	list-style: none !important;
	margin-left: 0;
	padding-left: 0;
}
ul.is-style-gh-list-check > li::marker {
	content: "";
}
ul.is-style-gh-list-check > li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 10px;
}
ul.is-style-gh-list-check > li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e8f3e1;
	color: #5a8a3c;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* "オレンジ" — colors the native marker: the bullet dot on an unordered
   list, or the number itself on an ordered list. */
.is-style-gh-list-dot > li::marker {
	color: #f39800;
	font-weight: 700;
}

/* Table styles
--------------------------------------------- */

/* Shared clean base for both custom table styles, at every screen width.
   The core table block's own CSS puts a plain 1px border on every side of
   every cell plus a 3px border under <thead> — left alone, those doubled
   up with our own lines (visible even on desktop, where neither style's
   mobile-only behavior below has kicked in yet). Cancel all of it and
   redraw a single border under each row instead. */
.is-style-gh-table-stack table,
.is-style-gh-table-scroll table {
	border-collapse: collapse;
}
.is-style-gh-table-stack thead,
.is-style-gh-table-scroll thead {
	border-bottom: none;
}
.is-style-gh-table-stack th,
.is-style-gh-table-stack td,
.is-style-gh-table-scroll th,
.is-style-gh-table-scroll td {
	border: none;
	border-bottom: 1px solid #e6e6e6;
}
.is-style-gh-table-stack tbody tr:last-child td,
.is-style-gh-table-scroll tbody tr:last-child td {
	border-bottom: none;
}
.is-style-gh-table-stack thead th,
.is-style-gh-table-scroll thead th {
	border-bottom: 2px solid #d0d0d0;
}

/* "スマホで横スクロール" — below 768px, real horizontal scroll instead of
   the table squeezing/wrapping its columns. Desktop just shows the clean
   table above as-is; explicit here (not left to article.css) since that
   stylesheet's own overflow-x:auto only applies inside .gh-article-body —
   i.e. posts — and this style needs to work on pages too. */
@media (max-width: 768px) {
	.is-style-gh-table-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.is-style-gh-table-scroll table {
		white-space: nowrap;
	}
}

/* "スマホで縦積み" — below 768px, every cell (th or td, header row or not)
   becomes its own full-width block and they all stack top to bottom; the
   first cell of each row gets a slightly darker background so it still
   reads as that row's label, with the rest of the row's cells following
   directly under it. Works the same with or without a <thead>. Desktop
   shows the clean table above as-is; this only changes the layout at
   phone widths. */
@media (max-width: 768px) {
	.is-style-gh-table-stack table,
	.is-style-gh-table-stack thead,
	.is-style-gh-table-stack tbody,
	.is-style-gh-table-stack tr,
	.is-style-gh-table-stack th,
	.is-style-gh-table-stack td {
		display: block;
		width: 100%;
	}
	.is-style-gh-table-stack table,
	.is-style-gh-table-stack thead {
		border: none;
	}
	.is-style-gh-table-stack tr {
		overflow: hidden;
	}
	.is-style-gh-table-stack th,
	.is-style-gh-table-stack td {
		border: none;
		border-top: 1px solid #e6e6e6;
		padding: 11px 16px;
	}
	.is-style-gh-table-stack tr > *:first-child {
		border-top: none;
	}
	.is-style-gh-table-stack tr > th:first-child,
	.is-style-gh-table-stack tr > td:first-child {
		background: #f0f0f0;
		font-weight: 600;
	}
}

/* Button styles matching the site's own Elementor button designs
   pixel-for-pixel (colors/radius/padding read directly off the live
   site's computed styles): orange = the primary "var(--e-global-color-
   primary)" fill action, glass = the translucent white button used over
   a photo (the hero's own secondary button), blue = the site's other
   filled action color, orange-border = the site's own outlined nav-link
   look (from .top-menu__link a) reused as a button style.
   Astra applies its own dynamic CSS directly to .wp-block-button__link
   (including a dedicated .is-style-outline rule), at a specificity these
   plain classes don't beat on their own — !important keeps this palette
   in charge regardless of which style is picked, and border:none on the
   solid ones clears whatever default border Astra's own button CSS adds
   so no stray outline shows through. Centering/alignment is left
   entirely to each Buttons block's own justification setting. */
.is-style-gh-btn-orange .wp-block-button__link,
.is-style-gh-btn-glass .wp-block-button__link,
.is-style-gh-btn-blue .wp-block-button__link,
.is-style-gh-btn-orange-border .wp-block-button__link {
	font-family: "Noto Sans JP", sans-serif !important;
	font-weight: 500 !important;
}
.is-style-gh-btn-orange .wp-block-button__link {
	background-color: #f19f4d !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 16px 26px !important;
}
/* For use over a photo (e.g. the hero) — a translucent "glass" button,
   not an orange one; there's no orange anywhere in the real design. */
.is-style-gh-btn-glass .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.46) !important;
	border-radius: 8px !important;
	padding: 14px 26px !important;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}
.is-style-gh-btn-blue .wp-block-button__link {
	background-color: #4484ce !important;
	color: #fff !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 20px !important;
}
/* "オレンジ枠" — matches .top-menu__link a in the site header exactly. */
.is-style-gh-btn-orange-border .wp-block-button__link {
	background-color: transparent !important;
	color: #fe9a00 !important;
	border: 1px solid #fe9a00 !important;
	border-radius: 0.625rem !important;
	padding: 8px 16px !important;
	font-size: 0.875rem !important;
}

/* "見出し行" — the Japanese section title on the left, an English
   sub-label ("gh-eyebrow-en", already used on its own elsewhere) on the
   right, both on one baseline. Put a Heading + a gh-eyebrow-en Paragraph
   directly inside a Group with this style; anything else added stacks
   below on its own line, full width. */
.is-style-gh-heading-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 24px;
}
.is-style-gh-heading-row.is-style-gh-heading-row > .wp-block-heading {
	margin: 0.2rem !important;
	text-align: left;
	/* A default look baked in here, so a heading dropped into this row
	   doesn't also need a separate is-style-gh-h-* choice — several of
	   those (e.g. gh-h-08's centered flanking lines) assume a full-width,
	   standalone heading and render oddly squeezed into this flex row.
	   Values match the live site's own heading exactly (read from its
	   computed styles). Without one of those is-style-gh-h-* classes,
	   this heading also matches the site-wide ":not([class*=is-style-gh-
	   h-])" Elementor-kit reset above (its own font-weight/line-height
	   with !important) — !important here too, so this deliberate style
	   keeps priority over that catch-all default. */
	font-family: "Noto Sans JP", sans-serif;
	font-size: 30px !important;
	font-weight: 600 !important;
	letter-spacing: 2px;
	word-spacing: 10px;
	line-height: 1.3 !important;
	color: #000;
}
.is-style-gh-heading-row > .gh-eyebrow-en {
	margin: 0;
	text-align: right;
	/* Also matches the live site's own English sub-label exactly: a
	   larger, lighter-gray word with a thin dark outline (text-stroke)
	   behind the fill, rather than the smaller plain-gray gh-eyebrow-en
	   look used standalone elsewhere. */
	font-size: 30px;
	font-weight: 600;
	font-style: normal;
	word-spacing: 5px;
	color: #dfdfdf;
}
.is-style-gh-heading-row > :not(.wp-block-heading):not(.gh-eyebrow-en) {
	flex-basis: 100%;
}
@media (max-width: 1024px) {
	.is-style-gh-heading-row > .wp-block-heading {
		font-size: 21px !important;
	}
}
@media (max-width: 767px) {
	.is-style-gh-heading-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.is-style-gh-heading-row > .wp-block-heading {
		font-size: 21px !important;
		letter-spacing: 2px;
		word-spacing: 0;
	}
	.is-style-gh-heading-row > .gh-eyebrow-en {
		text-align: left;
		font-size: 24px;
		line-height: 1em;
		letter-spacing: 1px;
	}
}

/* Scroll-in entrance animation — see js/blocks-animate.js, which adds
   "is-in-view" the first time an element carrying one of these classes
   scrolls into the viewport. Works on any block via its own "Additional
   CSS class(es)" field, not just the ones this theme registers. */
.gh-fade-up,
.gh-fade-left,
.gh-fade-right {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.gh-fade-up {
	transform: translateY(24px);
}
.gh-fade-left {
	transform: translateX(-40px);
}
.gh-fade-right {
	transform: translateX(40px);
}
.gh-fade-up.is-in-view,
.gh-fade-left.is-in-view,
.gh-fade-right.is-in-view {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.gh-fade-up,
	.gh-fade-left,
	.gh-fade-right {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
/* blocks.css also loads inside the block editor (add_editor_style), but
   blocks-animate.js — which adds "is-in-view" on scroll — never runs
   there, so anything with a gh-fade-* class would stay invisible
   (opacity: 0) forever while editing. Force it visible in that context. */
.editor-styles-wrapper .gh-fade-up,
.editor-styles-wrapper .gh-fade-left,
.editor-styles-wrapper .gh-fade-right {
	opacity: 1 !important;
	transform: none !important;
}

body.home .wp-block-cover.alignfull
.wp-block-cover__inner-container p.wp-block-paragraph {
	color: #fff;
}