/*
Theme Name: YCC Layout3 Theme
Theme URI: https://example.com/ycc-layout3
Author: Your Team
Description: WordPress theme built from layout3 index.html and services.html preserving original design.
Version: 1.0.0
License: Proprietary
Text Domain: ycc-layout3
*/

/* This file is intentionally minimal. Main styles are enqueued from assets/css/home.css and assets/css/services.css to preserve original CSS unchanged. */

:root{
	/* Global font stack (match Home). */
	--ycc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Arial, sans-serif;
}

body{
	font-family: var(--ycc-font) !important;
	text-rendering: optimizeLegibility;
	font-synthesis: none;
}

.yccBackToTop{
	position: fixed !important;
	right: 24px !important;
	bottom: 24px !important;
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, #f0a35a 0%, #d9822b 100%);
	color: #fff;
	box-shadow: 0 14px 30px rgba(15,27,45,.18);
	cursor: pointer;
	z-index: 99999 !important;
	opacity: 0;
	visibility: hidden !important;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease, filter .2s ease;
}

.yccBackToTop.is-visible{
	opacity: 1;
	visibility: visible !important;
	transform: translateY(0);
}

.yccBackToTop:hover{
	filter: brightness(1.05);
	transform: translateY(-2px);
}

.yccBackToTop:focus-visible{
	outline: 3px solid rgba(47,111,163,.35);
	outline-offset: 3px;
}

.yccBackToTopIcon{
	font-size: 24px;
	font-weight: 900;
	line-height: 1;
	transform: translateY(-1px);
}

@media (max-width: 640px){
	.yccBackToTop{
		right: 16px;
		bottom: 16px;
		width: 46px;
		height: 46px;
	}

	.yccBackToTopIcon{
		font-size: 20px;
	}
}

/* Full-width layout overrides (Elementor/Gutenberg often constrain content with max-width containers). */
html, body{
	width: 100%;
	overflow-x: hidden;
}

html{
	scroll-behavior: smooth;
}

.yccPageTopMarker{
	display: block;
	position: relative;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Common wrappers (in case a plugin/theme wrapper is added). */
#page, .site, .site-content, .content-area, .wp-site-blocks{
	max-width: none !important;
	width: 100% !important;
}

/* ===== Content width (non-Home pages) =====
   Request: set all page content to 80% width.
   Keep header/menu full width; only constrain the content area. */
body:not(.home) :is(
	main.yccServicesContent,
	main.yccCompanyContent,
	main.yccRestaurantContent,
	main.yccRecruitContent
){
	width: 80% !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Elementor Full Page template: we wrap content in <main class="yccElementorContent">.
   Keep this selector narrowly scoped so Elementor header/footer aren't affected. */
body:not(.home) main.yccElementorContent{
	width: 80% !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Fallback templates (e.g., index.php) that use a top-level <section><div class="container">...
   Constrain those containers without touching header/footer containers. */
body:not(.home) > section > .container{
	width: 80% !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Full-width sections (sliders/hero bands) should remain 100% even inside an 80% content wrapper. */
body:not(.home) :is(
	main.yccServicesContent,
	main.yccCompanyContent,
	main.yccRestaurantContent,
	main.yccRecruitContent,
	main.yccElementorContent
) :is(
	.elementor-section.elementor-section-stretched,
	.elementor-section.elementor-section-full_width,
	.hero
){
	width: 100vw !important;
	max-width: none !important;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 0 !important;
	margin-right: 0 !important;
}

@supports (width: 100dvw){
	body:not(.home) :is(
		main.yccServicesContent,
		main.yccCompanyContent,
		main.yccRestaurantContent,
		main.yccRecruitContent,
		main.yccElementorContent
	) :is(
		.elementor-section.elementor-section-stretched,
		.elementor-section.elementor-section-full_width,
		.hero
	){
		width: 100dvw !important;
	}
}

/* Elementor: remove boxed container max-width so sections can span full width. */
body .elementor-section.elementor-section-boxed > .elementor-container,
body .elementor-section.elementor-section-boxed > .elementor-container > .elementor-row,
body .elementor-container{
	max-width: 100% !important;
	width: 100% !important;
}

/* Elementor (new Containers): remove boxed max-width so content can span full width. */
body .e-con.e-con-boxed > .e-con-inner,
body .e-con-full > .e-con-inner{
	max-width: 100% !important;
	width: 100% !important;
}
body .e-con{
	--content-width: 100% !important;
}

@media (max-width: 980px){
	body:not(.home) :is(
		main.yccServicesContent,
		main.yccCompanyContent,
		main.yccRestaurantContent,
		main.yccRecruitContent
	),
	body:not(.home) main.yccElementorContent,
	body:not(.home) > section > .container{
		width: 100% !important;
	}
}

/* Gutenberg: allow full-width blocks to actually be full width. */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
	max-width: none;
}

/* Elementor header text color: make var(--e-global-color-text) black only inside header. */
header.siteHeader,
.elementor-location-header{
	--e-global-color-text: #000;
}

button,
input,
textarea,
select{
	font-family: var(--ycc-font) !important;
}