/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
*/


/* ---------------------------------------------------------
   Twenty Twenty-Five spacing fix
--------------------------------------------------------- */

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

.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part:last-child {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* remvoe space in footer */
:where(.wp-site-blocks) > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* ==================================================
   Home Page: Smooth Hover Card Effect for What We Do Block
   --------------------------------------------------
   Classes:
   - Cover block:            hover-card
   - Top icon/arrow:         card-top-icon
   - Bottom content group:   card-bottom
   - Description paragraph:  card-desc
   - Button or Buttons:      card-button
================================================== */

.hover-card {
	--card-overlay-opacity: 0.85;

	/* Smooth easing */
	--card-move-duration: 0.5s;
	--card-fade-duration: 0.3s;
	--card-easing: cubic-bezier(0.22, 1, 0.36, 1);

	/* Adjust card spacing here */
	--card-content-top: 40px;
	--card-content-bottom: 40px;
	--card-title-area-height: 180px;

	position: relative;
	overflow: hidden;
}

/* Keep content above image and overlays */
.hover-card > .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
	width: 100%;
	min-height: inherit;
}

/* Soft dark layer before hover */
.hover-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.32);
	transition: opacity var(--card-fade-duration) ease;
}

.hover-card:hover::after,
.hover-card:focus-within::after {
	opacity: 0;
}

/* WordPress Cover overlay */
.hover-card > .wp-block-cover__background {
	opacity: 0 !important;
	transition: opacity var(--card-fade-duration) ease;
}

.hover-card:hover > .wp-block-cover__background,
.hover-card:focus-within > .wp-block-cover__background {
	opacity: var(--card-overlay-opacity) !important;
}

/* Disable image zoom and movement */
.hover-card > .wp-block-cover__image-background,
.hover-card:hover > .wp-block-cover__image-background,
.hover-card:focus-within > .wp-block-cover__image-background {
	transform: none !important;
}

/* Top icon / arrow */
.hover-card .card-top-icon {
	transition: opacity var(--card-fade-duration) ease;
}

.hover-card:hover .card-top-icon,
.hover-card:focus-within .card-top-icon {
	opacity: 0;
	pointer-events: none;
}

/* Bottom content group */
.hover-card .card-bottom {
	position: absolute;
	top: calc(
		100% - var(--card-content-bottom) - var(--card-title-area-height)
	);
	right: 0;
	left: 0;
	min-height: var(--card-title-area-height);

	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	box-sizing: border-box;
	will-change: top;

	transition: top var(--card-move-duration) var(--card-easing);
}

/* Move content to an equal top position */
.hover-card:hover .card-bottom,
.hover-card:focus-within .card-bottom {
	top: var(--card-content-top);
	justify-content: flex-start;
}

/* Hide description and button before hover */
.hover-card .card-desc,
.hover-card .card-button {
	max-height: 0;
	margin-top: 0;
	margin-bottom: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(8px);

	transition:
		opacity var(--card-fade-duration) ease,
		transform var(--card-fade-duration) ease,
		max-height var(--card-move-duration) var(--card-easing),
		margin-top var(--card-fade-duration) ease;
}

/* Show description after heading begins moving */
.hover-card:hover .card-desc,
.hover-card:focus-within .card-desc {
	max-height: 500px;
	margin-top: 16px;
	opacity: 1;
	transform: translateY(0);

	transition-delay: 0.1s;
}

/* Show button after description begins appearing */
.hover-card:hover .card-button,
.hover-card:focus-within .card-button {
	max-height: 120px;
	margin-top: 16px;
	opacity: 1;
	transform: translateY(0);

	transition-delay: 0.16s;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
	.hover-card,
	.hover-card *,
	.hover-card *::before,
	.hover-card *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}
/* =========================================================
   POLYLANG LANGUAGE SWITCHER
   ========================================================= */

/* Remove the browser's default 40px left padding from the UL */
ul.wp-block-polylang-language-switcher {
    padding-inline-start: 0 !important;
}

/* Display the language links horizontally */
.lang-item {
    display: inline;
    margin: 5px !important;
}


/* =========================================================
   FONTS BY POLYLANG LANGUAGE
   ---------------------------------------------------------
   English pages: Roboto
   Khmer pages:   Kantumruy Pro

   Fonts are already installed through the WordPress
   Font Library. Do not add @import or load Google Fonts again.
   ========================================================= */


/* ---------------------------------------------------------
   1. Define the font for each language
   --------------------------------------------------------- */

html[lang^="en"] {
    --site-language-font: "Roboto", Arial, sans-serif;
}

html[lang^="km"] {
    --site-language-font: "Kantumruy Pro", Arial, sans-serif;
}


/* ---------------------------------------------------------
   2. Apply the correct font to each page
   --------------------------------------------------------- */

html[lang^="en"] body,
html[lang^="km"] body,
html[lang^="en"] .wp-site-blocks,
html[lang^="km"] .wp-site-blocks {
    font-family: var(--site-language-font) !important;
}


/* ---------------------------------------------------------
   3. Override font settings added by individual blocks
   --------------------------------------------------------- */

html[lang^="en"] :where(
    h1, h2, h3, h4, h5, h6,
    p, li, a, label,
    button, input, textarea, select,
    blockquote, figcaption,
    .wp-block-navigation-item__content,
    .wp-block-button__link
),
html[lang^="km"] :where(
    h1, h2, h3, h4, h5, h6,
    p, li, a, label,
    button, input, textarea, select,
    blockquote, figcaption,
    .wp-block-navigation-item__content,
    .wp-block-button__link
) {
    font-family: var(--site-language-font) !important;
}