/* stylelint-disable no-descending-specificity */
/* stylelint-disable custom-property-empty-line-before */

/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

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

:root {
  /* colors */
  --color-dark-black: #000;
  --color-black: #202020;
  --color-gray: #696969;
  --color-gray-three: #333;
  --color-gray-dark: #bbb;
  --color-gray-darker: #ccc;
  --color-gray-light: #ebebeb;
  --color-gray-lighter: #f7f7f7;
  --color-gray-lightest: #ebebeb8a;
  --color-white: #fff;
  --color-yellow: #ffea00;
  --color-blue: #0045ff;
  --color-pink: #ff0058;
  --color-dimgray: dimgray;

  /* brand Colors */
  --brand-primary: var(--color-yellow);
  --brand-secondary: var(--color-black);
  --brand-third: var(--color-gray-light);

  /* layout */
  --gutter-padding: 0.875rem; /* 14px */
  --max-width: 72.75rem; /* 1164px */
  --max-body-width: 105rem; /* 1680px */

  --screen-xsmall: 29.6875rem; /* 475px */
  --screen-small: 47.9375rem; /* 767px */
  --screen-medium: 64rem; /* 1024px */
  --screen-large: 75rem; /* 1200px */

  /* scaffolding */
  --body-background: var(--color-white);

  --text-color: var(--color-black);
  --text-color-inverse: var(--color-gray-light);

  --link-color: var(--color-blue);
  --link-hover-color: var(--link-color);
  --link-hover-decoration: underline;

  --nav-link: var(--color-black);
  --nav-link-inverse: var(--color-gray-light);

  /* typography */
  --font-family-sans-serif-default: "Source Sans Pro", "Helvetica Neue",
    "Helvetica", "Arial", sans-serif;
  --font-family-serif-default: "Asar", "Georgia", "Times New Roman", "Times",
    serif;

  --font-family-sans-serif: var(--font-family-sans-serif-default);
  --font-family-serif: var(--font-family-serif-default);
  --font-family-base: var(--font-family-sans-serif);

  --font-size-base: 1.125rem; /* 18px */
  --font-size-large: 1.5rem; /* 24px */
  --font-size-xlarge: 3rem; /* 48px */
  --font-size-medium: 1.125rem; /* 18px */
  --font-size-small: 0.875rem; /* 14px */
  --font-size-xsmall: 0.75rem; /* 12px */

  --font-size-h1: 2.5rem; /* 40px */
  --font-size-h2: 2.25rem; /* 36px */
  --font-size-h3: 1.5rem; /* 24px */
  --font-size-h4: 1rem; /* 16px */
  --font-size-h5: 0.875rem; /* 14px */
  --font-size-h6: 0.625rem; /* 10px */

  --line-height-base: 1.5;
  --line-height-computed: calc(var(--font-size-base) * var(--line-height-base));

  --font-weight-light: 300;
  --font-weight-normal: normal;
  --font-weight-semi-bold: 400;
  --font-weight-bold: 600;

  --icon-size: var(--font-size-large);

  /* page layout */
  --header-height: 13rem; /* 208px */
  --header-mobile-height: 5.625rem; /* 90px */
  --utility-nav-height: 1.5625rem; /* 25px */

  /* language switcher */
  --country-flag-path: "../resources/images/country-flags";
  --country-flag-size: 1.5625rem; /* 25px */

  /* wknd item styles */
  --list-item-height: 7.5rem; /* 120px */
  --list-item-border: 5px solid var(--brand-third);

  /* button styles */
  --button-size: 3rem; /* 48px */
  --button-border-radius: 0;
}

/* global styles */
body {
  display: none;
  background-color: var(--body-bg);
  font-family: var(--font-family-base);
  margin: 0;
  padding: 0;
  font-size: var(--font-size-base);
  
  /* text-align: left; */
  color: var(--text-color);
  line-height: var(--line-height-base);
}

body.appear {
  display: block;
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

main {
  padding-top: var(--set-header-mobile-height, var(--header-mobile-height));
}

@media (width >=1024px) {
  main {
    padding-top: var(--set-header-height, var(--header-height));
  }  
}

main > .section {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 var(--gutter-padding);
}

main > .section.full-width {
  max-width: var(--max-body-width);
  padding: 0;
}

main > .section.top-margin {
  margin-top: 24px;
}

main > .section.bottom-margin {
  margin-bottom: 24px;
}

@media (width >=1024px) {
  main > .section.top-margin {
    margin-top: 40px;
  }
  
  main > .section.bottom-margin {
    margin-bottom: 40px;
  }
}

.magazine-section .default-content-wrapper img {
  padding: 0 var(--gutter-padding);
}

.adventures-section .wkndtitle h5 {
  display: inline-block;
}

/* headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  line-height: var(--line-height-base);
  color: var(--text-color);
}

h1, .h1,
h2, .h2,
h3, .h3 {
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-normal);
  margin-top: var(--line-height-computed);
  margin-bottom: calc(var(--line-height-computed) / 2);
}

h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--font-family-sans-serif);
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
}

h1, .h1 {
  font-size: var(--font-size-h1);
}

h2, .h2 {
  font-size: var(--font-size-h2);
}

h3, .h3 {
  font-size: var(--font-size-h3);
}

h4, .h4 {
  font-size: var(--font-size-h4);
}

h5, .h5 {
  font-size: var(--font-size-h5);
}

h6, .h6 {
  font-size: var(--font-size-h6);
}

/* styled links inside headings */
h1 a,
h2 a,
h3 a {
  color: var(--text-color);
}

/* icon styling for links inside headings */
h1 a::after,
h2 a::after,
h3 a::after {
  content: var(--wkndicon-play3);
  font-size: var(--font-size-xsmall);
  position: relative;
  top: -0.5em;
  left: 0.75em;
}

/* paragraph styling */
p {
  margin: 0 0 calc(var(--line-height-computed) / 2);
  font-size: var(--font-size-base);
  line-height: calc(var(--line-height-base) + 1);
  text-align: justify;
}

/* links */
a {
  color: var(--link-color);
  text-decoration: none;
  overflow-wrap: break-word;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* buttons style */
a.button:any-link,
button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  border: 2px solid transparent;
  padding: 16px 32px;
  font-family: var(--body-font-family);
  font-style: normal;
  font-weight:var(--font-weight-bold);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-yellow);
  color: var(--color-black);
  cursor: pointer;

  /* overflow: hidden; */
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-small) ;
  text-transform: uppercase;
}


a.button:hover, a.button:focus,
button:hover, button:focus {
  background-color: var( --color-yellow);
  cursor: pointer;
}

button:disabled,
button:disabled:hover {
  background-color: var(--light-color);
  cursor: unset;
}

/* Secondary Button */

a.button.secondary {
  box-sizing: border-box;
  background-color:var(--color-black); 
  color:var(--color-white);
  font-size: var(--font-size-small) ;
  text-transform: uppercase;

}

.button.secondary:hover {
  background-color:var(--color-black); 
  cursor: pointer;
}

/* image and icon style */
img {
  display: block;
  height: auto;
  max-width: 100%;
  width: auto;
}

.icon {
  display: inline-block;
  height: var(--icon-size);
  width: var(--icon-size);
}

.icon img {
  height: 100%;
  width: 100%;
}
 
/* Social icons styling */
.social-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 0;
}
 
.social-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 0;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
 
.social-button i {
  font-size: 18px;
  color: var(--color-black);
}
 
.social-button:hover {
  background-color:var(--color-white);
}
 
.button-container.social-container a.button.social-button {
  background:var( --color-gray-light);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 18px;
}
 
 
.wknd-icon {
  font-family: var(--icomoon-font-family);
  font-style: normal;
  font-weight: normal;
  display: inline-block;
}
 
.wkndicon-facebook::before {
  content: var(--wkndicon-facebook);
}
 
.wkndicon-instagram::before {
  content: var(--wkndicon-instagram);
}
 
.wkndicon-twitter::before {
  content: var(--wkndicon-twitter);
}
 
.social-button .wknd-icon {
  font-size: 18px;
  color:var(--color-black);
  align-items: center;
  display: flex;
  justify-content: center;
}
 
.button.secondary.social-button .wknd-icon {
  font-size: 18px;
  color:var(--color-white);
}