/*
Theme Name: Maruoka Clinic 2026
Theme URI: https://maruoka.or.jp
Author: Medical Corporation Maruoka Hospital
Author URI: https://maruoka.or.jp
Description: Independent classic WordPress theme for Medical Corporation Maruoka Hospital, with outpatient, care, facility and article guidance. Theme settings are separate from the legacy theme.
Version: 1.4.18
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maruoka-clinic-2026
Requires at least: 6.0
Requires PHP: 8.0
*/

/* ============================================
   Design System Variables
   Medical Corporation Maruoka Hospital
   ============================================ */

:root {
  /* --- Brand Colors (Maruoka Design System) --- */
  --hp-primary: #0E4D3A;
  --hp-primary-light: #19745A;
  --hp-primary-dark: #073B2D;

  --hp-dark: #0E4D3A;
  --hp-dark-light: #1F5F49;

  --hp-accent: #D58B76;
  --hp-accent-light: #E2A08E;

  --hp-beauty: #D58B76;
  --hp-beauty-light: #E8B4A5;
  --hp-beauty-gradient: linear-gradient(135deg, #D58B76 0%, #BC735F 100%);

  --hp-diet: #0E4D3A;
  --hp-diet-light: #19745A;

  --hp-kaigo: #8E6F4E;
  --hp-kaigo-light: #A98762;

  /* --- Neutral Colors --- */
  --hp-text: #253932;
  --hp-text-light: #52645D;
  --hp-text-muted: #6B7280;
  --hp-border: #D8DED8;
  --hp-border-light: #EADFCB;
  --hp-bg: #ffffff;
  --hp-bg-light: #F5F6F4;
  --hp-bg-warm: #FBF8F1;
  --hp-bg-green: #EAF3ED;

  /* --- Typography (system fonts, no Google Fonts) --- */
  --hp-font-primary: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --hp-font-heading: 'Noto Serif JP', 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', serif;

  --hp-font-size-xs: 0.75rem;
  --hp-font-size-sm: 0.875rem;
  --hp-font-size-base: 1rem;
  --hp-font-size-md: 1.125rem;
  --hp-font-size-lg: 1.25rem;
  --hp-font-size-xl: 1.5rem;
  --hp-font-size-2xl: 1.875rem;
  --hp-font-size-3xl: 2.25rem;
  --hp-font-size-4xl: 3rem;

  --hp-line-height: 1.8;
  --hp-line-height-tight: 1.4;
  --hp-line-height-heading: 1.3;

  --hp-font-weight-normal: 400;
  --hp-font-weight-medium: 500;
  --hp-font-weight-bold: 700;

  /* --- Spacing --- */
  --hp-space-xs: 0.25rem;
  --hp-space-sm: 0.5rem;
  --hp-space-md: 1rem;
  --hp-space-lg: 1.5rem;
  --hp-space-xl: 2rem;
  --hp-space-2xl: 3rem;
  --hp-space-3xl: 4rem;
  --hp-space-4xl: 6rem;

  /* --- Layout --- */
  --hp-container-max: 1100px;
  --hp-container-narrow: 800px;
  --hp-container-wide: 1200px;
  --hp-container-padding: 1.25rem;

  /* --- Borders & Radius --- */
  --hp-radius-sm: 4px;
  --hp-radius-md: 8px;
  --hp-radius-lg: 12px;
  --hp-radius-xl: 16px;
  --hp-radius-full: 9999px;

  /* --- Shadows --- */
  --hp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --hp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --hp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --hp-shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.15);

  /* --- Transitions --- */
  --hp-transition-fast: 0.15s ease;
  --hp-transition-normal: 0.3s ease;
  --hp-transition-slow: 0.5s ease;

  /* --- Z-index layers --- */
  --hp-z-base: 1;
  --hp-z-sticky: 100;
  --hp-z-fixed: 200;
  --hp-z-modal: 300;
}

html[data-font-size="large"] {
  --hp-font-size-xs: 0.8125rem;
  --hp-font-size-sm: 0.9375rem;
  --hp-font-size-base: 1.0625rem;
  --hp-font-size-md: 1.1875rem;
  --hp-font-size-lg: 1.3125rem;
  --hp-font-size-xl: 1.625rem;
  --hp-font-size-2xl: 2rem;
  --hp-font-size-3xl: 2.375rem;
  --hp-font-size-4xl: 3.125rem;
  --hp-line-height: 1.85;
}

.hp-font-size-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 3px;
  border: 1px solid rgba(14, 77, 58, 0.16);
  border-radius: var(--hp-radius-full);
  background: rgba(255, 255, 255, 0.94);
  color: var(--hp-primary-dark);
  font-family: var(--hp-font-primary);
  line-height: 1;
  white-space: nowrap;
}

.hp-font-size-toggle__label {
  padding: 0 8px 0 9px;
  color: var(--hp-text-light);
  font-size: 0.72rem;
  font-weight: var(--hp-font-weight-bold);
}

.hp-font-size-toggle__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--hp-radius-full);
  background: transparent;
  color: var(--hp-primary-dark);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: var(--hp-font-weight-bold);
  transition: background var(--hp-transition-fast), color var(--hp-transition-fast), box-shadow var(--hp-transition-fast);
}

.hp-font-size-toggle__button:hover,
.hp-font-size-toggle__button:focus-visible {
  background: var(--hp-bg-green);
}

.hp-font-size-toggle__button:focus-visible {
  outline: 2px solid var(--hp-primary-light);
  outline-offset: 2px;
}

.hp-font-size-toggle__button[aria-pressed="true"] {
  background: var(--hp-primary);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(14, 77, 58, 0.16);
}

.hp-font-size-toggle--mobile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  border-radius: 18px;
  background: #ffffff;
}

.hp-font-size-toggle--mobile .hp-font-size-toggle__label {
  align-self: center;
}

.hp-font-size-toggle--mobile .hp-font-size-toggle__button {
  min-height: 42px;
}

html[data-font-size="large"] .mk-site--care :where(
  .mk-hero__copy h1,
  .mk-care-hero__copy h1,
  .mk-subhero h1,
  .mk-section-title h2,
  .mk-section-title--left h2,
  .mk-dot-title--orange,
  .mk-care-network__head h2,
  .mk-info-panel h2,
  .mk-reserve-panel h2,
  .mk-care-pain-card h3,
  .mk-care-scene-card h3,
  .mk-care-support-card h3,
  .mk-facility-card h3,
  .mk-location-card h3,
  .mk-final-cta h2
) {
  overflow-wrap: anywhere;
  line-break: strict;
}

html[data-font-size="large"] .mk-site--care :where(.mk-hero__copy h1, .mk-care-hero__copy h1, .mk-subhero h1) {
  font-size: clamp(2.9rem, 4.75vw, 4.2rem);
}

html[data-font-size="large"] .mk-site--care :where(.mk-section-title h2, .mk-section-title--left h2, .mk-dot-title--orange, .mk-care-network__head h2) {
  font-size: clamp(2rem, 3.45vw, 3.1rem);
}

html[data-font-size="large"] .mk-site--care :where(
  .mk-info-panel h2,
  .mk-reserve-panel h2,
  .mk-care-pain-card h3,
  .mk-care-scene-card h3,
  .mk-care-support-card h3,
  .mk-facility-card h3,
  .mk-location-card h3,
  .mk-final-cta h2
) {
  font-size: clamp(1.55rem, 2.35vw, 2.05rem);
}

html[data-font-size="large"] .mk-site--care :where(
  .mk-hero__copy p,
  .mk-care-hero__copy p,
  .mk-subhero p,
  .mk-section-title p,
  .mk-care-network__head span,
  .mk-care-network__nodes span,
  .mk-care-pain-card p,
  .mk-care-scene-card p,
  .mk-care-support-card p,
  .mk-card p,
  .mk-entry p,
  .mk-choice li,
  .mk-panel p,
  .mk-info-panel p,
  .mk-reserve-panel p,
  .mk-facility-card p,
  .mk-facility-card small,
  .mk-location-card p,
  .mk-notice p,
  .mk-final-cta p
) {
  font-size: clamp(1.06rem, 0.98rem + 0.22vw, 1.18rem);
  line-height: 1.9;
  overflow-wrap: anywhere;
}

html[data-font-size="large"] .mk-site--care :where(.mk-btn, .mk-facility-filters button, .mk-facility-filters a) {
  font-size: clamp(0.95rem, 0.9rem + 0.14vw, 1.05rem);
}

@media (min-width: 1480px) {
  .hp-header__meta {
    gap: 12px;
  }
}

@media (max-width: 840px) {
  html[data-font-size="large"] .mk-site--care :where(.mk-hero__copy h1, .mk-care-hero__copy h1, .mk-subhero h1) {
    font-size: clamp(2.05rem, 8.4vw, 2.85rem);
  }

  html[data-font-size="large"] .mk-site--care :where(.mk-section-title h2, .mk-section-title--left h2, .mk-dot-title--orange, .mk-care-network__head h2) {
    font-size: clamp(1.85rem, 6.7vw, 2.35rem);
  }

  html[data-font-size="large"] .mk-site--care :where(
    .mk-hero__copy p,
    .mk-care-hero__copy p,
    .mk-subhero p,
    .mk-section-title p,
    .mk-care-network__head span,
    .mk-care-network__nodes span,
    .mk-care-pain-card p,
    .mk-care-scene-card p,
    .mk-care-support-card p,
    .mk-card p,
    .mk-entry p,
    .mk-choice li,
    .mk-panel p,
    .mk-info-panel p,
    .mk-reserve-panel p,
    .mk-facility-card p,
    .mk-facility-card small,
    .mk-location-card p,
    .mk-notice p,
    .mk-final-cta p
  ) {
    font-size: clamp(1rem, 4.1vw, 1.1rem);
  }
}

@media (max-width: 560px) {
  html[data-font-size="large"] .mk-site--care :where(.mk-hero__copy h1, .mk-care-hero__copy h1, .mk-subhero h1) {
    font-size: clamp(2rem, 8.2vw, 2.45rem);
  }
}