@charset "UTF-8";
/**
* Theme Name:        La Riobé
* Theme URI:         https://mon-theme.com
* Description:       Theme created for La Riobé association
* Version:           0.1.0
* Author:            Jérôme CHENAIE
* Author URI:        https://example.com
* Tags:              Archeology, Culture, blog
* Text Domain:       text-domain
* Domain Path:       /assets/lang
* Tested up to:      6.4
* Requires at least: 6.2
* Requires PHP:      7.4
* License:           GNU General Public License v2.0 or later
* License URI:       https://www.gnu.org/licenses/gpl-2.0.html
*/
@layer base, components, utilities;
@layer base {
  /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
  /*
     Document
     ========
     */
  /**
     Use a better box model (opinionated).
     */
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  html {
    /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.15; /* 1. Correct the line height in all browsers. */
    -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
    tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
  }
  /*
     Sections
     ========
     */
  body {
    margin: 0; /* Remove the margin in all browsers. */
  }
  /*
     Text-level semantics
     ====================
     */
  /**
     Add the correct font weight in Chrome and Safari.
     */
  b,
  strong {
    font-weight: bolder;
  }
  /**
     1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
     2. Correct the odd 'em' font sizing in all browsers.
     */
  code,
  kbd,
  samp,
  pre {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  /**
     Add the correct font size in all browsers.
     */
  small {
    font-size: 80%;
  }
  /**
     Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
     */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  /*
     Tabular data
     ============
     */
  /**
     Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
     */
  table {
    border-color: currentcolor;
  }
  /*
     Forms
     =====
     */
  /**
     1. Change the font styles in all browsers.
     2. Remove the margin in Firefox and Safari.
     */
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  /**
     Correct the inability to style clickable types in iOS and Safari.
     */
  button,
  [type=button],
  [type=reset],
  [type=submit] {
    -webkit-appearance: button;
  }
  /**
     Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
     */
  legend {
    padding: 0;
  }
  /**
     Add the correct vertical alignment in Chrome and Firefox.
     */
  progress {
    vertical-align: baseline;
  }
  /**
     Correct the cursor style of increment and decrement buttons in Safari.
     */
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }
  /**
     1. Correct the odd appearance in Chrome and Safari.
     2. Correct the outline style in Safari.
     */
  [type=search] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  /**
     Remove the inner padding in Chrome and Safari on macOS.
     */
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  /**
     1. Correct the inability to style clickable types in iOS and Safari.
     2. Change font properties to 'inherit' in Safari.
     */
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  /*
     Interactive
     ===========
     */
  /*
     Add the correct display in Chrome and Safari.
     */
  summary {
    display: list-item;
  }
}
@layer base {
  :root {
    --main-background-color: #FBFAF9;
    --secondary-background-color: #F8F5F2;
    --footer-background-color: #EFE5DB;
    --text-color: #161310;
    --link-color: #86290B;
    --link-hover-color: #A53511;
    --button-background-color: #86290B;
    --button-hover-background-color: #A53511;
    --color-white: #ffffff;
  }
  html {
    scroll-behavior: smooth;
  }
  a {
    text-decoration: none;
    color: var(--link-color);
  }
  a:hover {
    text-decoration: underline;
  }
  body {
    background-color: var(--main-background-color);
    color: var(--text-color);
  }
  .container {
    padding: 1rem 1.25rem;
    min-height: 80vh;
  }
  @media (width >= 768px) {
    .container {
      padding: 6rem 12rem;
    }
  }
  .container--flex {
    display: flex;
    flex-direction: column;
  }
  @media (width >= 768px) {
    .container--flex {
      flex-direction: row;
      justify-content: space-between;
      gap: 12rem;
    }
  }
  .section--secondary {
    background-color: var(--secondary-background-color);
  }
  section h1 {
    font-size: 2rem;
  }
  @media (width >= 768px) {
    section h1 {
      font-size: 3.25rem;
    }
  }
  a:hover {
    color: var(--link-hover-color);
  }
}
@layer components {
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--main-background-color);
    padding: 1rem;
    position: relative;
    box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.25);
    margin-bottom: 2rem;
  }
  .navbar img {
    width: 130px;
    height: auto;
  }
  .navbar__button {
    border: none;
    padding: 0;
    background-color: transparent;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    display: inline-block;
  }
  .navbar__button svg {
    width: 1.5rem;
    margin-right: 1.25rem;
  }
  .navbar__menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--main-background-color);
    width: 100%;
    box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.25);
    transition: all 1s ease;
  }
  .navbar__menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .navbar__menu a {
    text-decoration: none;
    color: inherit;
    color: var(--link-color);
    padding: 1rem;
    display: block;
  }
  .navbar__menu a:hover, .navbar__menu a:active {
    color: var(--link-hover-color);
  }
  .navbar.is-open .navbar__menu {
    display: flex;
  }
  @media (min-width: 768px) {
    body.home .current_page_item a::after {
      background-color: rgba(255, 255, 255, 0.8);
    }
    body.home .navbar {
      position: absolute;
      box-shadow: none;
      background-color: transparent;
      margin-bottom: 0;
    }
    body.home .navbar img {
      filter: invert(100%) brightness(1000%);
    }
    body.home .navbar__menu {
      --text-color: #FFFFFF;
    }
    body.home .navbar__menu a::after {
      background-color: rgba(255, 255, 255, 0.8);
    }
    .navbar {
      flex-wrap: nowrap;
      width: 100vw;
      z-index: 2;
    }
    .navbar img {
      width: 200px;
    }
    .navbar__button {
      display: none;
    }
    .navbar__menu {
      display: flex;
      position: static;
      background: none;
      color: var(--text-color);
      width: auto;
      box-shadow: none;
    }
    .navbar__menu ul {
      display: flex;
      flex-direction: row;
    }
    .navbar__menu a {
      position: relative;
      display: inline-block;
      padding: 0 1rem 0.25rem;
      text-decoration: none;
      color: inherit;
    }
    .navbar__menu a:hover {
      color: inherit;
    }
    .navbar__menu a::after {
      content: "";
      position: absolute;
      left: 1rem;
      bottom: 0;
      height: 0.125rem;
      width: calc(100% - 2rem);
      background-color: rgba(0, 0, 0, 0.8);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s ease-out;
    }
    .navbar__menu a:hover::after, .navbar__menu a:focus::after, .navbar__menu a:active::after {
      transform: scaleX(1);
    }
    .current_page_item a::after {
      content: "";
      position: absolute;
      left: 1rem;
      bottom: 0;
      height: 0.125rem;
      width: calc(100% - 2rem);
      background-color: rgba(0, 0, 0, 0.8);
      transform: scaleX(1);
      transform-origin: left;
    }
  }
}
@layer components {
  .hero {
    display: none;
  }
  @media (width >= 768px) {
    .hero {
      display: block;
      position: relative;
      background-image: url("assets/images/hero.webp");
      background-size: cover;
      background-position: center;
      height: 100vh;
    }
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }
  .hero__content {
    position: absolute;
    z-index: 10;
    color: #FFFFFF;
    text-align: center;
    top: 35%;
    left: 50%;
    transform: translate(-50%);
  }
  .hero__content h1 {
    font-size: 3.25rem;
  }
  .hero__content p {
    font-size: 2rem;
    font-style: italic;
  }
  .hero__scroll {
    z-index: 10;
    position: absolute;
    left: 50%;
    top: 85%;
    transform: translate(-50%, -50%);
    animation: bounce 2s infinite;
  }
  .hero__scroll svg {
    width: 6rem;
    color: #FFFFFF;
  }
  .hero__scroll svg:hover {
    color: var(--link-hover);
  }
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translate(-50%, -50%) translateY(0);
    }
    40% {
      transform: translate(-50%, -50%) translateY(-1rem);
    }
    60% {
      transform: translate(-50%, -50%) translateY(-0.5rem);
    }
  }
}
@layer components {
  .association div {
    display: flex;
  }
  @media (width >= 768px) {
    .association div {
      gap: 3.75rem;
    }
  }
  .association div img {
    display: none;
  }
  @media (width >= 992px) {
    .association div img {
      display: block;
      width: 361%;
      height: 100%;
    }
  }
  @media (width >= 1400px) {
    .association div img {
      display: block;
      width: auto;
      height: auto;
    }
  }
  .association a {
    margin-left: auto;
    margin-right: auto;
  }
  .section__title {
    padding-top: 1rem;
  }
}
@layer components {
  .home-news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  @media (width >= 768px) {
    .home-news {
      margin-bottom: 96px;
    }
  }
  .home-news article {
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  @media (width >= 768px) {
    .home-news article {
      width: 80%;
    }
  }
  .home-news article img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
  }
  .home-news h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #222;
  }
  .home-news p {
    font-size: 1rem;
    color: #555;
  }
  .home-news__footer {
    color: #777;
    margin-top: 0.5rem;
  }
}
@layer component {
  .btn {
    border: none;
    padding: 0;
    background-color: transparent;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: inline-block;
    padding: 1rem;
    background-color: var(--button-background-color);
    color: #fff;
    border-radius: 0.625rem;
  }
  .btn:hover {
    background-color: var(--button-hover-background-color);
  }
}
@layer components {
  .agenda {
    width: 100%;
  }
  .agenda ul {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .agenda ul li {
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;
  }
  .agenda__date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--footer-background-color);
    width: 150px;
    height: 150px;
  }
  .agenda__day {
    font-size: 3.5rem;
  }
  .agenda article {
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .agenda__title {
    font-size: 2rem;
    font-weight: normal;
    margin: 0;
  }
  .agenda__link {
    text-decoration: none;
  }
  .agenda__link:hover {
    text-decoration: underline;
  }
  .agenda__content {
    margin-top: 0.5rem;
  }
  .agenda__footer {
    display: flex;
    justify-content: center;
  }
}
@layer components {
  .spotlight-instagram-feed {
    display: flex;
  }
  .FeedGridLayout__grid {
    gap: 40px !important;
  }
  .instagram {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .instagram__footer {
    display: flex;
    justify-content: center;
    margin-top: auto;
  }
}
@layer components {
  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    background-color: var(--footer-background-color);
    padding-bottom: 2rem;
  }
  .footer .custom-logo {
    width: 200px;
    height: auto;
  }
  .footer section {
    display: flex;
    flex-direction: column;
    width: 100vw;
    text-align: center;
  }
  .footer section:first-child, .footer section:last-child {
    align-items: center;
  }
  .footer__subtitle {
    font-size: 0.875rem;
    font-style: italic;
    margin: 0;
  }
  .footer__title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  @media (width >= 768px) {
    .footer__title {
      font-size: 2.5rem;
    }
  }
  .footer nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 2rem;
  }
  .footer__social-block {
    display: flex;
    flex-direction: row;
    gap: 3rem;
  }
  .footer__social-block a:hover {
    filter: grayscale(45%);
  }
  @media (width >= 768px) {
    .footer {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      padding: 6rem 6.75rem;
    }
    .footer .custom-logo {
      width: 300px;
    }
    .footer section {
      width: auto;
      text-align: left;
    }
  }
}

/*# sourceMappingURL=style.css.map */