/*
Theme Name: Medilove Astra Child
Theme URI: https://medilovekeponggi.com/
Description: Astra child theme for Klinik Medilove Keponggi (仁爱医务所). Makes the WordPress "Health Diary" blog visually continuous with the static Medilove homepage — matching brand colours, Raleway/Work Sans typography, header, footer, and card styling. Self-contained; no plugin dependencies.
Author: Klinik Medilove Keponggi
Author URI: https://medilovekeponggi.com/
Template: astra
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: medilove-astra-child
Tags: medical, clinic, blog, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =====================================================================
   MEDILOVE — Design Tokens (mirrors the static homepage style.css)
   Palette: Brand Blue + Brand Red. Fonts: Raleway (headings), Work Sans (body).
   ===================================================================== */
:root {
  /* Type scale (fluid, matches static site) */
  --ml-text-xs:   clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  --ml-text-sm:   clamp(1rem,     0.95rem + 0.4vw,  1.175rem);
  --ml-text-base: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --ml-text-lg:   clamp(1.3rem,   1.15rem + 0.85vw, 1.75rem);
  --ml-text-xl:   clamp(1.75rem,  1.4rem  + 1.5vw,  2.6rem);
  --ml-text-2xl:  clamp(2.25rem,  1.4rem  + 2.8vw,  4rem);

  /* Spacing */
  --ml-space-1:  0.25rem;
  --ml-space-2:  0.5rem;
  --ml-space-3:  0.75rem;
  --ml-space-4:  1rem;
  --ml-space-5:  1.25rem;
  --ml-space-6:  1.5rem;
  --ml-space-8:  2rem;
  --ml-space-10: 2.5rem;
  --ml-space-12: 3rem;
  --ml-space-16: 4rem;
  --ml-space-20: 5rem;

  /* Surfaces & lines */
  --ml-bg:              #f4f6fb;
  --ml-surface:         #ffffff;
  --ml-surface-2:       #eef1f8;
  --ml-surface-offset:  #e6eaf4;
  --ml-divider:         #cdd3e8;
  --ml-border:          #bdc5df;

  /* Text */
  --ml-text:            #141c2e;
  --ml-text-muted:      #4a5572;
  --ml-text-faint:      #9098b8;
  --ml-heading:         #0a5a8a;

  /* Primary (brand blue) */
  --ml-primary:         #1988cd;
  --ml-primary-hover:   #1270aa;
  --ml-primary-active:  #0d6fa8;
  --ml-primary-light:   #dde5f8;
  --ml-primary-highlight: #b3c3ef;

  /* Accent (brand red) */
  --ml-accent:          #c8293a;
  --ml-accent-hover:    #a81e2d;
  --ml-accent-light:    #fde8ea;

  /* Radius */
  --ml-radius-sm: 0.375rem;
  --ml-radius-md: 0.5rem;
  --ml-radius-lg: 0.75rem;
  --ml-radius-xl: 1rem;
  --ml-radius-2xl: 1.5rem;
  --ml-radius-full: 9999px;

  /* Shadows */
  --ml-shadow-sm: 0 1px 3px rgba(26, 38, 52, 0.08);
  --ml-shadow-md: 0 4px 16px rgba(26, 38, 52, 0.10);
  --ml-shadow-lg: 0 12px 40px rgba(26, 38, 52, 0.14);

  /* Transition */
  --ml-transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Fonts */
  --ml-font-heading: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --ml-font-body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* =====================================================================
   BASE / TYPOGRAPHY
   ===================================================================== */
body,
.ast-container,
.entry-content,
.site-content {
  font-family: var(--ml-font-body);
}

body {
  background-color: var(--ml-bg);
  color: var(--ml-text);
  font-family: var(--ml-font-body);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.widget-title,
.ast-single-related-posts-title {
  font-family: var(--ml-font-heading);
  color: var(--ml-heading);
  font-weight: 700;
  line-height: 1.25;
}

.entry-content h2 { font-size: var(--ml-text-xl); margin-top: 2.25rem; margin-bottom: 1rem; }
.entry-content h3 { font-size: var(--ml-text-lg); margin-top: 1.75rem; margin-bottom: 0.75rem; }
.entry-content h4 { font-size: var(--ml-text-base); margin-top: 1.5rem; margin-bottom: 0.5rem; }

.entry-content p,
.entry-content li {
  color: var(--ml-text);
  font-size: var(--ml-text-sm);
  line-height: 1.8;
}

.entry-content a,
.ast-single-related-posts-title a,
.page-content a {
  color: var(--ml-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ml-transition);
}

.entry-content a:hover,
.page-content a:hover {
  color: var(--ml-primary-hover);
}

/* Blockquotes */
.entry-content blockquote {
  border-left: 4px solid var(--ml-primary);
  background: var(--ml-surface);
  border-radius: var(--ml-radius-md);
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  color: var(--ml-text-muted);
  box-shadow: var(--ml-shadow-sm);
  font-style: italic;
}

/* Inline code / pre */
.entry-content code,
.entry-content pre {
  background: var(--ml-surface-2);
  border-radius: var(--ml-radius-sm);
}

/* =====================================================================
   CONTENT CONTAINER — align blog width with the static homepage
   ===================================================================== */
.site-content .ast-container {
  max-width: 1200px;
}

.site-content {
  padding-block: clamp(var(--ml-space-10), 6vw, var(--ml-space-20));
}

/* =====================================================================
   HEADER — replicates the static homepage masthead
   ===================================================================== */
.ml-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in oklch, var(--ml-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ml-divider);
  transition: box-shadow var(--ml-transition);
}

/* Progressive-enhancement fallback when color-mix/backdrop unsupported */
@supports not (backdrop-filter: blur(16px)) {
  .ml-header { background: #eef1f8; }
}

.ml-header.is-scrolled {
  box-shadow: var(--ml-shadow-sm);
}

/* Keep the sticky header clear of the WordPress admin bar for logged-in users */
body.admin-bar .ml-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .ml-header { top: 46px; }
}

.ml-header__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(var(--ml-space-4), 5vw, var(--ml-space-12));
}

.ml-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ml-space-8);
  padding-block: var(--ml-space-2);
}

.ml-logo {
  display: flex;
  align-items: center;
  gap: var(--ml-space-3);
  text-decoration: none;
  flex-shrink: 0;
  line-height: 0;
}

.ml-logo__img {
  width: auto;
  height: 76px;
  object-fit: contain;
  display: block;
}

.ml-nav__links {
  display: flex;
  align-items: center;
  gap: var(--ml-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ml-nav__links li { margin: 0; }

.ml-nav__links a {
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-sm);
  font-weight: 500;
  color: var(--ml-text-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--ml-transition);
}

.ml-nav__links a:hover,
.ml-nav__links a:focus-visible,
.ml-nav__links a.is-active,
.ml-nav__links a[aria-current="page"] {
  color: var(--ml-primary);
}

.ml-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--ml-space-3);
}

.ml-btn-nav {
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-sm);
  font-weight: 600;
  padding: var(--ml-space-2) var(--ml-space-5);
  border-radius: var(--ml-radius-full);
  background: var(--ml-accent);
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background var(--ml-transition);
}

.ml-btn-nav:hover,
.ml-btn-nav:focus-visible {
  background: var(--ml-accent-hover);
  color: #fff;
}

/* Hamburger */
.ml-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--ml-text);
  background: transparent;
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-md);
  cursor: pointer;
  padding: 0;
}

.ml-hamburger:hover { color: var(--ml-primary); border-color: var(--ml-primary); }

/* Mobile nav panel */
.ml-nav-mobile {
  display: none;
  flex-direction: column;
  gap: var(--ml-space-2);
  padding: var(--ml-space-4);
  border-top: 1px solid var(--ml-divider);
  background: var(--ml-surface);
}

.ml-nav-mobile.is-open { display: flex; }

.ml-nav-mobile a {
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-sm);
  font-weight: 500;
  color: var(--ml-text-muted);
  text-decoration: none;
  padding: var(--ml-space-3) var(--ml-space-4);
  border-radius: var(--ml-radius-md);
}

.ml-nav-mobile a:hover,
.ml-nav-mobile a.is-active {
  background: var(--ml-surface-offset);
  color: var(--ml-primary);
}

.ml-nav-mobile .ml-btn-book-mobile {
  background: var(--ml-primary);
  color: #fff;
  text-align: center;
  margin-top: var(--ml-space-2);
  border-radius: var(--ml-radius-full);
  padding: var(--ml-space-3) var(--ml-space-6);
  font-weight: 600;
}

.ml-nav-mobile .ml-btn-book-mobile:hover { background: var(--ml-primary-hover); }

@media (max-width: 921px) {
  .ml-nav__links,
  .ml-nav__actions .ml-btn-nav { display: none; }
  .ml-hamburger { display: inline-flex; }
  .ml-logo__img { height: 60px; }
}

/* =====================================================================
   BLOG INDEX & ARCHIVES — card treatment matching static article cards
   ===================================================================== */
.blog .site-main .ast-row,
.archive .site-main .ast-row,
.search-results .site-main .ast-row {
  gap: var(--ml-space-6);
}

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comments-area,
.ast-separate-container .ast-comment-list li.depth-1 {
  background: var(--ml-surface);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-xl);
  box-shadow: var(--ml-shadow-sm);
  transition: transform var(--ml-transition), box-shadow var(--ml-transition), border-color var(--ml-transition);
}

/* Blog listing card hover lift */
.blog .ast-article-post:hover,
.archive .ast-article-post:hover,
.search-results .ast-article-post:hover {
  transform: translateY(-3px);
  box-shadow: var(--ml-shadow-lg);
  border-color: var(--ml-primary-highlight);
}

.ast-article-post .entry-title {
  font-size: var(--ml-text-lg);
  line-height: 1.35;
  margin-bottom: var(--ml-space-3);
}

.ast-article-post .entry-title a {
  color: var(--ml-heading);
  text-decoration: none;
  transition: color var(--ml-transition);
}

.ast-article-post .entry-title a:hover {
  color: var(--ml-primary);
}

/* Featured images */
.ast-article-post .post-thumb img,
.ast-article-single .post-thumb img,
.wp-post-image {
  border-radius: var(--ml-radius-lg);
  display: block;
}

.ast-article-post .post-thumb,
.ast-article-single .post-thumb-img-content {
  border-radius: var(--ml-radius-lg);
  overflow: hidden;
}

/* =====================================================================
   ENTRY META + CATEGORY PILLS
   ===================================================================== */
.entry-meta,
.ast-blog-meta-container,
.entry-meta a,
.posted-on,
.ast-taxonomy-container {
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-xs);
  color: var(--ml-text-muted);
}

.entry-meta a {
  color: var(--ml-text-muted);
  text-decoration: none;
  transition: color var(--ml-transition);
}

.entry-meta a:hover { color: var(--ml-primary); }

.entry-meta .ast-icon svg { fill: var(--ml-primary); }

/* Category / tag pills */
.ast-terms-link a,
.cat-links a,
.tags-links a,
.ast-taxonomy-container a,
.entry-meta .cat-links a {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(25, 136, 205, 0.08);
  color: var(--ml-primary) !important;
  padding: 3px 12px;
  border-radius: var(--ml-radius-full);
  margin: 0 4px 4px 0;
  text-decoration: none;
  transition: background var(--ml-transition), color var(--ml-transition);
}

.ast-terms-link a:hover,
.cat-links a:hover,
.tags-links a:hover,
.ast-taxonomy-container a:hover {
  background: var(--ml-primary);
  color: #fff !important;
}

/* =====================================================================
   SINGLE POST
   ===================================================================== */
.ast-article-single .entry-title,
.single .entry-title,
.page .entry-title {
  font-size: var(--ml-text-2xl);
  color: var(--ml-heading);
  margin-bottom: var(--ml-space-4);
  line-height: 1.15;
}

.ast-article-single {
  padding: clamp(var(--ml-space-6), 4vw, var(--ml-space-12));
}

.entry-content > * { max-width: 75ch; }
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-embed { max-width: none; }

/* Read more button */
.read-more a,
.ast-button,
.wp-block-button__link {
  display: inline-block;
  background: var(--ml-primary);
  color: #fff !important;
  font-weight: 700;
  font-size: var(--ml-text-sm);
  padding: var(--ml-space-3) var(--ml-space-6);
  border-radius: var(--ml-radius-full);
  text-decoration: none;
  transition: background var(--ml-transition), transform var(--ml-transition), box-shadow var(--ml-transition);
}

.read-more a:hover,
.ast-button:hover,
.wp-block-button__link:hover {
  background: var(--ml-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--ml-shadow-md);
  color: #fff !important;
}

/* Secondary/outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ml-primary) !important;
  border: 2px solid var(--ml-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(25, 136, 205, 0.08);
  color: var(--ml-primary-hover) !important;
}

/* =====================================================================
   PAGINATION
   ===================================================================== */
.ast-pagination .page-numbers,
.paging-navigation .page-numbers,
.ast-pagination a,
.navigation .nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 var(--ml-space-3);
  border-radius: var(--ml-radius-md);
  border: 1px solid var(--ml-border);
  background: var(--ml-surface);
  color: var(--ml-text-muted);
  text-decoration: none;
  font-weight: 600;
  transition: all var(--ml-transition);
}

.ast-pagination .page-numbers.current,
.navigation .nav-links .page-numbers.current {
  background: var(--ml-primary);
  border-color: var(--ml-primary);
  color: #fff;
}

.ast-pagination a.page-numbers:hover,
.navigation .nav-links a.page-numbers:hover {
  border-color: var(--ml-primary);
  color: var(--ml-primary);
}

/* Post navigation (prev/next on single) */
.ast-single-post-navigation .nav-links a,
.post-navigation .nav-links a {
  color: var(--ml-primary);
  text-decoration: none;
}

/* =====================================================================
   SIDEBAR WIDGETS
   ===================================================================== */
.widget,
#secondary .widget {
  background: var(--ml-surface);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-xl);
  padding: var(--ml-space-6);
  margin-bottom: var(--ml-space-6);
  box-shadow: var(--ml-shadow-sm);
}

.widget-title,
#secondary .widget-title {
  font-size: var(--ml-text-base);
  font-weight: 700;
  color: var(--ml-heading);
  margin-bottom: var(--ml-space-4);
  padding-bottom: var(--ml-space-3);
  border-bottom: 2px solid var(--ml-primary-light);
}

.widget ul { list-style: none; margin: 0; padding: 0; }

.widget ul li {
  padding: var(--ml-space-2) 0;
  border-bottom: 1px solid var(--ml-divider);
  color: var(--ml-text-muted);
  font-size: var(--ml-text-sm);
}

.widget ul li:last-child { border-bottom: none; }

.widget a {
  color: var(--ml-text-muted);
  text-decoration: none;
  transition: color var(--ml-transition);
}

.widget a:hover { color: var(--ml-primary); }

/* =====================================================================
   SEARCH + FORMS + INPUTS
   ===================================================================== */
.search-field,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: var(--ml-space-3) var(--ml-space-4);
  background: var(--ml-bg);
  border: 1.5px solid var(--ml-border);
  border-radius: var(--ml-radius-md);
  font-family: var(--ml-font-body);
  font-size: var(--ml-text-sm);
  color: var(--ml-text);
  outline: none;
  transition: border-color var(--ml-transition), box-shadow var(--ml-transition);
}

.search-field:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  border-color: var(--ml-primary);
  box-shadow: 0 0 0 3px rgba(25, 136, 205, 0.15);
}

/* Buttons (submit / search / generic) */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.search-submit {
  font-family: var(--ml-font-body);
  background: var(--ml-primary);
  color: #fff;
  border: none;
  border-radius: var(--ml-radius-full);
  padding: var(--ml-space-3) var(--ml-space-6);
  font-weight: 700;
  font-size: var(--ml-text-sm);
  cursor: pointer;
  transition: background var(--ml-transition), transform var(--ml-transition), box-shadow var(--ml-transition);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.search-submit:hover {
  background: var(--ml-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--ml-shadow-md);
}

/* Keep the header/hamburger button free of the generic button skin */
.ml-hamburger {
  background: transparent;
  color: var(--ml-text);
  border-radius: var(--ml-radius-md);
}
.ml-hamburger:hover { background: transparent; transform: none; box-shadow: none; }

/* =====================================================================
   COMMENTS
   ===================================================================== */
.comment-body { color: var(--ml-text); }
.comments-title,
.comment-reply-title {
  font-family: var(--ml-font-heading);
  color: var(--ml-heading);
}
.comment-author .fn { color: var(--ml-heading); font-weight: 700; }
.comment-metadata a { color: var(--ml-text-faint); }

/* =====================================================================
   ARCHIVE / PAGE TITLES (banner-like)
   ===================================================================== */
.ast-archive-description .ast-archive-title,
.page-title {
  font-family: var(--ml-font-heading);
  color: var(--ml-heading);
  font-size: var(--ml-text-2xl);
}

/* =====================================================================
   FOOTER — replicates the static homepage footer
   ===================================================================== */
.ml-footer {
  background: var(--ml-heading);
  color: rgba(255, 255, 255, 0.75);
  padding-block: var(--ml-space-16) var(--ml-space-8);
  font-family: var(--ml-font-body);
}

.ml-footer__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(var(--ml-space-4), 5vw, var(--ml-space-12));
}

.ml-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--ml-space-10);
  margin-bottom: var(--ml-space-12);
}

.ml-footer__brand-logo {
  height: 56px;
  width: auto;
  display: block;
  margin-bottom: var(--ml-space-4);
}

.ml-footer__brand p {
  font-size: var(--ml-text-sm);
  line-height: 1.7;
  margin: 0 0 var(--ml-space-3);
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.72);
}

.ml-footer__brand .ml-footer__zh {
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.05em;
}

.ml-footer__col h4 {
  font-size: var(--ml-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 var(--ml-space-5);
}

.ml-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ml-space-3);
  margin: 0;
  padding: 0;
}

.ml-footer__links a,
.ml-footer__links span {
  font-size: var(--ml-text-sm);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--ml-transition);
}

.ml-footer__links a:hover { color: #fff; }

.ml-footer__hours {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--ml-text-sm);
  color: rgba(255, 255, 255, 0.7);
}

.ml-footer__hours span { display: block; }
.ml-footer__hours strong { color: #fff; font-weight: 600; }

.ml-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ml-space-4);
  flex-wrap: wrap;
  padding-top: var(--ml-space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ml-footer__bottom p {
  font-size: var(--ml-text-xs);
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.ml-footer__social {
  display: flex;
  gap: var(--ml-space-4);
  margin-top: var(--ml-space-4);
}

.ml-footer__social a {
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  text-decoration: none;
}

.ml-footer__social a:hover { color: #fff; }

@media (max-width: 921px) {
  .ml-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .ml-footer__grid { grid-template-columns: 1fr; gap: var(--ml-space-8); }
  .ml-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   SKIP LINK (accessibility parity with static site)
   ===================================================================== */
.ml-skip-link {
  position: absolute;
  left: var(--ml-space-4);
  top: -100px;
  background: var(--ml-primary);
  color: #fff;
  padding: var(--ml-space-2) var(--ml-space-4);
  border-radius: var(--ml-radius-md);
  font-size: var(--ml-text-sm);
  font-weight: 600;
  z-index: 2000;
  text-decoration: none;
  transition: top var(--ml-transition);
}

.ml-skip-link:focus {
  top: var(--ml-space-4);
  color: #fff;
}

/* =====================================================================
   BACK TO TOP
   ===================================================================== */
.ml-back-to-top {
  position: fixed;
  bottom: var(--ml-space-8);
  right: var(--ml-space-8);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ml-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--ml-shadow-md);
  transition: opacity var(--ml-transition), transform var(--ml-transition), background var(--ml-transition);
  z-index: 900;
  padding: 0;
}

.ml-back-to-top.is-visible { opacity: 1; pointer-events: auto; }
.ml-back-to-top:hover { background: var(--ml-primary-hover); transform: translateY(-2px); }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =====================================================================
   REVISION 1.1.0 — ROBUST OVERRIDES
   Guarantees the compact Medilove masthead wins over the Astra parent
   theme, Astra Starter Templates and the Spectra page-builder global
   styles, and suppresses Astra's default Site Identity (logo + site
   title + tagline) so the site-title/tagline banner can never reappear.
   High specificity (html body …) + !important are used deliberately for
   this reason. Icon fonts are explicitly preserved.
   ===================================================================== */

/* 1 — Brand typography over page-builder / Astra fonts ---------------- */
html body,
html body p, html body li, html body dd, html body dt,
html body blockquote, html body figcaption,
html body input, html body select, html body textarea, html body button,
html body .entry-content, html body .entry-content p, html body .entry-content li,
html body .ast-container, html body .site-content, html body .widget {
  font-family: var(--ml-font-body) !important;
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .entry-title, html body .entry-title a,
html body .widget-title, html body .page-title,
html body .ast-archive-description .ast-archive-title,
html body .wp-block-heading, html body .uagb-heading-text {
  font-family: var(--ml-font-heading) !important;
}

/* Keep icon fonts intact (dashicons / Font Awesome) */
html body .dashicons,
html body [class^="dashicons"], html body [class*=" dashicons"] {
  font-family: "dashicons" !important;
}
html body i[class^="fa"], html body i[class*=" fa"],
html body .fa, html body .fas, html body .far, html body .fab,
html body .fa-solid, html body .fa-regular, html body .fa-brands {
  font-family: inherit; /* defer to Font Awesome's own stylesheet */
}

/* 2 — Suppress Astra's default Site Identity banner (defense-in-depth) */
html body .site-header .site-title,
html body .site-header .site-description,
html body #masthead .site-title,
html body #masthead .site-description,
html body .ast-site-identity .site-title,
html body .ast-site-identity .site-description,
html body .ast-site-title-wrap .site-description {
  display: none !important;
}

/* 3 — Compact masthead layout, immune to global overrides ------------- */
html body .ml-header {
  position: sticky !important;
  top: 0;
  z-index: 1000 !important;
  display: block !important;
  width: 100% !important;
  background: #eef1f8; /* solid fallback if color-mix unsupported */
  background: color-mix(in oklch, var(--ml-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ml-divider) !important;
}
body.admin-bar .ml-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ml-header { top: 46px; } }

html body .ml-header .ml-header__inner {
  width: 100% !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
}

html body .ml-header .ml-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: var(--ml-space-8);
  min-height: 92px;
  padding-block: var(--ml-space-2) !important;
}

html body .ml-header .ml-logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  line-height: 0 !important;
}
html body .ml-header .ml-logo__img {
  height: 76px !important;
  max-height: 76px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
}

html body .ml-header .ml-nav__links {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .ml-header .ml-nav__links li { margin: 0 !important; }

html body .ml-header .ml-nav__actions {
  display: flex !important;
  align-items: center !important;
  gap: var(--ml-space-3);
  flex-shrink: 0 !important;
}
html body .ml-header .ml-btn-nav {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* Hamburger: hidden on desktop, shown on mobile */
html body .ml-header .ml-hamburger { display: none !important; }

@media (max-width: 921px) {
  html body .ml-header .ml-nav { min-height: 76px; }
  html body .ml-header .ml-logo__img { height: 60px !important; max-height: 60px !important; }
  html body .ml-header .ml-nav__links { display: none !important; }
  html body .ml-header .ml-nav__actions .ml-btn-nav { display: none !important; }
  html body .ml-header .ml-hamburger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Mobile dropdown panel — visibility toggled by medilove-nav.js */
html body .ml-header .ml-nav-mobile { display: none; }
html body .ml-header .ml-nav-mobile.is-open {
  display: flex !important;
  flex-direction: column !important;
}

/* ============================================================
   Mobile accordion submenu (Health Diary tap-to-expand)
   Only affects the mobile nav panel (.ml-nav-mobile).
   Desktop hover behaviour (.ml-nav__submenu) is unchanged.
   ============================================================ */
.ml-nav-mobile .ml-mob-accordion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ml-nav-mobile .ml-mob-parent {
  flex: 1 1 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  border-bottom: none !important;
}
.ml-nav-mobile .ml-mob-parent:hover,
.ml-nav-mobile .ml-mob-parent.is-active {
  color: var(--ml-primary, #3b82f6);
}
.ml-nav-mobile .ml-mob-toggle {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}
.ml-nav-mobile .ml-mob-toggle:hover { color: var(--ml-primary, #3b82f6); }
.ml-chevron { display: block; transition: transform 0.25s ease; }
.ml-mob-accordion.submenu-open .ml-chevron { transform: rotate(180deg); }
.ml-nav-mobile .ml-mob-submenu {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #f5f7fa;
}
.ml-mob-accordion.submenu-open .ml-mob-submenu { max-height: 500px; }
.ml-nav-mobile .ml-mob-submenu li { margin: 0; padding: 0; }
.ml-nav-mobile .ml-mob-submenu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.625rem 1rem 0.625rem 2rem;
  color: #2d3748;
  text-decoration: none;
  font-size: 0.95em;
  border-bottom: 1px solid #e2e8f0;
}
.ml-nav-mobile .ml-mob-submenu a:last-child { border-bottom: none; }
.ml-nav-mobile .ml-mob-submenu a:hover { color: #0a5a8a; background: #edf2f7; }