/* Premier Padel Kuwait Major - brand layer (source: Premier Padel Brand Guidelines) */

@font-face {
  font-family: 'Avenir';
  src: url('../fonts/avenir/Avenir-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('../fonts/avenir/Avenir-Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('../fonts/avenir/Avenir-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('../fonts/avenir/Avenir-Heavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('../fonts/avenir/Avenir-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BlenderPro';
  src: url('../fonts/blender-pro-bold/BlenderProBold.woff2') format('woff2'),
       url('../fonts/blender-pro-bold/BlenderProBold.woff') format('woff'),
       url('../fonts/blender-pro-bold/BlenderProBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* JAWAD has no Latin glyphs, so Latin text on Arabic pages falls through to Avenir */
@font-face {
  font-family: 'JAWAD';
  src: url('../fonts/jawad/jawad.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primary colours */
  --brand-black: #000000;
  --brand-gold: #BB8E4E;
  --brand-white: #FFFFFF;
  /* Supporting colours */
  --brand-ocean: #033E68;
  --brand-blue: #003DA5;
  --brand-yellow: #F3E600;

  --brand-gold-rgb: 187, 142, 78;
  --brand-ocean-rgb: 3, 62, 104;

  --brand-gradient-gold: linear-gradient(100deg, var(--brand-black) 10%, var(--brand-gold) 100%);
  --brand-gradient-blue: linear-gradient(100deg, var(--brand-black) 10%, var(--brand-blue) 100%);
  --brand-gradient-yellow: linear-gradient(100deg, var(--brand-black) 10%, var(--brand-yellow) 100%);

  --font-title: 'BlenderPro', 'Avenir', sans-serif;
  --font-body: 'Avenir', 'Century Gothic', sans-serif;
  --font-arabic: 'JAWAD', 'Avenir', sans-serif;

  --primary: var(--brand-gold);
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--brand-black);
}

/* ---------- Typography ---------- */

body {
  font-family: var(--font-body);
  font-weight: 500;
  background-color: var(--brand-black);
}

/* Client requirement: no italic text anywhere, including CMS rich text */
*, *::before, *::after {
  font-style: normal !important;
}

/* Blender Pro Bold is reserved for big titles */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.section-title,
.subtitle,
.menu__links ul li a,
.error-page__content h1, .error-page__content .h1,
.error-page__content h2, .error-page__content .h2 {
  font-family: var(--font-title);
  font-weight: 700;
}

.main-banner .countdown > div span {
  font-family: var(--font-body);
  font-weight: 900;
}

h5, h6, .h5, .h6,
.btn,
.nav-tabs .nav-link,
.header__right nav ul li a,
.inline-buttons .buy-ticket {
  font-family: var(--font-body);
  font-weight: 900;
}

html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] .h1, html[lang="ar"] .h2, html[lang="ar"] .h3,
html[lang="ar"] .h4, html[lang="ar"] .h5, html[lang="ar"] .h6,
html[lang="ar"] .section-title,
html[lang="ar"] .subtitle,
html[lang="ar"] .menu__links ul li a,
html[lang="ar"] .btn,
html[lang="ar"] .nav-tabs .nav-link,
html[lang="ar"] .header__right nav ul li a,
html[lang="ar"] .inline-buttons .buy-ticket {
  font-family: var(--font-arabic);
}

.subtitle {
  color: var(--brand-gold);
}

.top-places__info h5,
.top-places__info .h5 {
  max-width: 100%;
}

/* ---------- Links & focus ---------- */

@media screen and (min-width: 1025px) {
  a:hover,
  .header__right nav ul li a:hover,
  .footer__links--main ul li a:hover,
  .menu__links ul li a:hover {
    color: var(--brand-gold);
    opacity: 1;
  }
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--brand-gold) !important;
  outline-offset: 3px;
}

/* ---------- Buttons ---------- */

.btn-primary {
  border-color: var(--brand-gold);
  color: var(--brand-white);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-black);
  opacity: 1;
}
.btn-light {
  color: var(--brand-ocean) !important;
}

.inline-buttons .buy-ticket {
  color: var(--brand-black);
  background-image: url("data:image/svg+xml,%3Csvg width='250' height='72' viewBox='0 0 250 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M47.1537 0C47.6982 2.83771 50.521 5 53.9215 5C57.322 5 60.1448 2.83771 60.6894 0H249C249.552 0 250 0.447715 250 1V4.09676C247.218 4.65213 245.098 7.53145 245.098 11C245.098 14.4685 247.218 17.3479 250 17.9032V21.0968C247.218 21.6521 245.098 24.5315 245.098 28C245.098 31.4685 247.218 34.3479 250 34.9032V38.0968C247.218 38.6521 245.098 41.5315 245.098 45C245.098 48.4685 247.218 51.3479 250 51.9032V55.0968C247.218 55.6521 245.098 58.5315 245.098 62C245.098 65.4685 247.218 68.3479 250 68.9032V71C250 71.5523 249.552 72 249 72H60.6894C60.1448 69.1623 57.322 67 53.9215 67C50.521 67 47.6982 69.1623 47.1537 72H1C0.447717 72 0 71.5523 0 71V68.9032C2.78213 68.3479 4.90208 65.4685 4.90208 62C4.90208 58.5315 2.78213 55.6521 0 55.0968V51.9032C2.78213 51.3479 4.90208 48.4685 4.90208 45C4.90208 41.5315 2.78213 38.6521 0 38.0968V34.9032C2.78213 34.3479 4.90208 31.4685 4.90208 28C4.90208 24.5315 2.78213 21.6521 0 21.0968V17.9032C2.78213 17.3479 4.90208 14.4685 4.90208 11C4.90208 7.53145 2.78213 4.65213 0 4.09676V1C0 0.447716 0.447715 0 1 0H47.1537Z' fill='%23BB8E4E'/%3E%3Cline x1='53.5' y1='12' x2='53.5' y2='60' stroke='%23000000' stroke-dasharray='5 5'/%3E%3C/svg%3E");
}
.inline-buttons .buy-ticket span {
  max-width: calc(100% - 60px);
  line-height: 1.1;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .inline-buttons .buy-ticket {
    font-size: 0.8125rem;
  }
}
html[dir="rtl"] .inline-buttons .buy-ticket {
  background-image: url("data:image/svg+xml,%3Csvg width='250' height='72' viewBox='0 0 250 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='matrix(-1 0 0 1 250 0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M47.1537 0C47.6982 2.83771 50.521 5 53.9215 5C57.322 5 60.1448 2.83771 60.6894 0H249C249.552 0 250 0.447715 250 1V4.09676C247.218 4.65213 245.098 7.53145 245.098 11C245.098 14.4685 247.218 17.3479 250 17.9032V21.0968C247.218 21.6521 245.098 24.5315 245.098 28C245.098 31.4685 247.218 34.3479 250 34.9032V38.0968C247.218 38.6521 245.098 41.5315 245.098 45C245.098 48.4685 247.218 51.3479 250 51.9032V55.0968C247.218 55.6521 245.098 58.5315 245.098 62C245.098 65.4685 247.218 68.3479 250 68.9032V71C250 71.5523 249.552 72 249 72H60.6894C60.1448 69.1623 57.322 67 53.9215 67C50.521 67 47.6982 69.1623 47.1537 72H1C0.447717 72 0 71.5523 0 71V68.9032C2.78213 68.3479 4.90208 65.4685 4.90208 62C4.90208 58.5315 2.78213 55.6521 0 55.0968V51.9032C2.78213 51.3479 4.90208 48.4685 4.90208 45C4.90208 41.5315 2.78213 38.6521 0 38.0968V34.9032C2.78213 34.3479 4.90208 31.4685 4.90208 28C4.90208 24.5315 2.78213 21.6521 0 21.0968V17.9032C2.78213 17.3479 4.90208 14.4685 4.90208 11C4.90208 7.53145 2.78213 4.65213 0 4.09676V1C0 0.447716 0.447715 0 1 0H47.1537Z' fill='%23BB8E4E'/%3E%3Cline x1='53.5' y1='12' x2='53.5' y2='60' stroke='%23000000' stroke-dasharray='5 5'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-tabs .nav-link {
  border-color: rgba(var(--brand-gold-rgb), 0.6);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-black);
}

/* ---------- Header ---------- */

.header.sticky {
  background: var(--brand-black);
  border-bottom: 1px solid rgba(var(--brand-gold-rgb), 0.35);
}
.header__left--logo img {
  object-fit: contain;
}
.header .flex-wrapper {
  align-items: center;
}
.header.sticky .header__right {
  align-items: center;
}
/* The Kuwait Major lockup is ~4:1, so it is sized by height and the column grows to fit it */
.header__left {
  flex: 0 0 auto;
  width: auto;
}
.header__left a {
  flex-wrap: nowrap;
}
.header__left--logo img[src=""] {
  display: none;
}
.header__left--logo .header__brand-logo {
  width: auto;
  max-width: none;
  height: 80px;
}
.header.sticky .header__left--logo .header__brand-logo {
  max-width: none;
  height: 44px;
}
@media screen and (max-width: 1600px) {
  .header__left--logo .header__brand-logo {
    height: 58px;
  }
  .header.sticky .header__left--logo .header__brand-logo {
    height: 40px;
  }
}
@media screen and (max-width: 1250px) {
  .header__left--logo .header__brand-logo {
    height: 44px;
  }
}
@media screen and (max-width: 1025px) {
  .header.sticky .header__left--logo .header__brand-logo {
    height: 34px;
  }
}
@media screen and (max-width: 767px) {
  .header__left--logo .header__brand-logo {
    height: 36px;
  }
}
@media screen and (max-width: 450px) {
  .header__left--logo .header__brand-logo {
    height: 34px;
  }
  .header.sticky .header__left--logo .header__brand-logo {
    height: 30px;
  }
}
.header__right nav,
.header__right--lang-selector .dropdown .dropdown-toggle {
  border-color: rgba(var(--brand-gold-rgb), 0.6);
}
.header__right nav ul li a {
  white-space: nowrap;
}
@media screen and (max-width: 1600px) {
  .header__right nav ul li a {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 1300px) {
  .header__right nav ul li a {
    font-size: 0.9375rem;
  }
}
.header__right nav ul li:not(:last-child):after {
  background: var(--brand-gold);
}
.header__right--lang-selector .dropdown .dropdown-menu {
  background: var(--brand-ocean);
  border-color: rgba(var(--brand-gold-rgb), 0.35);
}
.header__right--lang-selector .dropdown .dropdown-menu a:hover {
  background: var(--brand-gold);
  color: var(--brand-black);
}
.header__right--menu-icon span {
  background: var(--brand-black);
}

/* ---------- Side menu (mobile navigation) ---------- */

.menu {
  background: var(--brand-black);
}
.menu__close {
  background: var(--brand-ocean);
}
.menu .dropdown .dropdown-toggle,
.menu .dropdown .dropdown-menu {
  background: var(--brand-ocean);
  border-color: var(--brand-ocean);
}
.menu .dropdown .dropdown-menu a:hover,
.menu .dropdown .dropdown-menu a:focus {
  background: var(--brand-gold);
  color: var(--brand-black);
}
.menu__follow-us ul li a {
  border-color: rgba(var(--brand-gold-rgb), 0.5);
}

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

.footer {
  border-top: 1px solid rgba(var(--brand-gold-rgb), 0.35);
}
.footer:before {
  background: var(--brand-gradient-blue);
}
.footer__links--main ul li:not(:last-child):after {
  background: rgba(var(--brand-gold-rgb), 0.6);
}

.social-sec .logo {
  max-height: 60px;
  width: auto;
  padding: 6px 0;
}

/* ---------- Home section backgrounds (brand ornaments) ----------
   Each ornament is a separate transparent image anchored to a fixed edge, so it
   sits in the same place whatever the section height. Sides alternate down the page.
   min(px, %) sizes shrink an ornament inside short sections instead of clipping it. */

.members:before,
.who-we:before,
.schedule-time:before,
.latest-ranking:before,
.calendar:before,
.top-places:before,
.gallery:before,
.gallery.bg:before,
.social-sec:before {
  background: var(--brand-black);
  background-repeat: no-repeat;
}
.who-we:before {
  background-image: url(../images/bg/ppk-orn-ball.webp),
    radial-gradient(420px circle at 60px 260px, rgba(var(--brand-gold-rgb), 0.10), transparent);
  background-position: left -150px top 40px, 0 0;
  background-size: auto min(460px, 60%), auto;
}
.schedule-time:before {
  background-image: url(../images/bg/ppk-orn-torus.webp),
    radial-gradient(380px circle at calc(100% - 60px) 50%, rgba(var(--brand-gold-rgb), 0.10), transparent);
  background-position: right -170px center, 0 0;
  background-size: auto min(340px, 85%), auto;
}
.latest-ranking:before {
  background-image: url(../images/bg/ppk-orn-towers.webp);
  background-position: left 3% bottom 0;
  background-size: auto min(420px, 75%);
}
.calendar:before {
  background-image: url(../images/bg/ppk-orn-ball.webp),
    radial-gradient(420px circle at right 60px top 420px, rgba(var(--brand-gold-rgb), 0.10), transparent);
  background-position: right -150px top 200px, 0 0;
  background-size: auto min(460px, 60%), auto;
}
.top-places:before {
  background-image: url(../images/bg/ppk-orn-torus.webp),
    radial-gradient(380px circle at 40px 180px, rgba(var(--brand-gold-rgb), 0.10), transparent);
  background-position: left -190px top 20px, 0 0;
  background-size: auto min(340px, 55%), auto;
}
.gallery:before {
  background-image: url(../images/bg/ppk-orn-ball.webp);
  background-position: right -230px top -40px;
  background-size: auto min(380px, 55%);
}
.social-sec:before {
  background-image: url(../images/bg/ppk-orn-ball.webp);
  background-position: right -40px center;
  background-size: auto 90%;
}

/* ---------- Inner page backgrounds (brand ornaments) ---------- */

/* Schedule event cards and the empty "no schedule" card; the old Vector3 pattern is dropped */
.schedule__live {
  background-color: var(--brand-black);
  background-image: url(../images/bg/ppk-orn-torus.webp),
    radial-gradient(520px circle at calc(100% - 80px) 50%, rgba(var(--brand-gold-rgb), 0.14), transparent),
    linear-gradient(100deg, var(--brand-black) 30%, rgba(var(--brand-ocean-rgb), 0.9) 100%);
  background-repeat: no-repeat;
  background-position: right -150px center, 0 0, 0 0;
  background-size: auto min(360px, 80%), auto, auto;
  border: 1px solid rgba(var(--brand-gold-rgb), 0.35);
}
.schedule__live:before {
  content: none;
}

/* Gallery page (tall), so it gets an ornament at each end */
.gallery.bg:before {
  background-image: url(../images/bg/ppk-orn-ball.webp),
    url(../images/bg/ppk-orn-torus.webp),
    radial-gradient(420px circle at right 60px top 200px, rgba(var(--brand-gold-rgb), 0.10), transparent);
  background-position: right -230px top -40px, left -190px bottom 40px, 0 0;
  background-size: auto min(380px, 40%), auto min(340px, 30%), auto;
}

.menu:before {
  background: var(--brand-black);
  background-image: url(../images/bg/ppk-orn-ball.webp),
    radial-gradient(420px circle at right 40px bottom 120px, rgba(var(--brand-gold-rgb), 0.12), transparent);
  background-repeat: no-repeat;
  background-position: right -180px bottom -60px, 0 0;
  background-size: auto min(420px, 50%), auto;
}

.error-page:before {
  background: var(--brand-black);
  background-image: url(../images/bg/ppk-orn-torus.webp),
    url(../images/bg/ppk-orn-towers.webp),
    radial-gradient(520px circle at 50% 45%, rgba(var(--brand-gold-rgb), 0.10), transparent);
  background-repeat: no-repeat;
  background-position: right -170px top 120px, left 3% bottom 0, 0 0;
  background-size: auto min(340px, 40%), auto min(360px, 45%), auto;
}

/* Smaller ornaments and bleeds on phones; also replaces the old mob.png in custom.css */
@media (max-width: 768px) {
  .who-we:before {
    background-position: left -90px top 20px, 0 0;
    background-size: auto 240px, auto;
  }
  .schedule-time:before {
    background-position: right -120px top 0, 0 0;
    background-size: auto min(150px, 70%), auto;
  }
  .latest-ranking:before {
    background-size: auto min(220px, 45%);
  }
  .gallery:before {
    background-position: right -130px top -20px;
    background-size: auto 200px;
  }
  .calendar:before {
    background-position: right -130px top 0, 0 0;
    background-size: auto 200px, auto;
  }
  .top-places:before {
    background-position: left -100px top 10px, 0 0;
    background-size: auto min(180px, 40%), auto;
  }
  .schedule__live {
    background-position: right -70px center, 0 0, 0 0;
    background-size: auto min(200px, 85%), auto, auto;
  }
}
/* ---------- Overlays & page accents ---------- */

.who-we__image:before {
  background: rgba(var(--brand-ocean-rgb), 0.35);
}
.top-places__image:before {
  background: rgba(var(--brand-ocean-rgb), 0.6);
}
.inner-banner__image:after {
  background: rgba(var(--brand-ocean-rgb), 0.15);
}

.search .form-control,
.schedule__filters--month {
  border-color: rgba(var(--brand-gold-rgb), 0.6);
}
.schedule__filters--month .nav-link:after {
  background: rgba(var(--brand-gold-rgb), 0.6);
}
.schedule__filters--month .nav-link:hover,
.schedule__filters--month .nav-link.active {
  background: transparent;
  color: var(--brand-gold);
}
.schedule__filters--filter .dropdown .dropdown-toggle:after {
  color: var(--brand-ocean);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-gold);
}
.form-label {
  color: var(--brand-ocean);
}
.form-label span {
  color: var(--brand-gold);
}

.loader-rings span {
  background: var(--brand-gold);
}

::selection {
  background: var(--brand-gold);
  color: var(--brand-black);
}