/*
Theme Name: Freesia
Theme URI: https://freesiarehabclinic.com
Template: bloom
Description: Child theme of Bloom for freesiarehabclinic.com, replacing the Kadence theme: Kadence palette with the Kadence Blocks colours, Anuphan typography throughout, header with the LINE appointment button, two-row footer with the clinic licence, and the post, programme and treatment layouts.
Author: Nopphan Bunnag
Author URI: https://npbn.me
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: freesia
*/

/* Freesia-only rules. Structure and behaviour come from the bloom parent (bloom/assets/css/bloom.css); the header,
 * dropdown, drawer and button values it uses are set in theme.json settings.custom.bloom. The values below reproduce the
 * Kadence theme, its header/footer builder and the seed-fonts settings the site used (bloom/parity/freesia). */

:root {
	/* Kadence theme icons (menu, arrow-down, arrow-right-alt), used as masks. */
	--freesia-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1zM3 7h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1zM3 19h18c0.552 0 1-0.448 1-1s-0.448-1-1-1h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1z'/%3E%3C/svg%3E");
	--freesia-icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.293 9.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z'/%3E%3C/svg%3E");
	--freesia-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 28'%3E%3Cpath d='M27 13.953c0 0.141-0.063 0.281-0.156 0.375l-6 5.531c-0.156 0.141-0.359 0.172-0.547 0.094-0.172-0.078-0.297-0.25-0.297-0.453v-3.5h-19.5c-0.281 0-0.5-0.219-0.5-0.5v-3c0-0.281 0.219-0.5 0.5-0.5h19.5v-3.5c0-0.203 0.109-0.375 0.297-0.453s0.391-0.047 0.547 0.078l6 5.469c0.094 0.094 0.156 0.219 0.156 0.359v0z'/%3E%3C/svg%3E");
}
/* The Kadence alias variables (--global-palette-highlight, --global-palette-btn-*, --global-gray-*, content widths)
 * are printed by the parent's inc/compat-vars.php since 16 Sept 2026. */

/* Kadence-specific selectors the bloom parent doesn't style through --global-heading-font-family on its own
 * (headings, nav, buttons and the mobile drawer already follow it via bloom/inc/compat-vars.php). */
.price, ._heading, .wp-block-pullquote blockquote, blockquote, label, legend {
	font-family: var(--wp--preset--font-family--anuphan);
}

/* Doctor-name chip over the photo in the "CTA Bottom" element (816/1457): a small pill in the photo's bottom-left
 * corner, in the same rounded style as the program pages' feature chips (assets/css/program.css .freesia-chips). */
.freesia-cta-photo { position: relative; }
.freesia-cta-photo img { display: block; }
.freesia-cta-photo__chip {
	position: absolute;
	left: 16px;
	bottom: 16px;
	max-width: calc(100% - 32px);
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(20, 38, 58, 0.18);
	font-family: var(--wp--preset--font-family--anuphan);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--theme-palette-3);
}
@media (max-width: 599px) {
	.freesia-cta-photo__chip { left: 12px; bottom: 12px; padding: 6px 12px; font-size: 12.5px; }
}

/* Unboxed entries sit on a white site background; boxed ones show the page background around the white box (Kadence). */
body.content-style-unboxed .wp-site-blocks { background: var(--global-palette9); }

/* ------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------- */
.site-header__right { gap: 10px; }
.site-header .bloom-nav.is-horizontal > ul > li > a { display: block; }
.site-header .bloom-nav.is-horizontal > ul > li.menu-item-has-children > a { position: relative; padding-right: calc(1.25em + 1em); }
.site-header .bloom-nav.is-horizontal > ul > li.menu-item-has-children > a::after {
	position: absolute; top: 50%; right: 1.25em;
	width: 0.9em; height: 0.9em; margin: 0; border: 0;
	transform: translateY(-50%);
	background: currentColor;
	-webkit-mask: var(--freesia-icon-arrow-down) center / contain no-repeat;
	mask: var(--freesia-icon-arrow-down) center / contain no-repeat;
}
/* Kadence did not highlight the parent of the current page (primary_navigation_parent_active off). */
.site-header .bloom-nav.is-horizontal > ul > li.current-menu-ancestor:not(.current-menu-item) > a { color: var(--bloom-nav-color); }
.site-header .bloom-nav.is-horizontal ul.sub-menu { z-index: 1000; }
.site-header .bloom-nav.is-horizontal ul.sub-menu > li:last-child { border-bottom: 0; }
.site-header .bloom-nav.is-horizontal ul.sub-menu li.current-menu-item > a { background: #c5c5c5; }
.bloom-nav .wpml-ls-item img { vertical-align: baseline; margin-right: 0; }

/* Mobile toggle with Kadence's menu icon */
.bloom-menu-toggle { border-radius: 3px; }
.bloom-menu-toggle svg { display: none; }
.bloom-menu-toggle::before {
	content: ""; display: block; width: 20px; height: 20px;
	background: currentColor;
	-webkit-mask: var(--freesia-icon-menu) center / contain no-repeat;
	mask: var(--freesia-icon-menu) center / contain no-repeat;
}

/* Drawer: Kadence close bars and sub-menu chevrons */
.bloom-drawer__close {
	position: relative; box-sizing: content-box; width: 1em; height: 1em;
	overflow: hidden; text-indent: -9999px; white-space: nowrap;
}
.bloom-drawer__close::before,
.bloom-drawer__close::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 0.75em; height: 0.08em; margin: -0.04em 0 0 -0.375em;
	background: currentColor; border-radius: 0.08em;
	transform: rotate(45deg);
}
.bloom-drawer__close::after { transform: rotate(-45deg); }
.bloom-drawer .bloom-mobile-menu li.menu-item-has-children > a { padding-right: 51px; }
.bloom-drawer .bloom-mobile-menu .submenu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 50px; padding: 0; }
.bloom-drawer .bloom-mobile-menu .submenu-toggle::after {
	/* Nudged up to the middle of the letters, as the header chevrons above. */
	position: relative; top: -0.16em;
	width: 18px; height: 18px; border: 0; transform: none;
	background: currentColor;
	-webkit-mask: var(--freesia-icon-arrow-down) center / contain no-repeat;
	mask: var(--freesia-icon-arrow-down) center / contain no-repeat;
}
.bloom-drawer .bloom-mobile-menu li.is-open > .submenu-toggle::after { transform: rotate(180deg); }
/* Kadence only set a white drawer for phones; tablets kept its dark default. */
@media (min-width: 768px) and (max-width: 1024px) { .bloom-drawer { background: rgba(9, 12, 16, 0.97); } }

/* Migrated full-width covers (home hero): their desktop side padding is replaced on phones by the post's own CSS, but the
   full-width group inside keeps the negative margins of the desktop padding and runs off both edges. */
@media (max-width: 767px) {
	.wp-block-cover.bloom-section > .wp-block-cover__inner-container > .alignfull { box-sizing: border-box; width: auto; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
	/* Migrated full-width rows and covers without side padding of their own put their text against the screen edges on
	   phones (the root padding they would inherit is 0 on this site): give them the site's content edge. Rows and covers
	   that set their own side padding keep it. */
	.bloom-entry .entry-content > .alignfull.is-layout-flow > .wp-block-columns:not([style*="padding"]) { box-sizing: border-box; padding-inline: var(--global-content-edge-padding, 1.5rem); }
	/* Only the cover's own headings, text and buttons: groups inside covers bring their own side padding. */
	.bloom-entry .entry-content > .wp-block-cover.bloom-section:not([style*="padding-left"]) > .wp-block-cover__inner-container > :is(h1, h2, h3, p, .wp-block-buttons) { box-sizing: border-box; padding-inline: var(--global-content-edge-padding, 1.5rem); }
}

/* Cookie banner (npbn-cookie-consent): no slide/fade animations for people who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
	:is(.npbn-cookie-banner, .npbn-cookie-modal, .npbn-cookie-banner *, .npbn-cookie-modal *) { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------
 * Title hero, post meta, breadcrumbs
 * ---------------------------------------------------------------- */
/* The one breadcrumb bar (18 Sept 2026). It is the first child of <main> on every template that has one — article,
   program and condition singles, plain pages, search results and 404 — so its size, colour, left edge and distance
   from the header are the same everywhere. The home page and the promotion landing pages have none. The trail wraps
   rather than truncating, and `font-size: inherit` is what stops bloom's own 85% from compounding. */
.freesia-crumbs { box-sizing: border-box; width: min(1242px, 100% - 2 * var(--global-content-edge-padding, 1.5rem)); margin: 0 auto; padding-block: 12px; font-size: 15px; line-height: 1.5; color: var(--global-palette5); }
.freesia-crumbs .bloom-breadcrumbs { margin: 0; font-size: inherit; }
.freesia-crumbs .bloom-breadcrumbs a { color: var(--global-palette1); text-decoration: none; }
.freesia-crumbs .bloom-breadcrumbs a:hover { text-decoration: underline; }
.freesia-crumbs .bloom-breadcrumbs a:focus-visible { outline: 3px solid #5093c9; outline-offset: 3px; }
.freesia-crumbs .bloom-breadcrumbs__sep { margin-inline: 2px; color: var(--global-gray-500); }
.freesia-crumbs .bloom-breadcrumbs__current { color: var(--global-palette4); }

/* ------------------------------------------------------------------
 * Single post: featured image behind the content, post navigation, related posts
 * ---------------------------------------------------------------- */
.bloom-content > .freesia-post-navigation {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	box-sizing: border-box; width: calc(100% - 2 * var(--global-content-edge-padding)); max-width: var(--wp--style--global--content-size);
	margin: var(--global-lg-spacing) auto;
}
.freesia-post-navigation > * { margin: 0; }
.freesia-post-navigation .post-navigation-link-previous { grid-column-start: 1; position: relative; }
.freesia-post-navigation .post-navigation-link-previous::after { content: ""; position: absolute; top: 25%; right: 0; width: 1px; height: 50%; background: var(--global-gray-500); }
.freesia-post-navigation .post-navigation-link-next { grid-column-start: 2; text-align: right; }
.freesia-post-navigation a { display: block; color: inherit; text-decoration: none; }
.freesia-post-navigation a:hover { color: var(--global-palette1); }
.freesia-post-navigation .post-navigation-link-previous a { padding-right: var(--global-xs-spacing); }
.freesia-post-navigation .post-navigation-link-next a { padding-left: var(--global-xs-spacing); }
.freesia-post-navigation .post-navigation-link__label { display: block; margin-bottom: 0.625em; font-size: 80%; line-height: 2; font-weight: bold; letter-spacing: 0.05em; text-transform: uppercase; }
.freesia-post-navigation .post-navigation-link__title { display: block; }
.freesia-post-navigation .post-navigation-link__label::before,
.freesia-post-navigation .post-navigation-link__label::after {
	display: inline-block; width: 1em; height: 1.037em; vertical-align: -0.15em;
	background: currentColor;
	-webkit-mask: var(--freesia-icon-arrow-right) center / contain no-repeat;
	mask: var(--freesia-icon-arrow-right) center / contain no-repeat;
}
.freesia-post-navigation .post-navigation-link-next .post-navigation-link__label::after { content: ""; margin-left: 0.5em; }
.freesia-post-navigation .post-navigation-link-previous .post-navigation-link__label::before { content: ""; margin-right: 0.5em; transform: scaleX(-1); }

.freesia-related:not(:has(.wp-block-bloom-post-grid)) { display: none; }
.bloom-content > .freesia-related { margin-top: var(--global-lg-spacing); background: var(--global-palette7); }
.freesia-related__inner { box-sizing: border-box; margin: 0 auto; padding: var(--global-xl-spacing) var(--global-sm-spacing); }
@media (min-width: 1025px) {
	.content-width-narrow .freesia-related__inner { max-width: calc(var(--wp--style--global--content-size) + 160px); padding-left: 0; padding-right: 0; }
}
@media (min-width: 1102px) { .content-width-narrow .freesia-related__inner { max-width: calc(var(--wp--style--global--content-size) + 260px); } }
.freesia-related__inner > * { margin-block-start: 0; }
.freesia-related .pg-heading { margin: 0 0 1.5rem; text-align: left; }
/* Splide core layout. bloom-core's vendored splide.min.css only contains Kadence's .kb-splide-scoped rules, so a
   bloom carousel gets no track/list/slide layout; remove this block once bloom-core ships Splide's own core CSS. */
.freesia-related .splide__track { position: relative; z-index: 0; overflow: hidden; }
.freesia-related .splide__list { display: flex; height: 100%; margin: 0 !important; padding: 0 !important; backface-visibility: hidden; }
.freesia-related .splide.is-initialized:not(.is-active) .splide__list { display: block; }
.freesia-related .splide__slide { position: relative; box-sizing: border-box; flex-shrink: 0; margin: 0; list-style-type: none !important; }
.freesia-related .splide__arrow { position: absolute; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; color: #fff; font-size: 1rem; cursor: pointer; transform: translateY(-50%); }
.freesia-related .splide__arrow svg { width: 1em; height: 1em; fill: currentColor; }
.freesia-related .splide__arrow--prev svg { transform: scaleX(-1); }
.freesia-related .splide__arrow:disabled { opacity: 0.1; cursor: not-allowed; }
.freesia-related .splide__pagination { position: absolute; left: 0; right: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0; pointer-events: none; }
.freesia-related .splide__pagination li { display: inline-block; margin: 0; line-height: 1; list-style-type: none; pointer-events: auto; }
.freesia-related .splide__pagination__page { display: inline-block; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.freesia-related .splide__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.freesia-related .wp-block-bloom-post-grid.pg-carousel { margin-bottom: 30px; }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .splide__track { padding: 0; }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .pg-card { border-radius: 4px; box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.05); }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .pg-body { padding: 2rem; }
@media (max-width: 767px) { .freesia-related .wp-block-bloom-post-grid.pg-carousel .pg-body { padding: 1.5rem; } }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .pg-title { order: 1; margin: 0; font-size: 20px; line-height: 1.5; color: var(--global-palette3); }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .pg-title a:hover { color: var(--global-palette1); }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .pg-meta { order: 2; gap: 0; margin: 1em 0; font-size: 80%; line-height: 1.6; color: inherit; }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .pg-meta > *::after {
	content: ""; display: inline-block; width: 0.25rem; height: 0.25rem; margin: 0 0.5rem;
	background-color: currentColor; border-radius: 9999px; opacity: 0.8; vertical-align: 0.1875em;
}
.freesia-related .wp-block-bloom-post-grid.pg-carousel .pg-meta > *:last-child::after { display: none; }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .splide__arrow { width: 2em; height: 3em; border-radius: 3px; background: rgba(0, 0, 0, 0.8); opacity: 0.85; }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .splide__arrow--prev { left: 1rem; }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .splide__arrow--next { right: 1rem; }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .splide__pagination { bottom: -25px; padding: 0 1em; }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .splide__pagination__page { width: 10px; height: 10px; margin: 3px; background: #000; opacity: 0.25; }
.freesia-related .wp-block-bloom-post-grid.pg-carousel .splide__pagination__page.is-active { background: #000; opacity: 0.75; transform: none; }

/* ------------------------------------------------------------------
 * Footer: middle row (logo + footer menu), bottom row (copyright, licence, privacy link)
 * ---------------------------------------------------------------- */
.site-footer__middle { border-bottom: 1px solid rgba(26, 32, 44, 0.07); }
.site-footer .site-footer__row > .freesia-footer-middle,
.site-footer .site-footer__row > .freesia-footer-bottom { box-sizing: border-box; max-width: var(--global-calc-content-width); margin-left: auto; margin-right: auto; }
.freesia-footer-middle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; padding: 20px 0; }
.freesia-footer-bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; padding: 20px 0; }
@media (max-width: 1024px) {
	.freesia-footer-middle,
	.freesia-footer-bottom { grid-template-columns: minmax(0, 1fr); }
}
.freesia-footer-middle > *,
.freesia-footer-bottom > * { min-width: 0; margin: 0; }
.site-footer .freesia-footer-middle > .footer-logo { display: flex; justify-self: start; margin: 0.5em 0; }
.site-footer .freesia-footer-middle > .bloom-nav { align-self: center; }
.site-footer .bloom-nav.is-horizontal > ul { flex-wrap: wrap; justify-content: flex-end; }
.site-footer .bloom-nav.is-horizontal > ul > li > a { display: block; padding: 0.3em 0.6em; color: var(--global-palette5); }
.site-footer .bloom-nav.is-horizontal > ul > li > a:hover { color: var(--global-palette1); }
.site-footer .bloom-nav.is-horizontal > ul > li.current-menu-item > a { color: var(--global-palette3); }
.site-footer .bloom-nav.is-horizontal > ul > li.current-menu-ancestor > a { color: var(--global-palette5); }
.site-footer .bloom-nav li.menu-item-has-children > a::after,
.site-footer .bloom-nav .sub-menu { display: none; }
.site-footer .freesia-footer-bottom p { margin: 1em 0; padding: 0; font-size: inherit; }
.site-footer .freesia-footer-bottom .bloom-copyright { text-align: left; }
.site-footer .freesia-footer-bottom .freesia-licence { text-align: center; }
.site-footer .freesia-footer-bottom .freesia-privacy { text-align: right; }
.site-footer .freesia-privacy a { color: var(--global-palette3); text-decoration: none; }
@media (max-width: 767px) { .site-footer .freesia-footer-bottom .bloom-copyright { text-align: center; } }

/* 404: Kadence's boxed "Oops! That page can't be found." card (templates/404.html, patterns/404.php). */
.freesia-404.bloom-entry { background: var(--global-palette9); border-radius: 0.25rem; box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.05); padding: 2rem; }
.freesia-404 .page-title { margin: 0 0 2.6rem; }
.freesia-404 p { margin: 0 0 1em; }
.freesia-404-search .wp-block-search__inside-wrapper { position: relative; padding: 0; border: 1px solid var(--global-gray-400, #cbd5e0); border-radius: 3px; background: var(--global-palette9); }
.freesia-404-search .wp-block-search__input { border: 0; padding: 0.4em 2.75em 0.4em 0.5em; font: inherit; background: transparent; }

/* The footer-at-the-bottom behaviour on short pages is the parent's (bloom_sticky_footer) since 16 Sept 2026. */

/* Content spacing of Kadence's .single-content (kadence/assets/css/content.min.css): bottom margins instead of the
 * block gap, 1.5em/0.5em around headings. Inline margins written by the migrator (block attributes) still win. */
.single-post .entry-content { margin-top: 0; }
.entry-content :is(p, address, table, pre, form, blockquote, hr, figure.wp-block-image, .wp-block-table, .wp-block-quote) { margin-block: 0 var(--global-md-spacing); }
/* Content lists only (core/list blocks and plain lists): query loops, carousels and icon lists are lists too. */
.entry-content :is(ul, ol):is(.wp-block-list, :not([class])) { margin-block: 0 var(--global-md-spacing); padding-left: 2em; }
.entry-content li > :is(ul, ol) { margin: 0; }
.entry-content :is(h1, h2, h3, h4, h5, h6) { margin-block: 1.5em 0.5em; }
.entry-content :is(h1, h2, h3, h4, h5, h6):first-child,
.entry-content :is(h1, h2, h3, h4, h5, h6) + * { margin-block-start: 0; }
.entry-content :is(p, address, table, pre, form, blockquote, hr, figure.wp-block-image, .wp-block-table, .wp-block-quote, h1, h2, h3, h4, h5, h6):last-child,
.entry-content :is(ul, ol):is(.wp-block-list, :not([class])):last-child { margin-block-end: 0; }

/* Kadence Blocks keeps its spacing presets on tablets and phones; the bloom parent scales the large ones down (protea's
 * look). Restore the full values here — `html body` outranks the parent's `body` rules. */
@media (max-width: 1024px) {
	html body { --wp--preset--spacing--kb-xl: 4rem; --wp--preset--spacing--kb-xxl: 5rem; --wp--preset--spacing--kb-xxxl: 6.5rem; --wp--preset--spacing--kb-xxxxl: 8rem; --wp--preset--spacing--kb-xxxxxl: 10rem; }
}
@media (max-width: 767px) {
	html body { --wp--preset--spacing--kb-lg: 3rem; }
}
.freesia-404-search .wp-block-search__button { position: absolute; top: 0; right: 0; bottom: 0; margin: 0; padding: 0 0.75em; border: 0; background: transparent; color: var(--global-palette6); }
.freesia-404-search .wp-block-search__button svg { width: 1.1em; height: 1.1em; fill: currentColor; }
@media (max-width: 767px) { .freesia-404.bloom-entry { padding: 1.5rem; } }