/* SamaUmrah v1.3: central typography system.
   Layout and colour belong in styles.css. Change type tokens here. */
:root {
  --font-ui:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --type-caption: 0.8125rem;
  --type-small: 0.875rem;
  --type-body: 1rem;
  --type-lead: 1.0625rem;
  --type-card-title: 1.375rem;
  --type-heading: clamp(1.5rem, 2.7vw, 2rem);
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: var(--type-body);
  line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  line-height: 1.25;
  text-wrap: balance;
}
h1 {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
}
h2 {
  font-size: var(--type-heading);
}
h3 {
  font-size: 1.25rem;
}
p,
li,
dd,
td,
blockquote {
  overflow-wrap: break-word;
}
p {
  line-height: 1.75;
}
small,
label,
.fine,
.duration,
.hotel-info span,
.hotel-info small,
.food-line,
.card-price > span,
.card-price > small,
.room-prices small,
.eyebrow,
.badge,
.flight-badge,
.card-tools label,
.card-tools button,
.card-date,
.detail-badges > span,
.agent-badge,
.source-label,
.breadcrumb {
  font-size: var(--type-small);
  line-height: 1.65;
}
.fine {
  font-size: var(--type-small) !important;
}
.btn,
.text-link,
.enquire-link,
.sort,
.sort select,
.tabs button,
.catalog-tabs > a,
.filter-panel input,
.filter-panel select,
.filter-panel label,
.filter-panel .text-link,
.catalog-results,
.catalog-results select,
.catalog-results label,
.pagination button,
#nav,
.category-nav,
.footer-grid > div > a:not(.logo),
.footer-grid h3,
.footer-grid > div > p,
.source-links {
  font-size: var(--type-small);
  line-height: 1.5;
}
.topbar,
.topbar a,
.topbar span,
.hero-pill,
.hero-trust,
.hero-caption > span,
.hero-note,
.mini-tag,
.booking-foot,
.footer-bottom {
  font-size: var(--type-caption);
  line-height: 1.5;
}
.logo {
  font-size: 1.6875rem;
  line-height: 1.1;
}
.logo small {
  font-size: 0.625rem;
  line-height: 1.4;
}
.hero-copy h1 {
  font-size: clamp(2.25rem, 4vw, 3.0625rem);
  line-height: 1.15;
}
.hero-copy p,
.page-intro p,
.section-heading p,
.detail-section p,
.detail-section li,
.prose p,
.content-panel p,
.faq-list p,
.contact-card p,
.about-grid p,
.office-grid p,
.campaign p,
.steps p,
.decision-intro p,
.decision-card > span:nth-last-child(2) {
  font-size: var(--type-body);
  line-height: 1.75;
}
.hero-caption > b {
  font-size: 1.0625rem;
}
.floating-note,
.floating-note small,
.benefit-strip span,
.benefit-strip small {
  font-size: var(--type-small);
}
.category-card h3 {
  font-size: 1.125rem;
}
.category-card p,
.category-card > div,
.decision-label,
.decision-note,
.decision-link {
  font-size: var(--type-small);
  line-height: 1.6;
}
.category-card > div b {
  font-size: 1.125rem;
}
.card-heading h3,
.service-card h3,
.contact-card h3 {
  font-size: var(--type-card-title);
}
.card-heading span {
  font-size: var(--type-caption);
}
.hotel-info b,
.room-prices b,
.hotel-cards h3,
.service-card b,
.feature-list span {
  font-size: var(--type-body);
  line-height: 1.6;
}
.package-card .duration,
.package-card .hotel-info small,
.package-card .food-line {
  font-size: 0.9375rem;
  line-height: 1.65;
}
.package-card .hotel-info span,
.package-card .card-price > span,
.package-card .card-price > small {
  font-size: var(--type-small);
}
.card-price strong,
.booking-price {
  font-size: 2.125rem;
  line-height: 1.4;
}
.page-intro h1,
.detail-title h1 {
  font-size: clamp(1.875rem, 3.2vw, 2.4375rem);
}
.detail-title > p,
.detail-tabs,
.detail-photo > button,
.check-list li,
.food-note b,
.food-note p,
.child-rates span,
.child-rates b,
.hotel-cards span,
.hotel-cards p,
.faq-list summary,
.resource-link b,
.resource-link small {
  font-size: var(--type-small);
  line-height: 1.65;
}
.detail-section h2,
.content-panel h2,
.prose h2 {
  font-size: 1.5rem;
}
.detail-section h3 {
  font-size: 1.125rem;
}
.company-facts b,
.campaign-facts b {
  font-size: 1.5rem;
}
.company-facts span,
.campaign-facts span {
  font-size: var(--type-small);
}
.decision-card strong {
  font-size: 1.1875rem;
}
.decision-icon {
  font-size: 1.4375rem;
}
.decision-link span,
.floating-note a {
  font-size: 1.25rem;
}
table,
thead th,
.schedule-table td,
.schedule-table th,
.comparison-table td,
.comparison-table button {
  font-size: var(--type-small);
  line-height: 1.65;
}
.comparison-table h3 {
  font-size: 1.125rem;
}
.comparison-table .compare-big {
  font-size: 1.375rem;
}
.mobile-bottom a {
  font-size: var(--type-caption);
}
#toast,
#compare-tray,
#compare-tray .btn,
#image-caption {
  font-size: var(--type-small);
  line-height: 1.6;
}
.close,
#compare-tray > button,
#image-dialog > button {
  font-size: 1.5rem;
}
.empty-state h2 {
  font-size: 1.5rem;
}
@media (min-width: 1024px) {
  body {
    font-size: var(--type-lead);
  }
}
@media (max-width: 700px) {
  .package-card .hotel-info span,
  .package-card .card-price > span,
  .package-card .card-price > small {
    font-size: 0.875rem;
  }
  .package-card .hotel-info b,
  .package-card .hotel-info small,
  .package-card .food-line,
  .package-card .duration {
    font-size: 1rem;
  }
  .card-heading h3 {
    font-size: 1.5rem;
  }
  .hero-caption > b {
    font-size: 0.9375rem;
  }
  .logo {
    font-size: 1.5rem;
  }
  .category-card h3 {
    font-size: 1rem;
  }
  .category-card > div b {
    font-size: 1.0625rem;
  }
}