/* ============================================
   KINNIE SWITZERLAND — Custom CSS
   Overrides Bootstrap + defines Kinnie classes
   ============================================ */

:root {
  --primary:    #dc582a;
  --secondary:  #ff7500;
  --tertiary:   #211e16;
  --quaternary: #2a2218;
  --quintinary: #00bab3;
  --white:      #ffffff;
  --black:      #000000;
  --grey-darkest:  #1a1a1a;
  --grey-darker:   #211e16;
  --grey-dark:     #555;
  --grey-medium:   #aaa;
  --grey-light:    #ccc;
  --grey-lighter:  #eee;
  --grey-lightest: #f9f9f9;

  /* Override Bootstrap primary */
  --bs-primary:     #dc582a;
  --bs-primary-rgb: 220, 88, 42;
  --bs-link-color:  #dc582a;

  /* Fonts */
  --font-primary:   'Aglet Slab', Georgia, serif;
  --font-secondary: 'D-DIN', Arial, sans-serif;
}

/* ---- Base ---- */
body {
  font-family: var(--font-secondary);
  background-color: var(--tertiary);
  color: var(--white);
  overflow-x: hidden;
}

a { color: inherit; }
a:hover { color: inherit; opacity: .8; }
.no-underline, .no-underline:hover { text-decoration: none; }

/* ---- Background colours (direct hex, no variables) ---- */
.bg-primary    { background-color: #dc582a !important; }
.bg-secondary  { background-color: #ff7500 !important; }
.bg-tertiary   { background-color: #211e16 !important; }
.bg-quaternary { background-color: #2a2218 !important; }
.bg-quintinary { background-color: #00bab3 !important; }
.section_footer { background-color: #dc582a !important; }

/* ---- Text colours ---- */
.text-primary    { color: var(--primary)    !important; }
.text-secondary  { color: var(--secondary)  !important; }
.text-white      { color: var(--white)      !important; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 900;
  font-style: italic;
}

.lead { font-size: 1.125rem; line-height: 1.6; }
.small { font-size: .875rem; }
.xsmall { font-size: .75rem; letter-spacing: .05em; }
.font-bold { font-weight: 700; }
.text-uppercase { text-transform: uppercase; }
.text-italic { font-style: italic; }

/* ---- Line height utilities (Webflow compat) ---- */
.leading-none  { line-height: 1    !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-zero  { line-height: 0    !important; }

/* ---- Margin utilities (Bootstrap 4 compat: mr-*, ml-*) ---- */
.mr-1  { margin-right:  4px !important; }
.mr-2  { margin-right:  8px !important; }
.mr-3  { margin-right: 12px !important; }
.mr-4  { margin-right: 16px !important; }
.mr-5  { margin-right: 20px !important; }
.mr-6  { margin-right: 24px !important; }
.mr-8  { margin-right: 32px !important; }
.ml-1  { margin-left:  4px !important; }
.ml-2  { margin-left:  8px !important; }
.ml-4  { margin-left: 16px !important; }
.ml-6  { margin-left: 24px !important; }
.mr-n1 { margin-right: -4px !important; }
.mt-10 { margin-top:   40px !important; }
.mt-8  { margin-top:   32px !important; }
.mt-6  { margin-top:   24px !important; }
.mb-10 { margin-bottom: 40px !important; }

@media (min-width: 992px) {
  .mr-lg-6 { margin-right: 24px !important; }
  .ml-lg-2 { margin-left:  8px !important; }
  .ml-lg-6 { margin-left: 24px !important; }
}

/* ---- Min height ---- */
.min-height-screen { min-height: 100vh; }

/* ---- Fit cover image ---- */
.fit-cover { object-fit: cover; width: 100%; height: 100%; }

/* ---- Position helpers ---- */
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed    !important; }
.position-relative { position: relative !important; }
.top-0    { top: 0    !important; }
.bottom-0 { bottom: 0 !important; }
.left-0   { left: 0   !important; }
.right-0  { right: 0  !important; }

/* ---- Z-index ---- */
.z-10   { z-index: 10   !important; }
.z-20   { z-index: 20   !important; }
.z-30   { z-index: 30   !important; }
.z-9999 { z-index: 9999 !important; }

/* ---- Opacity ---- */
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }

/* ---- Spacing (Kinnie scale on top of Bootstrap) ---- */
.pt-14  { padding-top:    3.5rem !important; }
.pb-14  { padding-bottom: 3.5rem !important; }
.py-14  { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.pt-16  { padding-top:    4rem   !important; }
.pb-16  { padding-bottom: 4rem   !important; }
.pt-20  { padding-top:    5rem   !important; }
.pb-20  { padding-bottom: 5rem   !important; }
.py-20  { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.pt-32  { padding-top:    8rem   !important; }
.pb-32  { padding-bottom: 8rem   !important; }
.pl-lg-8  { padding-left: 2rem; }
.pr-lg-0  { padding-right: 0; }

@media (min-width: 992px) {
  .pt-lg-20  { padding-top:    5rem !important; }
  .pb-lg-20  { padding-bottom: 5rem !important; }
  .py-lg-20  { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  .pt-lg-4   { padding-top:    1rem !important; }
  .pb-lg-4   { padding-bottom: 1rem !important; }
  .px-lg-8   { padding-left: 2rem !important; padding-right: 2rem !important; }
  .pl-lg-8   { padding-left: 2rem !important; }
  .pt-lg-32  { padding-top: 8rem !important; }
}

/* ---- Navigation ---- */
.primary-nav-wrapper {
  background: transparent;
  width: 100%;
}

.primary-nav-wrapper .links-wrapper {
  background: #dc582a;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.5rem !important;
  border-radius: 0 2rem 2rem 0;
  height: 50px;
}

.primary-nav-wrapper .links-wrapper a {
  color: #ffffff !important;
  text-decoration: none;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: .9375rem;
  white-space: nowrap;
  line-height: 1;
  transition: color .2s;
}

.primary-nav-wrapper .links-wrapper a:hover,
.primary-nav-wrapper .links-wrapper a.nav-link-active {
  color: #ff9e1b !important;
  opacity: 1;
}

.curve { display: flex; align-self: center; }

/* ---- Language switcher ---- */
.lang-switcher {
  display: flex;
  gap: .5rem;
  align-items: center;
  border-left: 1px solid rgba(255,255,255,.3);
  padding-left: 1rem;
  margin-left: .25rem;
}

.lang-switcher a {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  opacity: .5;
  color: #ffffff !important;
  transition: opacity .2s;
}

.lang-switcher a.active,
.lang-switcher a:hover {
  opacity: 1;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: .75rem 2rem;
  border-radius: 2rem;
  font-weight: 700;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: opacity .2s, background .2s;
}

.btn-primary, .btn.btn-primary {
  background: var(--primary);
  color: var(--white) !important;
  border-color: var(--primary);
}

.btn-outline-light, .btn.btn-outline-light {
  background: transparent;
  color: var(--white) !important;
  border-color: rgba(255,255,255,.5);
}

.btn-outline-light:hover {
  background: rgba(255,255,255,.1);
}

/* ---- Product pod ---- */
.product-pod {
  transition: transform .2s;
}

.product-pod:hover {
  transform: translateY(-4px);
}

/* ---- Rounded ---- */
.rounded-1 { border-radius: .5rem  !important; }
.rounded-2 { border-radius: 1rem   !important; }
.rounded-pill { border-radius: 999px !important; }
.rounded-right-50 { border-radius: 0 999px 999px 0 !important; }

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

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

.footer-link { margin-bottom: .75rem; }
.footer-link a { font-family: var(--font-primary); font-weight: 900; font-style: italic; font-size: 1.1rem; }
.footer-link a:hover { opacity: .7; }

.social-links a { opacity: .8; transition: opacity .2s; }
.social-links a:hover { opacity: 1; }

/* ---- Marquee ---- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Scrolling text ---- */
.marquee-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: marquee 25s linear infinite;
  width: max-content;
}