/* ===================================
	 1. Reset & Base Settings
	 =================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

: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;
	--wp--custom--spacing--top-and-bottom: 6rem;
	--wp--custom--spacing--left-and-right: 1.5rem;
	--z-header: 10;
	--z-pagetop: 2;
	--sticky--header--height: 60px;
	--floating-button-bottom: 6rem;
	--floating-button-right: 0.5rem;
}

:root :where(.is-layout-flow) > *,
:root :where(.is-layout-constrained) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

html {
	scroll-behavior: smooth;
}

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

/* ===================================
	 2. Base Elements
	 =================================== */
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%;
}

/* ===================================
	 3. Layout Containers
	 =================================== */
header,
footer {
	padding: 0 var(--wp--custom--spacing--small);
}

header {
	/* Apply header height excluding navigation responsive container */
	& > 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;
	}

	&.is-position-sticky {
		height: var(--sticky--header--height);
		background-color: rgba(255, 255, 255, 0.75);
	}

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

main {
	& > article,
	& > section,
	& > div {
		padding: var(--wp--custom--spacing--top-and-bottom) var(--wp--custom--spacing--left-and-right);
	}

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

@media (max-width: 768px) {
	main {
		& > article,
		& > section,
		& > div {
			padding: 3.5rem 1.25rem !important;
		}
	}
}

:where(.wp-site-blocks) > main {
	margin-block-start: 0;
}

body:not(.home) main {
    padding-top: 6rem;
    padding-right: var(--wp--preset--spacing--50);
    padding-bottom: 6rem;
    padding-left: var(--wp--preset--spacing--50);
}

@media (max-width: 768px) {
	body:not(.home) main {
	    padding: 3.5rem 1.25rem !important;
	}
}

section {
	background-color: inherit;
}

/* Common styles - section and article */
:is(section, article).alignfull.has-global-padding {
	margin: 0;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
}

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

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

footer {
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--gAiiro);
	margin-block-start: 0;

	& 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
	 =================================== */
.wp-block-table {
	& td {
		vertical-align:top;
		border: 0;
		border-bottom: 1px dotted;
		padding: 0.75rem 1rem;
	}
}

@media (max-width: 768px) {
	thead {display: none;}
	tr {
	    display: flex;
	    flex-direction: column;
	}
	tr td:not(:last-child) {
		border-bottom: 0 !important;
	}
}

.wp-block-query li {
	& > div,
	& > div > div {
		padding: 1rem 0;
	}
}

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);
	}
}

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

.wp-block-navigation__responsive-container-close {
	right: 16px;
	top: 8px;
}
/* ===================================
	 5. Custom Components
	 =================================== */
.has-calligraffitti-font-family {
	color: var(--wp--preset--color--primary);
}

/* Page top button - Common positioning */
.pagetop,
.wp-block-buttons.page-top {
	position: fixed;
	right: var(--floating-button-right);
	bottom: var(--floating-button-bottom);
	z-index: var(--z-pagetop);
}

.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);
		}
	}
}

.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 {
	&.wp-block-group,
	& .wp-block-group {
		padding: 0;
	}
}

/* ===================================
	 6. Typography
	 =================================== */
.home main {
	& h1.wp-block-heading,
	& 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;
}

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

/* ===================================
	 7. Media Queries & Accessibility
	 =================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	
	a,
	.pagetop,
	.pagetop a {
		transition: none;
	}
}

/* Additional styles */
header {
	figure {margin-block-end: 0 !important;}
	ul {padding-left: 0;}
	li {margin-block-end: 0;}
}

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

ul {padding-left: 1.5rem;}
li {margin-block-end: 1.25rem;}

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

.single-post {
	& hr {
		width: 100% !important;
		margin-top: var(--wp--preset--spacing--60);
		margin-bottom: var(--wp--preset--spacing--70);
	}
}

/* SVG icons */
.icon-svg {
	position: relative; 
	padding-left: 2.5rem !important; 
	
	/* Other styles */
	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 image settings */
	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');
}


.entry-content {padding: 0;}

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

.entry-content > .wp-block-list {width: calc(100% - 2rem);}
.entry-content .wp-block-list {
	padding: 0 1rem 0 2rem;
}

body.is-paginated .wp-block-cover.alignfull {
	display: none !important;
}

.gs-hidden {display: none;}

main.bsc-gskelton {
	.entry-content {max-width: initial;}
}

.is-hidden-on-mobile {display: none;}

@media screen and (max-width: 600px) {
	.is-hidden-on-mobile {display: block;}
	.is-style-block-link {
		padding-right: var(--wp--preset--spacing--40) !important;
		padding-left: var(--wp--preset--spacing--40) !important;
	}
}


.block-taxonomy {
		padding: 0 var(--wp--custom--spacing--left-and-right) !important;
}

@media (max-width: 768px) {
	.block-taxonomy {
			padding: 0 var(--wp--custom--spacing--left-and-right) !important;
	}
}