/* Rihlati UI system - hero, stats, container. Tokens come from theme.json
   (settings.custom.rihlati) printed as --rh-* right after this file; the
   fallbacks below are the same values so the file also works on its own. */

:root{
  --rh-container:1320px; --rh-gutter:24px; --rh-radius:32px; --rh-radius-mobile:24px;
  --rh-hero-pad:56px; --rh-hero-pad-mobile:28px 20px; --rh-hero-gap-top:24px; --rh-hero-gap-bottom:32px;
  --rh-font-display:"Archivo",Helvetica,Arial,sans-serif; --rh-font-body:"Inter",Helvetica,Arial,sans-serif;
  --rh-type-h1:clamp(28px,3.6vw,42px); --rh-type-h1-mobile:24px; --rh-type-lead:15.5px; --rh-type-lead-mobile:13.5px; --rh-type-eyebrow:11px;
  --rh-color-teal:#22ccb2; --rh-color-deep:#0c332f; --rh-color-ink:#12151a; --rh-color-mist:#7d8492; --rh-color-mint:#b8f5ea;
}

/* ---------- container (same box as header/footer: 1320 incl. 24px gutters) ---------- */
.rh-wrap{max-width:var(--rh-container);margin-inline:auto;padding-inline:var(--rh-gutter);box-sizing:border-box;}

/* ---------- HERO: core/group + block style "Rihlati hero" ---------- */
.wp-block-group.is-style-rihlati-hero{
  position:relative;overflow:hidden;box-sizing:border-box;
  width:calc(100% - 2 * var(--rh-gutter));
  max-width:calc(var(--rh-container) - 2 * var(--rh-gutter));
  margin:var(--rh-hero-gap-top) auto var(--rh-hero-gap-bottom);
  padding:var(--rh-hero-pad);
  border-radius:var(--rh-radius);
  color:#fff;text-align:start;font-family:var(--rh-font-body);
  background-color:#12876f;
  background-image:
    radial-gradient(46% 70% at 88% 8%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(55% 90% at 4% 100%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(125deg,#0b5c50 0%,#12876f 32%,#19a891 62%,var(--rh-color-teal) 100%);
}
.wp-block-group.is-style-rihlati-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.35) 1.2px, transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 30% 20%, #000 0%, transparent 70%);mask-image:radial-gradient(circle at 30% 20%, #000 0%, transparent 70%);
}
/* photo variant: full-cover image/slider layer behind the copy */
.wp-block-group.is-style-rihlati-hero.rh-hero--photo{min-height:min(64vh,520px);display:flex;flex-direction:column;justify-content:flex-end;background:var(--rh-color-deep);}
.wp-block-group.is-style-rihlati-hero.rh-hero--photo::before{display:none;}
/* optional photo/slider layer: an element with class rh-hero__bg inside the hero */
.is-style-rihlati-hero .rh-hero__bg{position:absolute;inset:0;z-index:0;}
.is-style-rihlati-hero > :not(.rh-hero__bg){position:relative;z-index:1;}
.is-style-rihlati-hero.rh-hero--center{text-align:center;}

.is-style-rihlati-hero .rh-hero__eyebrow{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:5px 12px;
  font:700 var(--rh-type-eyebrow)/1.2 var(--rh-font-body);letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;
}
.is-style-rihlati-hero .rh-hero__title{
  margin:0 0 12px;max-width:none;
  font-family:var(--rh-font-display);font-weight:700;font-size:var(--rh-type-h1);line-height:1.15;letter-spacing:-.01em;color:#fff;
}
.is-style-rihlati-hero .rh-hero__lead{
  margin:0 0 22px;max-width:520px;
  font-size:var(--rh-type-lead);line-height:1.6;color:rgba(255,255,255,.84);
}
.is-style-rihlati-hero.rh-hero--center .rh-hero__lead{margin-inline:auto;}
.is-style-rihlati-hero .rh-hero__title em{font-style:normal;}
.wp-block-group.is-style-rihlati-hero.rh-hero--photo{align-items:flex-start;}
.is-style-rihlati-hero > :last-child{margin-bottom:0;}

/* buttons inside the hero (core/buttons) */
.is-style-rihlati-hero .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:0;}
.is-style-rihlati-hero.rh-hero--center .wp-block-buttons{justify-content:center;}
.is-style-rihlati-hero .wp-block-button{margin:0;}
.is-style-rihlati-hero .wp-block-button__link{
  display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;border:1.5px solid #fff;
  background:#fff;color:var(--rh-color-deep);font:700 14.5px/1.2 var(--rh-font-body);text-decoration:none;
  box-shadow:0 14px 30px rgba(0,0,0,.22);transition:transform .2s;
}
.is-style-rihlati-hero .wp-block-button__link:hover{transform:translateY(-2px);}
.is-style-rihlati-hero .wp-block-button.is-style-outline .wp-block-button__link{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5);box-shadow:none;}

/* two-column hero (copy + media) */
.is-style-rihlati-hero .wp-block-columns.rh-hero__cols{display:flex;flex-wrap:nowrap;align-items:center;gap:44px;margin:0;}
.is-style-rihlati-hero .rh-hero__cols > .wp-block-column{flex:1 1 0;min-width:0;margin:0;}

/* ---------- STATS ---------- */
.rh-stats{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px;padding:0;list-style:none;}
.rh-hero--center .rh-stats,.rh-stats.rh-stats--center{justify-content:center;}
.rh-stat{
  display:flex;flex-direction:column;gap:3px;min-width:104px;margin:0;padding:12px 18px;box-sizing:border-box;
  border-radius:16px;background:#fff;border:1px solid #e9ebef;box-shadow:0 2px 8px rgba(18,21,26,.05);text-align:start;
}
.rh-stat__num{font:800 26px/1.05 var(--rh-font-display);letter-spacing:-.02em;color:var(--rh-color-deep);}
.rh-stat__plus{color:var(--rh-color-teal);margin-inline-end:1px;}
.rh-stat__label{font:600 11px/1.3 var(--rh-font-body);letter-spacing:.05em;text-transform:uppercase;color:var(--rh-color-mist);}
/* on the hero (and variant light): glass tiles, white numbers, mint plus */
.is-style-rihlati-hero .rh-stat,.rh-stats--light .rh-stat{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);box-shadow:none;}
.is-style-rihlati-hero .rh-stat__num,.rh-stats--light .rh-stat__num{color:#fff;}
.is-style-rihlati-hero .rh-stat__plus,.rh-stats--light .rh-stat__plus{color:var(--rh-color-mint);}
.is-style-rihlati-hero .rh-stat__label,.rh-stats--light .rh-stat__label{color:rgba(255,255,255,.74);}
.rh-stats--dark .rh-stat{background:#fff;border-color:#e9ebef;}
.rh-stats--dark .rh-stat__num{color:var(--rh-color-deep);}
.rh-stats--dark .rh-stat__plus{color:var(--rh-color-teal);}
.rh-stats--dark .rh-stat__label{color:var(--rh-color-mist);}

@media (max-width:860px){
  .is-style-rihlati-hero .wp-block-columns.rh-hero__cols{flex-direction:column;align-items:stretch;gap:24px;}
  /* the media column is desktop decoration (Home planner mock, About app visual) */
  .is-style-rihlati-hero .rh-hero__cols > .rh-hero__media{display:none;}
}
@media (max-width:600px){
  .wp-block-group.is-style-rihlati-hero{padding:var(--rh-hero-pad-mobile);border-radius:var(--rh-radius-mobile);margin-top:16px;margin-bottom:24px;}
  .wp-block-group.is-style-rihlati-hero.rh-hero--photo{min-height:380px;}
  .is-style-rihlati-hero .rh-hero__title{font-size:var(--rh-type-h1-mobile);line-height:1.22;margin-bottom:8px;}
  .is-style-rihlati-hero .rh-hero__lead{font-size:var(--rh-type-lead-mobile);line-height:1.5;margin-bottom:16px;}
  .is-style-rihlati-hero .rh-hero__eyebrow{margin-bottom:10px;}
  .is-style-rihlati-hero .wp-block-buttons{gap:8px;}
  .is-style-rihlati-hero .wp-block-button__link{padding:11px 16px;font-size:13px;}
  .rh-stats{gap:8px;margin-bottom:16px;flex-wrap:nowrap;}
  .rh-stat{flex:1 1 0;min-width:0;padding:10px 10px;border-radius:14px;}
  .rh-stat__num{font-size:19px;}
  .rh-stat__label{font-size:9.5px;letter-spacing:.03em;}
  /* search tools placed inside the hero (All Experiences) stay readable on teal */
  .is-style-rihlati-hero .ask-ai-btn{background:rgba(255,255,255,.94);border-color:#fff;}
}

/* rihlati-ui-fixes-2 BEGIN (stg-ui-fixes-2.sh) - text on photos and dark surfaces.
 * WordPress prints the theme's global heading colour (h1-h6 { color: contrast }) on the hand-written pages too: it
 * comes back as a dependency of the block-style-variation styles that the new hero buttons need. That rule beats the
 * white which the photo cards and the dark map banner give their text, so their headings follow the surface again. */
.exp-tile :is(h1, h2, h3, h4, h5, h6),
.map-banner :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
/* Photo cards: a scrim that grows with the text block (any number of title lines), so white text keeps WCAG AA
 * contrast on any photo or placeholder; the card's own gradient stays underneath. */
.exp-tile:not(.viewall) .exp-tile-content { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.exp-tile:not(.viewall) .exp-tile-content::before {
	content: "";
	position: absolute;
	inset: -56px 0 0 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(6, 14, 14, 0) 0, rgba(6, 14, 14, .74) 56px, rgba(6, 14, 14, .9) 100%);
}
/* rihlati-ui-fixes-2 END */

/* rihlati:price-dupes:start */
/* 23 Oct 2026: the Rihlati price block (.rhl-pb) is the single price on a tour page.
   Tourfic's own "From" lines repeat it with a different basis (cheapest person type / net of fees). */
body:has(.rhl-pb) .tf-booking-form-data .tf-booking-price { display: none !important; }
body:has(.rhl-pb) .tf-trip-info .tf-trip-pricing,
body:has(.rhl-pb) .tf-trip-info .tf-trip-person-info,
body:has(.rhl-pb) .tf-trip-info [class*="tf-person-info"] { display: none !important; }
/* rihlati:price-dupes:end */