/*
Theme Name: Faramarz Clinic
Theme URI: https://www.faramarzclinic.com
Author: Netron Agency
Description: Child theme of Hello Elementor for Faramarz Orthopedic Clinic — custom single post template inspired by Netron design system.
Version: 1.0.0
Template: hello-elementor
Text Domain: faramarz-clinic
*/

:root {
  /* Primary — clinic blue */
  --color-primary: #007BBA;
  --color-background: #f8fafc;
  --color-divider: #e2e8f0;
  --bg-gradient: linear-gradient(135deg, #161c3e 0%, #0f172a 100%);

  /* Text */
  --color-text-heading: #0f172a;
  --color-text-body: #334155;
  --color-text-secondary: #64748b;

  /* Semantic */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #17a2b8;

  /* Glassmorphism */
  --color-glass-bg: rgba(255, 255, 255, 0.6);
  --color-glass-stroke: #ffffff;

  /* Font */
  --font-primary: "IRANYekanXFaNum", Tahoma, Arial, sans-serif;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

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

  /* Header */
  --header-bar-height: 72px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════
   Global Typography — Netron style, site-wide
   Override Elementor's inline font-family
   ══════════════════════════════════════════════════ */

html {
  direction: rtl;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  background-color: var(--color-background);
  -webkit-tap-highlight-color: transparent;
}

body,
body.rtl,
.elementor *,
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-theme-post-content,
.elementor-element,
.elementor-section,
.elementor-container {
  font-family: var(--font-primary) !important;
}

body {
  position: relative;
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-body);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor h1, .elementor h2, .elementor h3,
.elementor h4, .elementor h5, .elementor h6,
[style*="B Titr"], [style*="b titr"],
[style*="font-family"] h1,
[style*="font-family"] h2,
[style*="font-family"] h3 {
  font-family: "IRANYekanXFaNum", Tahoma, Arial, sans-serif !important;
  color: var(--color-text-heading);
  line-height: 1.4;
}

h1 { font-size: 2rem; font-weight: 800; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1.125rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: 0.875rem; font-weight: 600; }

p, li, td, th, label, input, textarea, select, button, a {
  font-family: var(--font-primary);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover,
a:active,
a:focus {
  color: #056894;
  opacity: 1;
}

/*
 * Hello Elementor defaults buttons to magenta #CC3366 on hover/focus.
 * Neutralize globally; component classes restate their own states.
 */
button,
[type="button"],
[type="submit"],
[type="reset"] {
  -webkit-tap-highlight-color: transparent;
}

button:hover,
button:focus,
button:active,
[type="button"]:hover,
[type="button"]:focus,
[type="button"]:active,
[type="submit"]:hover,
[type="submit"]:focus,
[type="submit"]:active,
[type="reset"]:hover,
[type="reset"]:focus,
[type="reset"]:active {
  color: var(--color-primary);
  background-color: transparent;
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-divider));
}

img {
  max-width: 100%;
  height: auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Breadcrumb (shared: single, category, blog) ── */
.faramarz-breadcrumb-wrap {
  margin-bottom: var(--space-3);
}

.netron-breadcrumb {
  width: 100%;
}

.netron-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.netron-breadcrumb__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.netron-breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.netron-breadcrumb__link:hover,
.netron-breadcrumb__link:focus-visible {
  color: var(--color-primary);
  outline: none;
  opacity: 1;
}

.netron-breadcrumb__current {
  color: var(--color-text-secondary);
}

.netron-breadcrumb__sep {
  color: color-mix(in srgb, var(--color-text-secondary) 55%, transparent);
  margin-inline: 0.2rem;
  user-select: none;
}

.faramarz-breadcrumb-wrap--yoast,
.faramarz-breadcrumb-wrap--yoast .yoast-breadcrumb,
.faramarz-breadcrumb-wrap--yoast .faramarz-yoast-breadcrumb {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}