/* ==========================================================================
   TrustUs — shared site chrome (header + footer), standalone, no Divi.

   The header lands in this file too; keep each area under its own banner and
   keep the class prefixes distinct (`tu-hd-` header, `tu-ft-` footer) so the
   two can be edited without reading each other.

   Visual language is inherited from assets/homepage.css: the same #a7001e,
   the same 1180px column and clamp() gutter, the same quiet-neutrals-around-
   one-loud-red logic. Only footer-specific values are declared below.
   ========================================================================== */


/* ==========================================================================
   ---- Footer ----
   ========================================================================== */

.tu-ft {
  /* Footer-local tokens only. Anything shared with the homepage is restated
     as a literal here rather than imported, because site.css has to stand up
     on pages that never load homepage.css. */
  --ft-red: #a7001e;
  --ft-dark: #333333;
  --ft-wrap: 1180px;
  --ft-gutter: clamp(20px, 5vw, 64px);

  /* Link text on the dark panel. Two steps of white: headings full strength,
     links held back so the headings still lead. */
  --ft-on-dark: rgba(255, 255, 255, .61);
  --ft-hairline: rgba(231, 234, 243, .33);

  /* The CTA card keeps the softer 12px radius the original used — it reads as
     a panel, not as a button, so it does not share the 4px button radius. */
  /* The card is a surface; what is inside it is not. The submit button was
     taking this too, so the only rounded button on the site was the one in the
     footer while every button on the page was near-square. */
  --ft-card-radius: var(--r-surface, 12px);

  margin-top: 100px;
  font-family: 'Almarai', Tahoma, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.85;

  /* White, deliberately. The artwork below is not a watermark on a dark panel —
     it IS the dark shape, drawn with a curved top edge and transparent above
     it. Painting this element dark filled that transparent area in and the
     curve disappeared; the white here is what the curve is cut out of. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ffffff;
}

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

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

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

.tu-ft a { text-decoration: none; }

.tu-ft a:focus-visible,
.tu-ft button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.tu-ft__wrap {
  width: 100%;
  max-width: var(--ft-wrap);
  margin-inline: auto;
  padding-inline: var(--ft-gutter);
}

/* CTA card ---------------------------------------------------------------
   The white band the card floats on. The dark panel starts where this band
   ends, which is the same white-above / dark-below split the Divi gradient
   faked with colour stops. */
/* Transparent, not white: the footer itself is the dark surface now, and this
   wrapper's white was painting over it above the booking card — which is where
   the artwork's curve is meant to show. */
.tu-ft__top {
  background: transparent;
  padding: 26px var(--ft-gutter) 44px;
}

.tu-ft__cta {
  max-width: 1080px;
  margin-inline: auto;
  /* Enough space for the artwork's curve to read around the card, but no more:
     at 72px the card sat noticeably low in the footer. */
  margin-block: 34px 0;
  padding: 3rem;
  background: var(--ft-red);
  border-radius: var(--ft-card-radius);
  overflow: hidden;
  display: grid;
  /* The form gets the larger share: it is the working half of this card, and
     at 1fr it was squeezed narrow enough to stack every field. */
  grid-template-columns: .82fr 1.18fr;
  gap: 32px;
  align-items: center;
}

/* In RTL the first grid item lands on the right, which is where the copy
   belongs; the form takes the left half. The DOM order is also the reading
   order once the grid collapses, so no reordering rule is needed on mobile. */
.tu-ft__cta-copy { color: #ffffff; }

.tu-ft__cta-copy h2 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
}

.tu-ft__cta-copy p {
  margin: 0;
  color: rgba(255, 255, 255, .81);
  font-size: 16px;
}

.tu-ft__cta-form { min-width: 0; }

/* The Zoho block ships its own <style>; it paints itself white on a 12px
   radius, so it only needs the radius clipped to match the card. */
.tu-ft__cta-form > form {
  border-radius: var(--ft-card-radius);
  overflow: hidden;
}

/* The live site's footer artwork: the white curve that cuts into the top edge
   and the outsized handshake watermark behind the columns. It was the main
   thing separating our footer from theirs — ours was a flat grey rectangle.
   Its own layer, sized to the footer's full width so the curve lands where the
   drawing puts it. */
.tu-ft::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  /* In the theme, not in uploads. The old path climbed three directories out
     of the theme to find it, which is true of a default install and of nothing
     else — and it is artwork the theme cannot render without. */
  background-image: url("footer-bg.svg");
  background-repeat: no-repeat;
  /* cover from the top-left, which is what the live site uses. `100% auto` was
     the earlier guess: it pinned the drawing to the footer's width, so the
     curve landed part-way down the booking card and the charcoal ran out before
     the bottom, leaving a grey shape that belonged to neither. Covering lets the
     one drawing carry the curve and the whole charcoal field, as it was made to. */
  background-position: 0% 0%;
  background-size: cover;
  pointer-events: none;
}

/* Dark panel -------------------------------------------------------------- */
.tu-ft__dark {
  position: relative;
  /* No background of its own. The artwork behind the whole footer is the dark;
     a second charcoal here was what produced the hard horizontal edge partway
     down. */
  background: transparent;
  color: var(--ft-on-dark);
  padding-block: 56px 32px;
}

/* Link columns ------------------------------------------------------------ */
.tu-ft__cols {
  display: grid;
  /* Contact first (the right-hand edge in RTL, where reading starts) through to
     the identity block last, matching the live site. Ours ran the other way,
     which put the logo where the reader lands first. */
  grid-template-columns: repeat(4, 1fr) 1.4fr;
  gap: 40px 32px;
  padding-bottom: 40px;
}
/* Nav columns default to order 0, so the contact block has to go negative to
   land ahead of them at the reading edge; the identity block trails. */
.tu-ft__col--contact { order: -1; }
.tu-ft__col--id { order: 1; }

.tu-ft__h {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.tu-ft__links li + li { margin-top: 10px; }

.tu-ft__links a {
  color: var(--ft-on-dark);
  font-size: 15px;
  line-height: 1.7;
  transition: color .18s ease;
}

.tu-ft__links a:hover,
.tu-ft__links a:focus-visible { color: #ffffff; }

/* Identity column --------------------------------------------------------- */
.tu-ft__logo {
  width: 200px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 24px;
  /* The company details under it are Latin text and are set text-align:left, so
     the logo has to sit on the same physical edge. Left as a block it took the
     inline start, which in this RTL page is the right — the two were aligned to
     opposite sides of the same column.
     Physical margins on purpose: margin-inline flips with direction, which is
     exactly the behaviour being corrected here. */
  margin-left: 0;
  margin-right: auto;
}

/* The company name, registration number and address are Turkish/Latin data.
   They are forced LTR so the punctuation and digits do not get reflowed by
   the surrounding RTL context. */
.tu-ft__id-list {
  direction: ltr;
  text-align: left;
}

.tu-ft__id-list li,
.tu-ft__contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.7;
}

.tu-ft__id-list li + li,
.tu-ft__contact li + li { margin-top: 12px; }

/* Icons sit on the text's first line rather than centring against a block
   that may wrap to three lines. */
.tu-ft__icon,
.tu-ft__icon-img {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  opacity: .8;
}

.tu-ft__contact li a {
  color: var(--ft-on-dark);
  transition: color .18s ease;
}

.tu-ft__contact li a:hover,
.tu-ft__contact li a:focus-visible { color: #ffffff; }

/* Social + language ------------------------------------------------------- */
.tu-ft__social-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 24px;
  border-bottom: 1px solid var(--ft-hairline);
}

/* RTL puts the first flex item on the right; the original AR footer had the
   social icons on the right and the language link on the left. */
.tu-ft__social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tu-ft__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(247, 250, 255, .15);
  color: #ffffff;
  transition: background-color .18s ease;
}

.tu-ft__social a:hover,
.tu-ft__social a:focus-visible { background: var(--ft-red); }

.tu-ft__social .tu-ft__icon { margin-top: 0; opacity: 1; }

.tu-ft__lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-control, 3px);
  background: rgba(247, 250, 255, .1);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  transition: background-color .18s ease;
}

.tu-ft__lang:hover,
.tu-ft__lang:focus-visible { background: var(--ft-red); }

.tu-ft__lang .tu-ft__icon { margin-top: 0; opacity: 1; }

/* Copyright --------------------------------------------------------------- */
.tu-ft__legal { padding-top: 28px; }

.tu-ft__copy {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  font-weight: 400;
}

.tu-ft__about {
  margin: 0;
  color: rgba(255, 255, 255, .43);
  font-size: 14px;
  text-align: center;
}

/* --- The registrations row, in the footer -------------------------------------
   White cuts of the marks on the charcoal, sized by shape rather than by one
   box: a 5:1 wordmark and a 1:1 seal set to a single height read as two
   different weights, so each shape gets its own height and the three come out
   as equals. The same three heights the hero uses, for the same reason. */
.tu-ft__creds {
  /* Space, not a rule. The hairline under it read as a second divider in a
     footer that already has one above the copyright. */
  margin-bottom: clamp(40px, 4.5vw, 64px);
  text-align: center;
}
.tu-ft__creds-h {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  color: #fff;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 800;
}
/* Three tracks, not three flex items: as flex items with a max-width they
   overran a phone's width and pushed a mark off the right edge. Tracks divide
   whatever there is. */
.tu-ft__creds-row {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  gap: clamp(24px, 4vw, 64px);
  max-width: 860px;
}
/* Two parts on the front because `.tu-ft ul { margin: 0 }` is (0,1,1) and beats
   a single class: with margin-inline losing, the capped row sat flush against
   the container's right edge in RTL rather than in the middle of it. */
.tu-ft__creds .tu-ft__creds-row { margin-inline: auto; }
@media (max-width: 560px) {
  .tu-ft__creds-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A fixed slot for the mark, not a column that shrinks to it: the three marks
   are three different heights, and stacked as plain flex items their labels
   started at three different lines. The slot is one row tall for all of them
   and each mark is centred in it, so the names sit on one line. */
.tu-ft__creds-row li {
  display: grid;
  grid-template-rows: clamp(42px, 3.6vw, 52px) auto;
  justify-items: center;
  align-items: center;
  gap: 14px;
  max-width: 210px;
}
.tu-ft__creds-row img {
  display: block; width: auto;
  max-width: 160px;
  opacity: .82;
}
.tu-ft__creds-row li[data-shape="block"] img { height: clamp(34px, 2.9vw, 42px); }
.tu-ft__creds-row li[data-shape="wide"]  img { height: clamp(22px, 1.8vw, 26px); }
.tu-ft__creds-row li[data-shape="seal"]  img { height: clamp(42px, 3.6vw, 52px); }
.tu-ft__creds-row span {
  color: var(--ft-on-dark);
  font-size: 13px;
  line-height: 1.6;
}

/* --- The footer without its booking card -------------------------------------
   No card and no curve. The drawing's curve exists to arc over the booking
   card; with the card gone it only ate into the footer — clearing it cost
   around 460px of empty ground above the columns, which made the footer taller
   than the page it was closing. Flat charcoal from the first pixel instead, and
   the registrations row is what opens it.

   The charcoal is the same #383838 the drawing ends on, so the two versions of
   the footer are the same colour; and the 100px above it goes, because that gap
   is room for the curve to rise into and there is no curve. The phone already
   drops the drawing for its own reasons, so nothing changes there. */
.tu-ft--nocta {
  /* --ft-dark, not the #383838 the phone falls back to: the drawing's charcoal
     is a gradient and the end this footer shows is its #333333 one. Matching it
     is what makes the join invisible where the drawing stops and the flat
     colour carries on. */
  background: var(--ft-dark);
  margin-top: 0;
}
/* The drawing stays — only the curve goes. It is scrolled up by exactly the
   depth of its own curve (16.6% of its width, measured off the file), so what
   is left is the charcoal field and the handshake watermark. `.tu-ft`'s own
   overflow:hidden takes the part that now hangs above.
   
   Width-driven rather than cover, so that 16.6% is a fixed fraction of the
   viewport and not a function of the footer's height; and below where the
   drawing now ends, the flat #383838 above takes over — the drawing's gradient
   ends on that same value, so the two meet without a seam. */
.tu-ft--nocta::before {
  background-size: 100% auto;
  background-position: 0 -16.8vw;
}
.tu-ft--nocta .tu-ft__dark { padding-block: clamp(48px, 5vw, 72px) 32px; }

/* Responsive -------------------------------------------------------------- */

/* Tablet: the CTA stacks and the five columns fold to two. The identity
   column keeps the full width so the address does not wrap to five lines. */
@media (max-width: 1024px) {
  .tu-ft__cta {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 2.25rem;
  }

  .tu-ft__cols {
    grid-template-columns: 1fr 1fr;
    gap: 36px 32px;
  }

  .tu-ft__col--id { grid-column: 1 / -1; }
}

/* Phone: one column, and the CTA loses its side padding so the form keeps a
   usable width. The original dropped to 20px/10px here. */
@media (max-width: 600px) {
  .tu-ft { margin-top: 56px; }

  .tu-ft__top { padding: 0 0 32px; }

  .tu-ft__cta {
    padding: 20px 10px;
    border-radius: 0;
  }

  .tu-ft__cta-form > form { border-radius: var(--ft-card-radius); }

  .tu-ft__cols {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }

  .tu-ft__dark { padding-block: 40px 24px; }

  .tu-ft__social-row {
    justify-content: center;
    gap: 16px;
  }

  .tu-ft__about,
  .tu-ft__copy { text-align: center; }
}


/* --- Footer on a phone ---------------------------------------------------
   The artwork is one wide drawing: its curve is shallow across a laptop and
   becomes a deep dark blob when squeezed to 390px, sitting right above the
   booking card. It is decoration, so on a phone it goes and the footer simply
   starts dark. */
@media (max-width: 700px) {
  .tu-ft { background: #383838; }
  .tu-ft::before { display: none; }

  /* The copy sits above the form here rather than beside it, so it reads as the
     section's own heading — centred, and a step up in size. At clamp()'s floor
     it was 21px, barely above the paragraph under it. */
  .tu-ft__cta-copy { text-align: center; }
  .tu-ft__cta-copy h2 { font-size: 26px; line-height: 1.35; margin-bottom: 12px; }
  .tu-ft__cta-copy p { font-size: 15px; }

  /* No curve to clear any more, so the card starts at the top of the footer. */
  .tu-ft__top { padding-top: 0; }
  .tu-ft__cta { margin-block: 0; }

  .tu-ft__cta { padding: 20px; }
  .tu-ft__cta-form #form { padding: 18px; }
}