/* ---------------------------------------------------------------------------
   Fadzri Rashid (formerly Fakkah Fuzz), fadzrirashid.com
   Static rebuild of the WordPress/Elementor original. Values below were taken
   from the computed styles of the live page so the layout matches 1:1.

   Breakpoints match Elementor's: tablet <= 1024px, mobile <= 767px.
   --------------------------------------------------------------------------- */

:root {
  --container-max-width: 1140px;   /* Elementor boxed container */
  --con-padding: 10px;             /* Elementor default container padding */
  --widgets-spacing: 20px;         /* Elementor default gap between widgets */
  --red: #ff0000;
  --text-muted: #7a7a7a;           /* Elementor global "text" colour */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: #fff;          /* sits behind the 0.87-opacity black bars */
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-size: 21.7632px;            /* inherited base size on the original */
  line-height: 1.4;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

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

h1, h2 { margin: 0; line-height: 1; font-weight: 600; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- hero ---- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--widgets-spacing);
  min-height: 1126px;
  padding: var(--con-padding);
  overflow: hidden;
}

/* Replaces what was a background-image. object-fit: cover with centred
   positioning renders identically to background-size: cover, and unlike a
   background it is markup a crawler can see. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero > picture { position: static; }
.hero > :not(picture) { position: relative; z-index: 1; }

.hero__title {
  margin: 25px 0 0;
  text-align: center;
  font-size: 173px;
  color: #fff;
}

/* --------------------------------------------------- full-width bars ------ */
/* Black bars are a black overlay at 0.87 opacity over the white page, exactly
   as Elementor renders them (so they read as ~#212121, not pure black). */

.bar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 var(--con-padding);
}

.bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: 0.87;
  transition: background 0.3s, opacity 0.3s;
}

.bar__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--widgets-spacing);
  width: 100%;
  max-width: min(100%, var(--container-max-width));
  margin-inline: auto;
  padding: var(--con-padding) 0;
}

.bar--tickets,
.bar--bookings { min-height: 208px; }

.bar__title {
  margin: 55px 0 0;
  text-align: center;
  font-size: 81px;
  color: #fff;
}

.bar__title a { transition: color 0.8s; }
.bar__title a:hover,
.bar__title a:focus { color: #fd0404; }

.bar__title--alt a:hover,
.bar__title--alt a:focus { color: #e90000; }

.bar--spacer { min-height: 0; }
.spacer { height: 50px; }

/* ------------------------------------------------------------ poster ----- */
/* The Jakarta artwork. Square, so it is capped rather than allowed to fill
   the column, and captioned because the date printed on it is one show and
   the page lists eight. */

.poster {
  width: 100%;
  max-width: 420px;
  margin: 30px auto 0;
  text-align: center;
}

.poster__link { display: block; }

.poster__img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s;
}

.poster__link:hover .poster__img,
.poster__link:focus-visible .poster__img { opacity: 0.85; }

.poster__caption {
  margin: 12px 0 0;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.poster__caption a {
  color: #bdbdbd;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s;
}

.poster__caption a:hover,
.poster__caption a:focus-visible { color: #fd0404; }

@media (max-width: 767px) {
  .poster { max-width: 320px; margin-top: 22px; }
  .poster__caption { font-size: 12px; }
}

/* ------------------------------------------------------- tour dates ------ */
/* Added after the 1:1 rebuild. Uses the same bar shell, Bebas Neue and red as
   the rest of the page, so it reads as part of the original design. */

.bar--tour { min-height: 0; }

.bar__title--tour { margin: 45px 0 0; }

/* The tour's own name, under the page heading. Smaller so the two do not
   compete, but still a real h2 so the tour name is a heading in its own right. */
.tour__name {
  margin: 40px 0 0;
  font-size: 46px;
  color: #fff;
}

@media (max-width: 767px) { .tour__name { font-size: 34px; margin-top: 30px; } }

.tour__intro {
  margin: 14px 0 0;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: #cfcfcf;
}

/* One grid for the whole list rather than one per row, so the date column
   sizes itself to the widest label and every row still lines up. A fixed
   column width put the two-night Kuala Lumpur date on top of the city. */
.tour {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;          /* equal-height cells, so the rules line up */
  column-gap: 0;                 /* cells pad instead, so the rules join up */
  list-style: none;
  width: 100%;
  max-width: 880px;
  margin: 26px auto 45px;
  padding: 0;
}

.tour__row { display: contents; }

/* Padding lives on the cells rather than in a column gap, so the three
   border-tops meet and read as one rule across the row. */
.tour__row > * {
  padding: 17px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.tour__date  { display: flex; align-items: center; padding-right: 30px; }
.tour__where { justify-content: center; padding-right: 30px; }

/* The button carries its own border, which would replace the row rule, so it
   sits inside a cell of its own. */
.tour__action { display: flex; align-items: center; justify-content: flex-end; }

.tour__row:last-child > * { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }

.tour__date {
  font-size: 30px;
  letter-spacing: 0.03em;
  color: #fff;
}

.tour__where { display: flex; flex-direction: column; gap: 2px; }

.tour__city {
  font-size: 30px;
  letter-spacing: 0.03em;
  color: #fff;
}

.tour__venue {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  line-height: 1.35;
  color: var(--text-muted);
}

.tour__cta {
  padding: 7px 22px 5px;
  border: 1px solid #fff;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: #fff;
  white-space: nowrap;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.tour__cta:hover,
.tour__cta:focus-visible {
  background-color: #fd0404;
  border-color: #fd0404;
  color: #fff;
}

@media (max-width: 767px) {
  .tour { display: block; }

  .tour__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 14px;
    padding: 15px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .tour__row > * { padding: 0; border-top: 0; }
  .tour__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .tour__row:last-child > * { border-bottom: 0; }
  .tour__date { grid-column: 1; font-size: 25px; }
  .tour__action { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .tour__cta  { font-size: 19px; padding: 6px 16px 4px; }
  .tour__where { grid-column: 1; }
  .tour__city { font-size: 25px; }
  .tour__intro { font-size: 21px; }
}

/* ---------------------------------------------------- clickable tiles ----- */
/* Each tile is a link with a background-image overlay that cross-fades to a
   second image on hover, at 0.5 opacity, matching the original. */

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--widgets-spacing);
  padding: var(--con-padding);
  min-height: 59vh;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  transition: background 0.3s, opacity 0.3s;
}

.tile:hover::before,
.tile:focus-visible::before { opacity: 0.5; }

.tile--thats-why::before {
  background-image: url("/assets/img/Fakkah_Fuzz_Netflix_Thats_Why.jpg");
  background-image: image-set(url("/assets/img/Fakkah_Fuzz_Netflix_Thats_Why.webp") type("image/webp"),
                              url("/assets/img/Fakkah_Fuzz_Netflix_Thats_Why.jpg") type("image/jpeg"));
}
.tile--thats-why:hover::before,
.tile--thats-why:focus-visible::before {
  background-image: url("/assets/img/Fakkah_Fuzz_Netflix_Thats_Why_Hover.jpg");
  background-image: image-set(url("/assets/img/Fakkah_Fuzz_Netflix_Thats_Why_Hover.webp") type("image/webp"),
                              url("/assets/img/Fakkah_Fuzz_Netflix_Thats_Why_Hover.jpg") type("image/jpeg"));
}

.tile--fuzz::before {
  background-image: url("/assets/img/Fadzri_Rashid_Fuzz_Fakkah_default.jpg");
  background-image: image-set(url("/assets/img/Fadzri_Rashid_Fuzz_Fakkah_default.webp") type("image/webp"),
                              url("/assets/img/Fadzri_Rashid_Fuzz_Fakkah_default.jpg") type("image/jpeg"));
}
.tile--fuzz:hover::before,
.tile--fuzz:focus-visible::before {
  background-image: url("/assets/img/Fadzri_Rashid_Fuzz_Fakkah_.jpg");
  background-image: image-set(url("/assets/img/Fadzri_Rashid_Fuzz_Fakkah_.webp") type("image/webp"),
                              url("/assets/img/Fadzri_Rashid_Fuzz_Fakkah_.jpg") type("image/jpeg"));
}

.tile--too-real {
  min-height: 62vh;
}
.tile--too-real::before {
  background-image: url("/assets/img/Fadzri_Rashid_Fakkah_Fuzz_Too_Real_Netflix_.jpg");
  background-image: image-set(url("/assets/img/Fadzri_Rashid_Fakkah_Fuzz_Too_Real_Netflix_.webp") type("image/webp"),
                              url("/assets/img/Fadzri_Rashid_Fakkah_Fuzz_Too_Real_Netflix_.jpg") type("image/jpeg"));
}
.tile--too-real:hover::before,
.tile--too-real:focus-visible::before {
  background-image: url("/assets/img/Fadzri_Rashid_Fakkah_Fuzz_Too_Real_Netflix_hover.jpg");
  background-image: image-set(url("/assets/img/Fadzri_Rashid_Fakkah_Fuzz_Too_Real_Netflix_hover.webp") type("image/webp"),
                              url("/assets/img/Fadzri_Rashid_Fakkah_Fuzz_Too_Real_Netflix_hover.jpg") type("image/jpeg"));
}

/* ------------------------------------------------------------- contact ---- */

.contact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--widgets-spacing);
  padding: 0 100px;
}

.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: 1;
}

.contact > * { position: relative; }

.contact__title {
  padding: 55px 0 0;
  text-align: start;
  font-size: 74px;
  color: var(--red);
}


/* form */

.form { margin: 18px 0 100px; }

.form__fields {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -23px;
}

.form__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin-bottom: 23px;
}

.form__group--submit { align-items: flex-end; }

.form__group--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

.form__label {
  display: block;
  flex-basis: 100%;
  padding-bottom: 2px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 21.7632px;
  font-weight: 400;
  color: var(--red);
}

.form__group--required .form__label::after {
  content: "*";
  color: red;
  padding-inline-start: 0.2em;
}

.form__field {
  flex-basis: 100%;
  flex-grow: 1;
  width: 100%;
  max-width: 100%;
  min-height: 59px;
  padding: 7px 20px;
  border: 1px solid #302626;
  border-radius: 5px;
  background-color: #0f0f0f;
  color: var(--text-muted);
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  vertical-align: middle;
}

textarea.form__field {
  height: 128px;   /* 4 rows at the original's line-height */
  resize: vertical;
}

.form__field::placeholder { color: inherit; font-family: inherit; opacity: 0.6; }
.form__field:focus { outline: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.form__field:focus-visible { border-color: #bb2d2d; }

.form__button {
  width: 100%;
  padding: 30px;
  border: none;
  border-radius: 48px;
  background-color: #bb2d2d;
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form__button:hover { background-color: #a52828; }
.form__button[disabled] { opacity: 0.65; cursor: default; }

.form__message {
  flex-basis: 100%;
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
}

.form__message:empty { display: none; }
.form__message--success { color: #00f578; }
.form__message--error { color: #ff9c00; }

/* ---------------------------------------------------- inner page head ---- */
/* Used by /about and /tour. The homepage keeps its full-bleed hero. */

.pagehead {
  padding: 58px var(--con-padding) 34px;
  background-color: #000;
  text-align: center;
}

/* Back button and title sit as one centred group, so the caret reads as
   belonging to the heading rather than floating in the corner. */
.pagehead__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.backlink {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.3s, border-color 0.3s;
}

.backlink svg { width: 38px; height: 38px; }

.backlink:hover,
.backlink:focus-visible {
  background-color: #fd0404;
  border-color: #fd0404;
}

.pagehead__title {
  margin: 0;
  font-size: 81px;
  line-height: 1;
  color: #fff;
}

@media (max-width: 1024px) {
  .pagehead__title { font-size: 66px; }
  .backlink { width: 66px; height: 66px; }
  .backlink svg { width: 32px; height: 32px; }
}

@media (max-width: 767px) {
  .pagehead { padding: 40px var(--con-padding) 24px; }
  .pagehead__title { font-size: 46px; }
  .pagehead__inner { gap: 16px; }
  .backlink { width: 52px; height: 52px; border-width: 2px; }
  .backlink svg { width: 25px; height: 25px; }
}

/* ------------------------------------------------------------- about ----- */

.bar--about { min-height: 0; }

.about {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: start;
  gap: 34px;
  width: 100%;
  max-width: 900px;
  margin: 22px auto 45px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #d2d2d2;
}

/* A real <img>, not a CSS background. Search engines can only pick a result
   thumbnail from markup they can see, and every other image here is a
   background-image, which they ignore. */
.about__photo {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(0.15);
}

.about p { margin: 0 0 18px; }
.about p:last-child { margin-bottom: 0; }

.about a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
}

.about a:hover,
.about a:focus-visible { color: #fd0404; }

/* ------------------------------------------------------------- blurb ----- */
/* Carries the search terms people actually type. Kept quiet on purpose:
   small, grey on black, and below the form so it competes with nothing. */

.blurb {
  padding: 0 var(--con-padding) 36px;
  background-color: #000;
}

/* Bebas Neue has no lowercase, so this reads as capitals. That suits a few
   short lines and would be punishing as a paragraph, which is why the link
   line below stays in Roboto. */
.blurb__lead {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 10px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-align: center;
  color: #6e6e6e;
}

.blurb__lead:last-of-type { margin-bottom: 0; }

.blurb__lead strong { font-weight: 400; color: #adadad; }

.blurb__note {
  width: 100%;
  max-width: 900px;
  margin: 20px auto 0;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  color: #5c5c5c;
}

.blurb a {
  color: #8a8a8a;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s;
}

.blurb a:hover,
.blurb a:focus-visible { color: #fff; }

@media (max-width: 1024px) {
  .blurb__lead { font-size: 23px; }
}

@media (max-width: 767px) {
  .blurb { padding-bottom: 28px; }
  .blurb__lead { font-size: 20px; letter-spacing: 0.02em; }
  .blurb__note { font-size: 12px; }
}

/* -------------------------------------------------------- social bar ------ */

.social {
  display: flex;
  flex-direction: column;
  min-height: 60px;
  padding: 0 var(--con-padding);
  background-color: #272727;
}

.social__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: min(100%, var(--container-max-width));
  margin-inline: auto;
  padding: var(--con-padding) 0;
}

.social__list {
  --icon-size: 43px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 29px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}

/* Section links, centred on their own line above the icons. */
.social__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  padding: 16px 0 0;
}

/* Bullet between the links, never before the first or after the last. */
.social__nav a + a::before {
  content: "\2022";
  display: inline-block;
  margin-right: 18px;
  color: var(--text-muted);
}

.social__nav a {
  font-size: 30px;
  letter-spacing: 0.04em;
  color: #fff;
  transition: color 0.3s;
}

.social__nav a:hover,
.social__nav a:focus-visible { color: #fd0404; }

.social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--icon-size) * 2);
  height: calc(var(--icon-size) * 2);
  border-radius: 50%;
  background-color: #69727d;
  color: #fff;
  transition: opacity 0.3s;
}

.social__icon:hover { opacity: 0.85; }

.social__icon svg {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: #fff;
}

.social__icon--facebook  { background-color: #3b5998; }
.social__icon--youtube   { background-color: #cd201f; }
.social__icon--x         { background-color: #000; }
.social__icon--instagram { background-color: #d35283; }
.social__icon--link      { background-color: #9c85b0; }

/* ------------------------------------------------------------- footer ----- */

.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 var(--con-padding);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
}

.footer__inner {
  position: relative;
  display: flow-root;
  width: 100%;
  max-width: min(100%, var(--container-max-width));
  margin-inline: auto;
  padding: var(--con-padding) 0;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-muted);
}

.footer__inner p { margin: 15px 0; line-height: 1.4; }

/* =========================================================== tablet ======= */

@media (max-width: 1024px) {
  :root { --container-max-width: 1024px; }

  .hero__title { font-size: 137px; }

  .tile,
  .tile--too-real { min-height: 31vh; }

  .bar--spacer,
  .bar--bookings { min-height: 290px; }

  .contact { margin: 0; }

  .contact__title,

  .form {
    align-self: center;
    padding: 0;
  }
}

/* =========================================================== mobile ======= */

@media (max-width: 767px) {
  :root { --container-max-width: 767px; }

  .hero { min-height: 88vh; }

  .hero__title {
    margin: 0 21px 21px;
    font-size: 66px;
  }

  .bar__title {
    margin: 0;
    padding: 47px 0 0;
    font-size: 54px;
  }

  .bar--bookings { min-height: 85px; }

  .bar__title--alt {
    margin: 40px 1px;
    padding: 0 11px;
    font-size: 49px;
  }

  .tile,
  .tile--too-real { min-height: 21vh; }

  .bar--spacer { min-height: 0; }
  .spacer { height: 14px; }

  .contact { padding: 13px; }

  .contact__title {
    margin: -1px;
    padding: 14px 0 0 10px;
    text-align: start;
    font-size: 43px;
  }


  .form {
    margin: -1px;
    padding: 10px;
  }

  .form__message { line-height: 2.7em; letter-spacing: -0.4px; }

  .social__nav a { font-size: 25px; }
  .social__nav a + a::before { margin-right: 12px; }
  .social__nav { gap: 6px 12px; }
  .about { grid-template-columns: 1fr; gap: 22px; font-size: 15px; margin-bottom: 35px; }
  .about__photo { max-width: 260px; margin-inline: auto; }

  .social__list {
    --icon-size: 22px;
    gap: 0 13px;
  }
}

/* ------------------------------------------------------ reduced motion ---- */

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