/*
 Theme Name:   Azuri Group
 Theme URI:    https://azurigroup.com.au
 Description:  GeneratePress child theme
 Author:       Azuri Group
 Author URI:   https://azurigroup.com.au
 Template:     generatepress
 Version:      0.1
*/

/* ==========================================================================
   Design tokens (CSS custom properties)
   --------------------------------------------------------------------------
   All colour, spacing, type and radius values used by the child theme are
   declared here once and consumed via var(--token).
   ========================================================================== */

@font-face {
    font-family: 'DM Sans 9pt';
    src: url('https://mermaidcentralmedicalclinic.com.au/wp-content/themes/generatepress_child/assets/fonts/DMSans-9ptRegular.woff2') format('woff2'),
        url('https://mermaidcentralmedicalclinic.com.au/wp-content/themes/generatepress_child/assets/fonts/DMSans-9ptRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body,
h1, h2, h3, h4, h5, h6{
	font-family: 'DM Sans 9pt' !important;
}

:root {
	/* Brand palette */
	--azuri-color-navy:        #0a1633;
	--azuri-color-navy-700:    #0e1a3d;
	--azuri-color-teal:        #2aadb5;
	--azuri-color-teal-700:    #1f8d94;
	--azuri-color-pink:        #d4789a;
	--azuri-color-pink-700:    #b85d80;
	--azuri-color-green:       #4a9e72;
	--azuri-color-green-700:   #3a7d5a;
	--azuri-color-ink:         #2e404f;
	--azuri-color-white:       #ffffff;

	/* Glass surface (main header) */
	--azuri-color-glass-bg:     rgba(255, 255, 255, 1);
	--azuri-color-glass-border: rgba(42, 139, 139, 0.1);

	/* Text on dark surfaces */
	--azuri-color-text-on-dark:        rgba(255, 255, 255, 0.5);
	--azuri-color-text-on-dark-strong: rgba(255, 255, 255, 0.85);
	--azuri-color-divider-on-dark:     rgba(255, 255, 255, 0.2);

	/* Typography */
	--azuri-font-family-base: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--azuri-font-size-xs:        12px;
	--azuri-font-size-sm:        12.5px;
	--azuri-font-size-md:        13.5px;
	--azuri-font-size-lg:        22px;
	--azuri-font-weight-regular: 400;
	--azuri-font-weight-medium:  500;
	--azuri-font-weight-semibold: 600;
	--azuri-line-height-xs:      1.5;
	--azuri-line-height-sm:      1.43;
	--azuri-letter-spacing-xs:   0;

	/* Spacing scale (4px base) */
	--azuri-space-1:  4px;
	--azuri-space-2:  8px;
	--azuri-space-3:  12px;
	--azuri-space-4:  16px;
	--azuri-space-5:  20px;
	--azuri-space-6:  24px;
	--azuri-space-8:  32px;
	--azuri-space-10: 40px;

	/* Radii */
	--azuri-radius-sm: 2px;
	--azuri-radius-md: 4px;
	--azuri-radius-pill: 999px;

	/* Layout */
	--azuri-container-max:     1300px;
	--azuri-header-top-height: 35px;
	--azuri-header-height:     71px;
	--azuri-header-inline-pad: 68px;
}

/* ==========================================================================
   Azuri Grid System
   --------------------------------------------------------------------------
   The canonical layout primitives for every section. Replaces ad-hoc
   flex / grid wrappers in section CSS.

       <section>
         <div class="azuri-container">
           <div class="equal-height">
             <div class="azuri_col azuri_col_6 azuri_xs_col_12">
               <div class="azuri_inner">
                 content
               </div>
             </div>
             ...
           </div>
         </div>
       </section>
   ========================================================================== */

:root {
	--azuri-grid-gutter: 24px;
}

.azuri-container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: 1100px;
	padding-left: var(--azuri-space-6);
	padding-right: var(--azuri-space-6);
	width: 100%;
}

.equal-height {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--azuri-grid-gutter) * -0.5);
	margin-right: calc(var(--azuri-grid-gutter) * -0.5);
	width: auto;
}

.azuri_col {
	box-sizing: border-box;
	flex: 0 0 auto;
	padding-left: calc(var(--azuri-grid-gutter) * 0.5);
	padding-right: calc(var(--azuri-grid-gutter) * 0.5);
	width: 100%;
}

.azuri_inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

/* Desktop column widths --------------------------------------------- */

.azuri_col_1  { width:  8.33333%; }
.azuri_col_2  { width: 16.66667%; }
.azuri_col_3  { width: 25%;       }
.azuri_col_4  { width: 33.33333%; }
.azuri_col_5  { width: 41.66667%; }
.azuri_col_6  { width: 50%;       }
.azuri_col_7  { width: 58.33333%; }
.azuri_col_8  { width: 66.66667%; }
.azuri_col_9  { width: 75%;       }
.azuri_col_10 { width: 83.33333%; }
.azuri_col_11 { width: 91.66667%; }
.azuri_col_12 { width: 100%;      }

/* Mobile column widths (≤ 768px) ----------------------------------- */

@media (max-width: 768px) {
	.azuri_xs_col_1  { width:  8.33333% !important; }
	.azuri_xs_col_2  { width: 16.66667% !important; }
	.azuri_xs_col_3  { width: 25%       !important; }
	.azuri_xs_col_4  { width: 33.33333% !important; }
	.azuri_xs_col_5  { width: 41.66667% !important; }
	.azuri_xs_col_6  { width: 50%       !important; }
	.azuri_xs_col_7  { width: 58.33333% !important; }
	.azuri_xs_col_8  { width: 66.66667% !important; }
	.azuri_xs_col_9  { width: 75%       !important; }
	.azuri_xs_col_10 { width: 83.33333% !important; }
	.azuri_xs_col_11 { width: 91.66667% !important; }
	.azuri_xs_col_12 { width: 100% ; }
}

/* ==========================================================================
   Utility: azuri-icon
   --------------------------------------------------------------------------
   Generic wrapper for icons referenced from /assets/svg/sprite.svg.
   Size is set via the --azuri-icon-size custom property, colour via
   currentColor so callers can simply set `color:` on the parent.
   ========================================================================== */

.azuri-icon {
	color: currentColor;
	display: inline-block;
	fill: currentColor;
	flex-shrink: 0;
	height: var(--azuri-icon-size, 1em);
	line-height: 0;
	vertical-align: middle;
	width: var(--azuri-icon-size, 1em);
}

/* ==========================================================================
   Block: azuri-header-top
   --------------------------------------------------------------------------
   Announcement bar that sits above the main GeneratePress header. Driven by
   the "Theme Settings → Header Top" ACF options page.
   ========================================================================== */

.azuri-header-top {
	background-color: var(--azuri-color-navy);
	color: var(--azuri-color-text-on-dark);
	font-family: var(--azuri-font-family-base);
	font-size: var(--azuri-font-size-xs);
	font-weight: var(--azuri-font-weight-regular);
	line-height: var(--azuri-line-height-xs);
	min-height: var(--azuri-header-top-height);
	width: 100%;
}

.azuri-header-top__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--azuri-space-3) var(--azuri-space-5);
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--azuri-container-max);
	min-height: var(--azuri-header-top-height);
	padding: 0 var(--azuri-space-5);
}

/* --- Search ----------------------------------------------------------- */

.azuri-header-top__search {
	align-items: center;
	display: flex;
	flex: 0 1 auto;
	gap: var(--azuri-space-2);
	margin: 0;
	min-width: 0;
	padding: 0;
}

/*
 * Search input chrome reset. !important is used to beat the user-agent
 * stylesheet — browsers paint search inputs with a light background,
 * rounded corners and (in WebKit) a clear button. None of that matches
 * the Figma which renders the input as transparent text on the navy bar.
 */
.azuri-header-top__search-input,
.azuri-header-top__search-input:focus,
.azuri-header-top__search-input:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--azuri-color-text-on-dark) !important;
	font: inherit;
	height: var(--azuri-header-top-height);
	letter-spacing: var(--azuri-letter-spacing-xs);
	line-height: var(--azuri-line-height-xs);
	margin: 0;
	min-width: 200px;
	outline: 0 !important;
	padding: 0;
	width: 240px;
}

/* Kill WebKit's search input decoration. */
.azuri-header-top__search-input::-webkit-search-cancel-button,
.azuri-header-top__search-input::-webkit-search-decoration,
.azuri-header-top__search-input::-webkit-search-results-button,
.azuri-header-top__search-input::-webkit-search-results-decoration {
	-webkit-appearance: none;
	display: none;
}

/* Prevent autofill from painting a yellow/white background. */
.azuri-header-top__search-input:-webkit-autofill,
.azuri-header-top__search-input:-webkit-autofill:hover,
.azuri-header-top__search-input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--azuri-color-navy) inset !important;
	-webkit-text-fill-color: var(--azuri-color-text-on-dark) !important;
	transition: background-color 9999s ease-in-out 0s;
}

.azuri-header-top__search-input::placeholder {
	color: var(--azuri-color-text-on-dark);
	opacity: 1;
}

.azuri-header-top__search-input:focus-visible {
	box-shadow: 0 1px 0 0 var(--azuri-color-teal) !important;
}

.azuri-header-top__search-submit {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--azuri-radius-sm);
	color: var(--azuri-color-teal);
	cursor: pointer;
	display: inline-flex;
	height: var(--azuri-space-6);
	justify-content: center;
	padding: 0;
	width: var(--azuri-space-6);
}

.azuri-header-top__search-submit:hover,
.azuri-header-top__search-submit:focus-visible {
	color: var(--azuri-color-white);
}

.azuri-header-top__search-submit:focus-visible {
	outline: 2px solid var(--azuri-color-teal);
	outline-offset: 2px;
}

.azuri-header-top__search-icon {
	--azuri-icon-size: 12px;
	color: currentColor;
	display: block;
}

/* --- Notices + CTA list ----------------------------------------------- */

.azuri-header-top__list {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 0;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
}

.azuri-header-top__item {
	align-items: center;
	display: inline-flex;
	margin: 0;
	padding: 0 var(--azuri-space-5);
	position: relative;
}

.azuri-header-top__item + .azuri-header-top__item::before {
	background-color: var(--azuri-color-divider-on-dark);
	content: "";
	display: block;
	height: 18px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
}

.azuri-header-top__item:last-child {
	padding-right: 0;
}

.azuri-header-top__notice {
	color: var(--azuri-color-text-on-dark);
}

.azuri-header-top__item--cta {
	padding-left: var(--azuri-space-5);
}

/* --- CTA -------------------------------------------------------------- */

.azuri-header-top__cta {
	align-items: center;
	color: var(--azuri-color-teal);
	display: inline-flex;
	font-weight: var(--azuri-font-weight-medium);
	gap: var(--azuri-space-1);
	text-decoration: none;
	transition: color 0.15s ease;
}

.azuri-header-top__cta:hover,
.azuri-header-top__cta:focus-visible {
	color: var(--azuri-color-white);
}

.azuri-header-top__cta:focus-visible {
	outline: 2px solid var(--azuri-color-pink);
	outline-offset: 3px;
}

.azuri-header-top__cta--static {
	cursor: default;
}

.azuri-header-top__cta-arrow {
	--azuri-icon-size: 14px;
	display: inline-block;
	margin-left: var(--azuri-space-1);
	transition: transform 0.15s ease;
}

.azuri-header-top__cta:hover .azuri-header-top__cta-arrow,
.azuri-header-top__cta:focus-visible .azuri-header-top__cta-arrow {
	transform: translateX(2px);
}

/* --- Screen-reader helper (in case parent theme doesn't define it) ---- */

.azuri-header-top .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
	.azuri-header-top__inner {
		gap: var(--azuri-space-2) var(--azuri-space-4);
	}

	.azuri-header-top__item {
		padding: 0 var(--azuri-space-3);
	}
}

@media (max-width: 768px) {
	.azuri-header-top {
		font-size: 11px;
	}

	.azuri-header-top__inner {
		justify-content: flex-start;
		padding: var(--azuri-space-2) var(--azuri-space-4);
	}

	.azuri-header-top__search {
		width: 100%;
	}

	.azuri-header-top__search-input {
		flex: 1 1 auto;
		min-width: 0;
	}

	.azuri-header-top__list {
		justify-content: flex-start;
	}

	.azuri-header-top__item {
		padding: 0 var(--azuri-space-3) 0 0;
	}

	.azuri-header-top__item + .azuri-header-top__item::before {
		display: none;
	}
}

/* ==========================================================================
   Main header surface (extends GeneratePress' .site-header)
   --------------------------------------------------------------------------
   The GP container is decorated with a translucent glass surface and a
   subtle teal-tinted bottom divider, matching the Figma main header.
   ========================================================================== */

.site-header {
	/*-webkit-backdrop-filter: blur(3.4px);
	backdrop-filter: blur(3.4px);*/
	background-color: var(--azuri-color-glass-bg);
	border-bottom: 0.86px solid var(--azuri-color-glass-border);
}

/* --------------------------------------------------------------------------
   Flex layout: logo (left) | primary menu (centred) | actions (right)
   The .inside-header class is GeneratePress' wrapper, kept for compatibility.
   -------------------------------------------------------------------------- */

.azuri-header__inner,
.site-header .inside-header.azuri-header__inner {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--azuri-space-6);
	margin: 0 auto;
	max-width: var(--azuri-container-max);
	min-height: var(--azuri-header-height);
	padding: 0 var(--azuri-header-inline-pad);
	width: 100%;
}

/* Logo --------------------------------------------------------------- */

.azuri-header__logo {
	flex: 0 0 auto;
}

.azuri-header__logo .custom-logo-link,
.azuri-header__logo .azuri-logo-link,
.site-logo .custom-logo-link,
.azuri-logo-link {
	align-items: center;
	display: flex;
	text-decoration: none;
}

.custom-logo,
.azuri-logo {
	display: block;
	height: auto;
	max-height: var(--azuri-header-height);
	width: auto;
}

/* Navigation (centred) ----------------------------------------------- */

.azuri-header__nav {
	background: transparent;
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}

.azuri-header__menu {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--azuri-space-6);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.azuri-header__menu li {
	display: inline-flex;
}

.azuri-header__menu a {
	color: var(--azuri-color-ink);
	font-family: var(--azuri-font-family-base);
	font-size: var(--azuri-font-size-md);
	font-weight: var(--azuri-font-weight-regular);
	letter-spacing: var(--azuri-letter-spacing-xs);
	line-height: var(--azuri-line-height-sm);
	padding: var(--azuri-space-1) 0;
	text-decoration: none;
	transition: color 0.15s ease;
}

.azuri-header__menu a:hover,
.azuri-header__menu a:focus-visible,
.azuri-header__menu .current-menu-item > a,
.azuri-header__menu .current_page_item > a {
	color: var(--azuri-color-teal);
}

.azuri-header__menu a:focus-visible {
	outline: 2px solid var(--azuri-color-teal);
	outline-offset: 4px;
	border-radius: var(--azuri-radius-sm);
}

/* Actions cluster (right) -------------------------------------------- */

.azuri-header__actions {
	flex: 0 0 auto;
	margin-left: auto;
}

/* Mobile menu toggle (hidden on desktop) ----------------------------- */

.azuri-header__menu-toggle {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: var(--azuri-space-2);
}

.azuri-header__menu-toggle-bar {
	background-color: var(--azuri-color-ink);
	border-radius: var(--azuri-radius-sm);
	display: block;
	height: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
	width: 24px;
}

/* ==========================================================================
   Block: azuri-header-actions
   --------------------------------------------------------------------------
   Right-aligned cluster inside <nav class="main-navigation"> — holds the
   phone link and the two booking buttons (Medical / Cosmetic).
   ========================================================================== */

.azuri-header-actions {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--azuri-space-4);
	margin-left: auto;
	padding: 0;
}

/* Phone link -------------------------------------------------------- */

.azuri-phone-link {
	align-items: center;
	color: var(--azuri-color-ink);
	display: inline-flex;
	font-family: var(--azuri-font-family-base);
	font-size: var(--azuri-font-size-md);
	font-weight: var(--azuri-font-weight-semibold);
	gap: var(--azuri-space-2);
	line-height: var(--azuri-line-height-sm);
	text-decoration: none;
	transition: color 0.15s ease;
}

.azuri-phone-link:hover,
.azuri-phone-link:focus-visible {
	color: var(--azuri-color-teal);
}

.azuri-phone-link:focus-visible {
	outline: 2px solid var(--azuri-color-teal);
	outline-offset: 4px;
	border-radius: var(--azuri-radius-sm);
}

.azuri-phone-link__icon {
	--azuri-icon-size: 12px;
	color: var(--azuri-color-teal);
}

.azuri-phone-link__number {
	white-space: nowrap;
}

/* ==========================================================================
   Block: azuri-btn — pill-shaped booking buttons
   ========================================================================== */

.azuri-btn {
	align-items: center;
	background-color: var(--azuri-btn-bg, var(--azuri-color-teal));
	border: 0;
	border-radius: var(--azuri-radius-pill);
	color: var(--azuri-color-white);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--azuri-font-family-base);
	font-size: var(--azuri-font-size-sm);
	font-weight: var(--azuri-font-weight-medium);
	gap: var(--azuri-space-2);
	justify-content: center;
	line-height: 1.54;
	padding: 12.036px 25.791px;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}

.azuri-btn:hover,
.azuri-btn:focus-visible {
	background-color: var(--azuri-btn-bg-hover, var(--azuri-color-teal-700));
	color: var(--azuri-color-white);
}

.azuri-btn:focus-visible {
	outline: 2px solid var(--azuri-btn-bg-hover, var(--azuri-color-teal-700));
	outline-offset: 3px;
}

.azuri-btn:active {
	transform: translateY(1px);
}

.azuri-btn__icon {
	--azuri-icon-size: 14px;
	transition: transform 0.15s ease;
}

.azuri-btn:hover .azuri-btn__icon,
.azuri-btn:focus-visible .azuri-btn__icon {
	transform: translateX(2px);
}

/* Variants ----------------------------------------------------------- */

.azuri-btn--medical {
	--azuri-btn-bg:       var(--azuri-color-teal);
	--azuri-btn-bg-hover: var(--azuri-color-teal-700);
}

.azuri-btn--cosmetic {
	--azuri-btn-bg:       var(--azuri-color-pink);
	--azuri-btn-bg-hover: var(--azuri-color-pink-700);
}

/* ==========================================================================
   Main header — responsive
   ========================================================================== */

@media (max-width: 1200px) {
	.azuri-header__inner,
	.site-header .inside-header.azuri-header__inner {
		padding: 0 var(--azuri-space-6);
	}

	.azuri-header__menu {
		gap: var(--azuri-space-4);
	}

	.azuri-header-actions {
		gap: var(--azuri-space-3);
	}
}

@media (max-width: 1024px) {
	.azuri-header-actions {
		padding: 0;
	}

	.azuri-phone-link__number {
		display: none;
	}

	.azuri-phone-link {
		padding: var(--azuri-space-1);
	}

	.azuri-phone-link__icon {
		--azuri-icon-size: 16px;
	}
}

/* ==========================================================================
   Homepage / full-bleed templates: strip GP's container constraints
   --------------------------------------------------------------------------
   GP wraps everything in a .grid-container with max-width set in
   Customizer (typically 1200px). On templates that need edge-to-edge
   sections we replace that wrapper class with .azuri-full-bleed and also
   nuke padding/margins on every layer between #page and the section.
   ========================================================================== */

#page.azuri-full-bleed,
body.azuri-template-homepage #page {
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	width: 100% !important;
}

body.azuri-template-homepage #content,
body.azuri-template-homepage .site-content,
body.azuri-template-homepage .azuri-home__main,
body.azuri-template-homepage main#primary {
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	width: 100% !important;
}

/* Reset any inherited content-area/inside-article padding GP injects. */
body.azuri-template-homepage .content-area,
body.azuri-template-homepage .entry-content,
body.azuri-template-homepage .inside-article {
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
}

/*
 * GP's responsive grid system applies `width` via the .grid-* classes
 * (grid-25, grid-50, grid-70, grid-100, mobile-grid-100 etc.). On the
 * homepage template we override every column width to 100% and unfloat
 * so the hero (and future sections) truly fill the viewport.
 */
body.azuri-template-homepage .content-area,
body.azuri-template-homepage .grid-25,
body.azuri-template-homepage .grid-50,
body.azuri-template-homepage .grid-66,
body.azuri-template-homepage .grid-70,
body.azuri-template-homepage .grid-75,
body.azuri-template-homepage .grid-100,
body.azuri-template-homepage [class*="grid-"] {
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

/* Hide GP's right sidebar if it slipped through the template selection. */
body.azuri-template-homepage .widget-area,
body.azuri-template-homepage .sidebar,
body.page-template-template-homepage .widget-area,
body.page-template-template-homepage .sidebar,
body.azuri-template-homepage #right-sidebar,
body.azuri-template-homepage #left-sidebar,
body.page-template-template-homepage #right-sidebar,
body.page-template-template-homepage #left-sidebar {
	display: none !important;
}

/*
 * Belt-and-braces: also target WordPress' auto-generated body class
 * `page-template-template-homepage` so the layout works even if our
 * own `azuri-template-homepage` body_class filter doesn't fire.
 */
body.page-template-template-homepage #page {
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	width: 100% !important;
}

body.page-template-template-homepage #content,
body.page-template-template-homepage .site-content,
body.page-template-template-homepage main#primary,
body.page-template-template-homepage .content-area,
body.page-template-template-homepage .entry-content,
body.page-template-template-homepage .inside-article,
body.page-template-template-homepage [class*="grid-"] {
	float: none !important;
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	width: 100% !important;
}

/* ==========================================================================
   Booking buttons cluster (re-used in hero, contact, footer, etc.)
   ========================================================================== */

.azuri-booking-buttons {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--azuri-space-3);
	justify-content: center;
}

/* Hero styles live in /assets/css/sections/_hero.scss (loaded only on
   pages using the Homepage template). */
.page-header, .sidebar .widget, .site-main>* {
    margin-bottom: 0;
}
@media (max-width: 900px) {
	.azuri-header__inner,
	.site-header .inside-header.azuri-header__inner {
		gap: var(--azuri-space-3);
		min-height: 64px;
		padding: var(--azuri-space-3) var(--azuri-space-4);
	}

	.azuri-header__menu-toggle {
		display: inline-flex;
		order: 3;
	}

	.azuri-header__nav {
		flex: 0 0 auto;
		justify-content: flex-end;
	}

	.azuri-header__menu {
		display: none;
	}

	.azuri-header__nav.is-open .azuri-header__menu {
		background-color: var(--azuri-color-glass-bg);
		border-bottom: 0.86px solid var(--azuri-color-glass-border);
		display: flex;
		flex-direction: column;
		gap: var(--azuri-space-3);
		left: 0;
		padding: var(--azuri-space-4) var(--azuri-space-5);
		position: absolute;
		right: 0;
		top: 100%;
		width: 100%;
	}

	.azuri-header-actions {
		gap: var(--azuri-space-2);
	}

	.azuri-btn {
		font-size: 12px;
		padding: 8px 14px;
	}
}

/* ==========================================================================
   Custom  Css
   ========================================================================== */
.azuri-header-top .azuri-header-top__inner,
.site-header .inside-header.azuri-header__inner {
    max-width: 1472px !important;
	padding-left: 24px !important;
    padding-right: 24px !important;
}
.site-header .inside-header.azuri-header__inner {
    column-gap: 30px;
}
footer.site-info {
    background-color: #090B28;
    color: #fff;
}

/* ==========================================================================
   Sticky Sidebar
   --------------------------------------------------------------------------
   Makes the right sidebar stick to the viewport on scroll.
   GeneratePress lays out content + sidebar as a flex row; `align-self:
   flex-start` lets the sidebar column shrink-wrap its content height so
   `position: sticky` actually works (a stretched flex child fills its row
   and never has room to scroll).
   ========================================================================== */

/* Sidebar column — shrink to content height so sticky fires */
#right-sidebar {
	align-self: flex-start;
	position: sticky;
	top: var(--azuri-space-6); /* 24px gap below viewport top */
}

/* Push down when the WP admin bar is present (adds 32px) */
body.admin-bar #right-sidebar {
	top: calc(32px + var(--azuri-space-6));
}

/* Disable sticky on mobile — sidebar stacks below content, no need */
@media (max-width: 768px) {
	#right-sidebar {
		position: static;
		top: auto;
	}
}

/* --------------------------------------------------------------------------
   Sidebar widget stacking — 24px gap between every card (matches Figma)
   Remove GeneratePress default widget bottom-margin so gap is the sole
   source of spacing between widgets.
   -------------------------------------------------------------------------- */
.inside-right-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.inside-right-sidebar .widget {
	margin: 0 !important;
}
.site-header {
    z-index: 1;
}
/*.azuri-header__actions {
    width: 30%;
    text-align: right;
}
.azuri-header__logo.site-logo {
    width: 30%;
}*/
.azuri-header__inner .custom-logo, 
.azuri-header__inner .azuri-logo {
    display: flex;
    height: 67px;
    width: 203px;
    max-height: 97px;
}
.azuri-header__inner .azuri-header__menu li a {
    line-height: 88px;
}
.main-navigation ul ul {
    background-color: #fdfdfd;
    padding: 10px;
    border: 0;
    box-shadow: none;
    top: inherit;
    margin-top: 90px;
}
.main-navigation ul ul li a {
    line-height: 20px !important;
}
.azuri-hero__inner .azuri-hero__text {
    width: 480px;
    margin: 0 auto;
}
.copyright-bar {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.copyright-bar .copyright-bar {
    border-top: 1px solid rgba(42, 173, 181, 0.07);
    padding-bottom: 20px;
    padding-top: 20px;  '
	font-size: 13px;   
	padding-left: 24px;
    padding-right: 24px;
}
.copyright-bar p, 
.copyright-bar a {
    margin: 0;
    color: rgba(255, 255, 255, 0.30);
    text-decoration: none;
}
.copyright-bar a:hover {
    color: #fff;
}
.inside-site-info.grid-container {
    padding-left: 0;
    padding-right: 0;
}
.copyright-bar p.right_info {
    display: flex;
    column-gap: 13px;
}
p.azuri-footer__contact-address br {
    display: none;
}

.azuri-procedures__accordion-item .azuri-procedures__item-trigger {
    background-color: #fff !important;
}
@media (max-width: 768px) {
	.azuri-proc-page-body__sidebar-col .azuri-ask-team-widget,
	.azuri-proc-page-body__sidebar-col .azuri-quick-links-widget{
		display: none;
	}
}
/* ==========================================================================
   <picture> wrapper layout fix
   --------------------------------------------------------------------------
   azuri_picture_tag() wraps every <img> in a <picture> element.
   By default <picture> is display:inline, which breaks absolutely-positioned
   images and percentage-sized fill images. display:contents removes the
   <picture> box from the layout tree so the <img> behaves exactly as if the
   <picture> wrapper were not there — all existing class-based CSS rules
   targeting the <img> continue to work without any changes.
   Supported in all modern browsers (Chrome 65+, Firefox 61+, Safari 11.1+).
   ========================================================================== */
.azuri-hero picture,
.azuri-services__card-media picture,
.azuri-cosmetics__card picture,
.azuri-why__media picture,
.azuri-why__image-mobile picture,
.azuri-mission__logo picture,
.azuri-doctor-card__photo-wrap picture {
	display: contents;
}

/* =============================================================================
   Service Badge — Figma node 328:66
   ============================================================================= */

.azuri-services__col.cosmetic a.azuri-services__card-link:after {
    background: #D4789A;
}
/* Base badge pill */
.azuri-services__card-badge {
    display: inline-flex;
    align-items: center;
    padding: 9.845px 9.482px !important;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 8px;
    height: auto;
    font-weight: 500;
    letter-spacing: 2px;
    width: 100px;
    text-align: center;
    justify-content: center;
}

/* Medical badge — teal */
.azuri-services__card-badge--medical {
	background: rgba(42, 173, 181, 0.22);
	border: 0.95px solid rgba(42, 173, 181, 0.35);
	color: #a0eef2;
}

/* Cosmetic badge — rose/pink */
.azuri-services__card-badge--cosmetic {
	background: rgba(212, 120, 154, 0.22);
	border: 0.95px solid rgba(212, 120, 154, 0.35);
	color: #f4b8cf;
}
aside.azuri_col.azuri_col_4 {
    width: 320px;
    margin-left: auto;
}
.mobile_only{
	display: none !important;
}
@media only screen and ( min-width:240px) and (max-width:1023px) {
	.mobile_only{
		display: block !important;
	}
	.desktop_only{
		display: none !important;
	}
	aside.azuri_col.azuri_col_4 {
		width: 100%;
	}
	ul.ul_li {
		column-count: 1;
	}
}
ul.ul_li {
    column-count: 2;
    list-style: none;
    padding-left: 0;
    background-color: #f5f9fa;
    padding: 20px;
}
ul.ul_li li {
    position: relative;
    padding-left: 20px;
    display: flex;
    margin-bottom: 10px;
    justify-content: flex-start;
    column-gap: 13px;
}
ul.ul_li li:after {
    content: "";
    width: 5px;
    height: 5px;
    background-color: #2aadb5;
    position: absolute;
    left: 0;
    top: 13px;
    border-radius: 10px;
}
ul.ul_li li strong {
    font-weight: 600;
}