/*
 * gSkeleton -- frontend.css
 *
 * All front-end styles for the theme live here.
 * Internal sections are marked with === headings to prepare for
 * file splitting in v1.0.6 (editor.css / frontend.css separation).
 *
 * Section map:
 *   1. Reset & Tokens       -- box-sizing, CSS custom properties
 *   2. Base Elements        -- a, iframe, p, ul, li, figure
 *   3. Layout Containers    -- header, main, footer, section
 *   4. WordPress Blocks     -- .wp-block-* overrides
 *   5. Custom Components    -- pagetop button, page-info, SVG icons
 *   6. Typography           -- heading margins, post title
 *   7. Accessibility        -- prefers-reduced-motion
 *
 * Do not remove sections -- the structure is referenced in the v1.0.6 roadmap.
 * Hardcoded color values (e.g. #003b5d on table th) are intentional overrides
 * where the block editor does not expose a token-based control.
 *
 * @package gSkeleton
 * @since   1.0.0
 */

/* =============================================================================
   1. Reset & Tokens
   ============================================================================= */

/*
 * Universal box-sizing reset.
 * Applied via ::before / ::after to avoid specificity conflicts with
 * WordPress core block styles.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * CSS custom properties (design tokens).
 *
 * --wp--preset--color--gAiiro : theme primary blue, mirrors theme.json "primary".
 *   Defined here as a fallback for components that reference it before
 *   theme.json tokens are resolved (e.g. skip link focus rings).
 *
 * --z-header / --z-pagetop    : z-index scale. Keep header above pagetop.
 *
 * --sticky--header--height    : used by hero section offset calculation.
 *   If the header height changes, update this value and the hero rule in
 *   section 4 simultaneously.
 *
 * --floating-button-*         : position of the page-top fixed button.
 *   Adjust bottom if a cookie banner or chat widget occupies that space.
 */
:root {
	--wp--preset--color--gAiiro: #004c71;
	--wp--preset--color--primary: var(--wp--preset--color--gAiiro);
	--wp--custom--spacing--small: 1rem;
	--wp--custom--spacing--medium: 2rem;
	--wp--custom--spacing--large: 3rem;
	--wp--custom--spacing--x-large: 4rem;
	--z-header: 10;
	--z-pagetop: 2;
	--sticky--header--height: 60px;
	--floating-button-bottom: 6rem;
	--floating-button-right: 0.5rem;
}

/*
 * Reset block-generated margin between flow/constrained layout children.
 * WordPress core adds margin-block-start/end via JavaScript; this ensures
 * those values do not stack with theme margins.
 * Do not remove -- without this, double-spacing appears between blocks.
 */
:root :where(.is-layout-flow) > *,
:root :where(.is-layout-constrained) > * {
	padding: 1rem 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

html {
	scroll-behavior: smooth; /* overridden in section 7 for reduced-motion */
}

body {
	color: #3e3a39;
	padding: 0;
}

/* =============================================================================
   2. Base Elements
   ============================================================================= */

/*
 * Link underline animation via CSS gradient trick.
 * Underline grows from left on hover; removed on focus-visible in favour
 * of a solid outline for keyboard accessibility (WCAG 2.1 SC 2.4.7).
 */
a {
	text-decoration: none;
	background: linear-gradient(currentColor 0 0) 0 100% / var(--d, 0) 1px no-repeat;
	transition: background-size 0.5s ease;

	&:hover {
		--d: 100%;
	}

	&:focus-visible {
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}
}

iframe {
	width: 100%;
}

/* Paragraph spacing -- !important required to override block editor inline styles. */
p {
	margin-block-end: 1.5rem !important;
}

figure {
	margin-block-end: 1.5rem !important;
}

ul {
	padding-left: 1.5rem;
}

li {
	margin-block-end: 1.25rem;
}

/* =============================================================================
   3. Layout Containers
   ============================================================================= */

header,
footer {
	padding: 0 var(--wp--custom--spacing--small);
}

/*
 * Header height constraint.
 * Targets the direct child group div but excludes the navigation responsive
 * container, which needs its own height behaviour when the mobile menu opens.
 */
header {
	& > div:not(.wp-block-navigation__responsive-container),
	& .wp-block-group > div:not(.wp-block-navigation__responsive-container) {
		width: 100%;
		height: 72px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/*
	 * Sticky header: semi-transparent background.
	 * Height is explicitly set to match --sticky--header--height so that
	 * the hero section offset (section 4) remains accurate.
	 */
	&.is-position-sticky {
		height: var(--sticky--header--height);
		background-color: rgba(255, 255, 255, 0.75);
	}

	& .wp-block-group {
		padding: 0;
	}

	/* Reset list styles inside header navigation. */
	figure { margin-block-end: 0 !important; }
	ul { padding-left: 0; }
	li { margin-block-end: 0; }
}

main {
	& > article,
	& > section,
	& > div {
		padding: 0 var(--wp--custom--spacing--small);
	}

	/* When main itself is a wp-block-group, let block padding control spacing. */
	&.wp-block-group {
		padding: 0;
	}
}

/* Prevent double top margin on the first block inside main. */
:where(.wp-site-blocks) > main {
	margin-block-start: 0;
}

/* Inner pages get vertical padding; home page manages its own via blocks. */
body:not(.home) main {
	padding: var(--wp--custom--spacing--x-large) var(--wp--custom--spacing--small);
}

section {
	background-color: inherit; /* prevent sections from creating new stacking contexts unintentionally */
}

/*
 * Full-width sections with global padding.
 * Used by patterns and templates that span edge-to-edge.
 * Overrides the main padding above for full-bleed sections.
 */
:is(section, article).alignfull.has-global-padding {
	margin: 0;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
}

/* Exception: access section -- bottom padding removed to bleed into map embed. */
section.access.alignfull.has-global-padding {
	margin-bottom: -0.5rem;
	padding: var(--wp--preset--spacing--80) 0 0 0;
}

/* Exception: contact section -- padding handled internally by contact block. */
section#contact.alignfull.has-global-padding {
	padding: 0;
	margin: 0;
}

footer {
	margin-block-start: 0;

	/* Footer links inherit white color; exclude buttons which have their own colour. */
	& a:where(:not(.wp-element-button)) {
		color: var(--wp--preset--color--white);
		text-decoration: none;
	}
}

footer p {
	margin-block-end: 0 !important;
}

/* =============================================================================
   4. WordPress Blocks
   ============================================================================= */

/*
 * Table block.
 * th background (#003b5d) is a deliberate darker shade of the primary colour.
 * Not tokenised because this level of specificity is not available in theme.json
 * without a block style override.
 */
.wp-block-table {
	& th {
		color: #fff;
		background-color: #003b5d;
		vertical-align: top;
		border: 0;
		border-bottom: 1px solid;
		padding: 0.75rem 1rem;
	}

	/* Rounded corners on the outer th cells only. */
	& tr:first-child > th:first-child { border-radius: 0.5rem 0 0 0; }
	& tr:first-child > th:last-child  { border-radius: 0 0.5rem 0 0; }
	& tr:last-child  > th:first-child { border-radius: 0 0 0 0.5rem; }
	& tr:last-child  > th:last-child  { border-radius: 0 0 0.5rem 0; }

	& td {
		vertical-align: top;
		border: 0;
		border-bottom: 1px dotted;
		padding: 0.75rem 1rem;
	}
}

/* Query loop list items -- reset default list padding for post grid layouts. */
.wp-block-query li {
	& > div,
	& > div > div {
		padding: 1rem 0;
	}
}

/*
 * Hero cover block.
 * Pulls the hero section up behind the sticky header using negative margin.
 * The calc() accounts for the WP admin bar (--wp-admin--admin-bar--position-offset).
 * min-height ensures the hero fills the viewport minus the header bar.
 *
 * If --sticky--header--height changes in :root, update here too.
 */
section.wp-block-cover.alignfull.has-parallax.hero {
	min-height: calc(96vh + var(--sticky--header--height));
	margin-block-start: calc(-1 * var(--sticky--header--height) + var(--wp-admin--admin-bar--position-offset, -1 * var(--sticky--header--height)));

	& .wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow {
		padding-block-start: var(--sticky--header--height);
	}
}

/* Navigation -- mobile menu open state padding. */
.wp-block-navigation:not(.has-background) {
	& .wp-block-navigation__responsive-container.is-menu-open {
		padding: var(--wp--preset--spacing--40);
	}
}

/* Navigation close button -- nudge to avoid collision with scrollbar. */
.wp-block-navigation__responsive-container-close {
	right: 16px;
	top: 8px;
}

/* =============================================================================
   5. Custom Components
   ============================================================================= */

/*
 * Calligraffitti font utility class.
 * Applied via Additional CSS Class in the block editor.
 * Colour inherits primary token so it updates when the palette changes.
 */
.has-calligraffitti-font-family {
	color: var(--wp--preset--color--primary);
}

/*
 * Page-top button -- shared positioning for both legacy .pagetop and
 * the newer .wp-block-buttons.page-top implementation.
 * z-index is below header (--z-header: 10) intentionally.
 */
.pagetop,
.wp-block-buttons.page-top {
	position: fixed;
	right: var(--floating-button-right);
	bottom: var(--floating-button-bottom);
	z-index: var(--z-pagetop);
}

/* Legacy circular pagetop button. */
.pagetop {
	height: 3rem;
	width: 3rem;
	background: var(--wp--preset--color--primary);
	border: solid 2px var(--wp--preset--color--white);
	border-radius: 50%;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: border-color 0.5s ease;

	&:hover {
		border-color: var(--wp--preset--color--luminous-vivid-amber);
	}

	& a {
		transition: color 0.5s ease;

		&:hover {
			color: var(--wp--preset--color--luminous-vivid-amber);
		}
	}
}

/* Block-based pagetop button -- square with shadow. */
.wp-block-buttons.page-top a {
	width: 4rem;
	height: 4rem;
	box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
	display: flex;
	justify-content: center;
	align-items: center;
}

/* page-info group -- suppress internal padding from nested groups. */
.page-info {
	&.wp-block-group,
	& .wp-block-group {
		padding: 0;
	}

	& p {
		margin-block-end: 0 !important;
	}
}

/*
 * SVG icon utility classes.
 * Usage: add "icon-svg icon-pc" (etc.) as Additional CSS Class on a paragraph block.
 * The ::before pseudo-element renders the icon; padding-left creates the gutter.
 * Icon files live in assets/images/. Do not rename files without updating these rules.
 */
.icon-svg {
	position: relative;
	padding-left: 2.5rem !important;
	font-size: 24px;
	line-height: 1.5;
}

.icon-svg::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.icon-pc::before      { background-image: url('../images/icon_pc.svg'); }
.icon-value::before   { background-image: url('../images/icon_value.svg'); }
.icon-checked::before { background-image: url('../images/icon_checked.svg'); }
.icon-ai-robo::before { background-image: url('../images/icon_robo.svg'); }
.icon-hint::before    { background-image: url('../images/icon_hint.svg'); }

/* =============================================================================
   6. Typography
   ============================================================================= */

/*
 * Heading bottom margins.
 * theme.json handles font-size and line-height; these rules handle spacing
 * in contexts where the block editor's blockGap does not apply
 * (e.g. inside a constrained-layout group with nested headings).
 */
.home main {
	& h2.wp-block-heading {
		margin-block-end: 2rem;
	}
}

h1.wp-block-post-title,
h2.wp-block-post-title {
	margin-block-end: 2rem;
}

h2.wp-block-heading {
	margin-block-end: 1.875rem;
}

h3.wp-block-heading {
	margin-block-end: 1.75rem;
}

/* Single post -- extra breathing room above the closing rule. */
.single-post {
	& hr {
		margin-top: 0;
		margin-bottom: var(--wp--preset--spacing--60);
	}
}

/*
 * Entry content layout.
 * Adds horizontal padding to all direct children except cover blocks,
 * which are expected to bleed full-width.
 */
.entry-content {
	padding: 0;
}

.entry-content > *:not(.wp-block-cover) {
	padding: 0 1rem;
}

.entry-content > ul {
	width: calc(100% - 2rem);
}

/* =============================================================================
   7. Accessibility
   ============================================================================= */

/*
 * Respect the user's preference for reduced motion.
 * Disables scroll animation and CSS transitions for users who have
 * enabled "Reduce Motion" in their OS accessibility settings.
 * WCAG 2.1 SC 2.3.3 (AAA) -- included here as a baseline best practice.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	a,
	.pagetop,
	.pagetop a {
		transition: none;
	}
}


.wp-block-cover:not([style*="background-image"]) {
  background-color: #f0f0f0;
}