/* ==========================================================================
   Hisn teaser: our own styles
   Colors, sizes and spacing come from tokens.css (the var(--...) names).
   Sections:  1. Base   2. Header   3. Hero   4. Form   5. Bottom pattern   6. Mobile
   ========================================================================== */


/* 1. BASE ------------------------------------------------------------------ */

/* Makes width/height include padding and border. Much easier to reason about. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Hides something visually but keeps it for screen readers (used by the email label) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Visible keyboard focus: a mint outline when someone tabs to a link/button/input */
:focus-visible {
  outline: 3px solid var(--hisn-mint);
  outline-offset: 3px;
}
/* Inside the form the input and button sit edge to edge, so an outline drawn
   OUTSIDE the box overlaps its neighbour. A negative offset draws the ring just
   inside the element instead: still clearly visible, but it overlaps nothing. */
.notify-input:focus-visible,
.notify-button:focus-visible {
  outline-offset: -3px;
}

/* The button is mint, so a mint ring on it would be invisible. Use the dark
   background colour instead: same thickness, clearly visible. */
.notify-button:focus-visible {
  outline-color: var(--hisn-deep);
}

/* The whole page: full-screen height, dark radial background, content stacked in a column */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;          /* better on phones; browsers that don't know it use 100vh */
  overflow: hidden;            /* nothing is allowed to cause sideways scrolling */
  background: var(--hisn-bg-radial);
}

/* The grid lines sit behind everything, covering the whole page */
.grid-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}


/* 2. HEADER ---------------------------------------------------------------- */

.site-header {
  position: relative;          /* position + z-index keeps it above the grid layer */
  z-index: 1;
  display: flex;
  justify-content: space-between;   /* one logo at each end */
  align-items: center;
  padding: 36px var(--gutter) 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  height: 48px;
  width: auto;
}

.brand-name {
  font-size: 30px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--hisn-white);
}

.partner-logo {
  height: 40px;
  width: auto;
}


/* 3. HERO (badge, phrase, dots, tagline) ----------------------------------- */

.hero {
  position: relative;
  z-index: 1;
  flex: 1;                         /* take all the space between header and bottom pattern */
  display: flex;
  flex-direction: column;
  align-items: center;             /* centre horizontally */
  justify-content: center;         /* centre vertically */
  padding: var(--sp-12) var(--gutter);   /* equal space above and below keeps it centred */
  text-align: center;
}

/* "قريبًا" with a small mint square on each side (drawn by CSS, not images) */
.badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 42px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--hisn-mint);
}

.badge::before,
.badge::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--hisn-mint);
}

/* The big phrase */
.phrase {
  display: flex;                   /* lets us centre the text inside the reserved space */
  align-items: center;
  justify-content: center;
  max-width: 900px;
  /* Reserve room for two lines so the dots below never jump when a shorter phrase appears */
  min-height: calc(2 * var(--lh-display) * 1em);
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  color: var(--hisn-white);
}

.phrase-text {
  display: block;
  text-wrap: balance;              /* splits long phrases into evenly sized lines */
}

/* The highlighted part: mint, as the design requires */
.phrase-accent {
  color: var(--hisn-mint);
}

/* Indicator dots */
.dots {
  display: flex;
  gap: 10px;
  margin-top: 40px;
}

.dot {
  width: 6px;
  height: 6px;
  background: var(--hisn-mint-line);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}

.dot.is-active {
  width: 28px;                     /* the active dot stretches into a bar */
  background: var(--hisn-mint);
}

.tagline {
  max-width: 560px;
  margin: var(--sp-4) 0 0;
  font-size: 19px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--hisn-ink-soft);
  text-wrap: balance;
}


/* 4. EMAIL FORM (visual only for now) -------------------------------------- */

.notify-form {
  position: relative;              /* the note below is positioned relative to the form */
  display: flex;                   /* input and button side by side */
  width: min(100%, 520px);
  margin-top: var(--sp-4);
}

.notify-input {
  flex: 1;                         /* the input takes all the space the button leaves */
  min-width: 0;                    /* allows it to shrink on small screens */
}

.notify-button {
  flex-shrink: 0;                  /* the button never gets squashed */
  white-space: nowrap;
}

/* While an address is being sent, the fields are briefly disabled */
.notify-input:disabled,
.notify-button:disabled {
  cursor: progress;
  opacity: 0.7;
}

.notify-button:disabled:hover {
  background: var(--hisn-mint);
}

/* Status message under the form (success, error, sending). Absolute positioning
   keeps it from pushing the rest of the page up when it appears and disappears. */
.notify-note {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 12px 0 0;
  min-height: 1.4em;               /* reserve its line so nothing shifts */
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--hisn-ink-soft);
}

.notify-note.is-success { color: var(--hisn-mint); }
.notify-note.is-error   { color: #FFB4A8; }      /* soft red: 7.2:1 on the background */
.notify-note.is-pending { color: var(--hisn-ink-soft); }

/* Contact line under the form. The status message above is absolutely
   positioned, so the top margin has to clear it (12px gap + one line). */
.contact {
  margin: 56px 0 0;
  font-size: var(--fs-small);
  color: var(--hisn-ink-soft);
}

.contact a {
  color: var(--hisn-mint);
  text-decoration: none;
  border-bottom: 1px solid var(--hisn-mint-line);
}

.contact a:hover,
.contact a:focus-visible {
  color: var(--hisn-mint-hover);
  border-bottom-color: currentColor;
}
/* 5. BOTTOM PATTERN -------------------------------------------------------- */

/* Row of small outlined squares. brick.svg is stretched into 24px-wide tiles;
   the square sits in the middle of each tile, which gives us the spacing.
   It is positioned absolutely at the bottom so it doesn't take up space in the layout. */
.brick-row {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 54px;                    /* 28px strip + 26px gap */
  width: 576px;                    /* 24 tiles x 24px */
  max-width: 100%;
  height: 10px;
  margin: 0 auto;
  background: url("../motifs/brick.svg") repeat-x left top / 24px 10px;
}

/* The mint strip. The teeth come from the kit's .hisn-crenellation class (18px high);
   the border-bottom adds the solid 10px base, so 28px in total. */
.crenellation {
  position: relative;
  z-index: 1;
  box-sizing: content-box;
  border-bottom: 10px solid var(--hisn-mint);
}


/* Respect "reduce motion": if the visitor turned animation off in their device
   settings, switch every transition off. The JavaScript already skips the phrase
   fade; this covers the dots and the button colour too. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}


/* 6. MOBILE ---------------------------------------------------------------- */
/* Everything above is the desktop design. The rules below only CHANGE what needs
   to be different on smaller screens. A @media block applies only when the browser
   window matches the condition, e.g. (max-width: 639px) = "640px wide or narrower". */

/* Phones: below 640px */
@media (max-width: 639px) {

  /* Smaller logos, but still clearly visible */
  .site-header {
    padding-top: 24px;
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    height: 34px;
  }

  .brand-name {
    font-size: 21px;
  }

  .partner-logo {
    height: 28px;
  }

  /* Less empty space above and below the content */
  .hero {
    padding-block: var(--sp-6);
  }

  .badge {
    gap: 11px;
    font-size: 13px;
  }

  .badge::before,
  .badge::after {
    width: 6px;
    height: 6px;
  }

  /* The phrase is already smaller: tokens.css makes it 32px on narrow screens.
     Phones wrap it into up to four lines, so reserve four lines of space. */
  .phrase {
    min-height: calc(4 * var(--lh-display) * 1em);
  }

  .dots {
    gap: 8px;
  }

  .tagline {
    margin-top: 16px;
    font-size: 15px;
  }

  /* Stack the input above the button, both full width */
  .notify-form {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
  }

  .notify-input {
    flex: none;                    /* in a column, "flex: 1" would fight with the height */
    padding-block: 15px;
    font-size: 15px;
  }

  .notify-button {
    width: 100%;                   /* full width and about 52px tall: easy to tap */
    font-size: 15px;
  }
    .contact {
    margin-top: 46px;
  }
  /* The row of small squares is a desktop-only detail */
  .brick-row {
    display: none;
  }

  /* Smaller crenellation: 26px teeth, 14px high, with an 8px base */
  .crenellation {
    height: 14px;
    background: repeating-linear-gradient(to left, var(--hisn-mint) 0 26px, transparent 26px 52px);
    border-bottom-width: 8px;
  }
}