/*
Theme Name: Morgane Atelier
Theme URI: https://morganecombesdefontis.com/
Author: YConsulting
Author URI: https://yconsulting.fr/
Description: Thème FSE éditorial, mobile-first et 100 % Gutenberg pour Morgane Combes Defontis.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: morgane-atelier
Tags: block-patterns, block-styles, full-site-editing, portfolio, photography
*/

:root {
  --morgane-header-height: 4.75rem;
  --morgane-line: color-mix(in srgb, currentColor 18%, transparent);
  --morgane-shadow: 0 1.5rem 4rem rgb(13 13 13 / 10%);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; text-rendering: optimizeLegibility; }
body.admin-bar .morgane-site-header { top: 32px; }

::selection { background: #b78c5a; color: #fff; }
a { text-underline-offset: .22em; }
img { vertical-align: middle; }

.morgane-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgb(13 13 13 / 8%);
  background: rgb(247 244 238 / 88%);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.morgane-site-header .wp-block-site-title a { text-decoration: none; }
.morgane-site-header .wp-block-navigation-item__content { letter-spacing: .08em; text-transform: uppercase; }
.morgane-site-header .wp-block-navigation__responsive-container.is-menu-open {
  background: #0d0d0d !important;
  color: #f7f4ee !important;
  padding: 1.5rem;
}
.morgane-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2rem, 9vw, 4.5rem);
  line-height: .95;
}

.morgane-hero { min-height: calc(100svh - var(--morgane-header-height)); }
.morgane-hero-word {
  font-size: clamp(5rem, 29vw, 23rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.085em;
  line-height: .68 !important;
  margin-left: -.06em !important;
  white-space: nowrap;
}
.morgane-kicker { letter-spacing: .18em; text-transform: uppercase; }
.morgane-rule { border-top: 1px solid var(--morgane-line); }
.morgane-overlap-up { margin-top: clamp(-5rem, -10vw, -2rem) !important; position: relative; z-index: 2; }
.morgane-vertical-label { writing-mode: vertical-rl; transform: rotate(180deg); }

.morgane-media,
.morgane-media img { overflow: hidden; }
.morgane-media img {
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease;
}
.morgane-media:hover img { transform: scale(1.025); }
.morgane-monochrome img { filter: grayscale(1); }
.morgane-monochrome:hover img { filter: grayscale(.25); }

.morgane-card {
  border-top: 1px solid var(--morgane-line);
  padding-top: 1rem;
}
.morgane-card a { text-decoration: none; }
.morgane-card-arrow { transition: transform .25s ease; }
.morgane-card:hover .morgane-card-arrow { transform: translateX(.35rem); }

.morgane-scroll-gallery {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(78vw, 1fr);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding-bottom: 1rem;
}
.morgane-scroll-gallery > * { scroll-snap-align: start; }

.morgane-masonry { columns: 1; column-gap: var(--wp--preset--spacing--30); }
.morgane-masonry > * { break-inside: avoid; margin-bottom: var(--wp--preset--spacing--30) !important; }

.morgane-timeline { position: relative; }
.morgane-timeline::before {
  background: currentColor;
  content: "";
  height: 100%;
  left: .28rem;
  opacity: .22;
  position: absolute;
  top: 0;
  width: 1px;
}
.morgane-timeline-item { padding-left: 2rem; position: relative; }
.morgane-timeline-item::before {
  background: currentColor;
  border: .22rem solid var(--wp--preset--color--ivory);
  border-radius: 50%;
  box-shadow: 0 0 0 1px currentColor;
  content: "";
  height: .6rem;
  left: 0;
  position: absolute;
  top: .6rem;
  width: .6rem;
}

.morgane-universe-noia { --morgane-line: rgb(20 62 78 / 24%); }
.morgane-universe-strange { --morgane-line: rgb(247 244 238 / 20%); }
.morgane-universe-strange ::selection { background: #a77c48; }

.morgane-press-card { border-bottom: 1px solid var(--morgane-line); }
.morgane-press-card .wp-block-post-featured-image img { aspect-ratio: 4 / 3; object-fit: cover; }

.morgane-contact-form { display: grid; gap: 1.25rem; }
.morgane-contact-form label { display: grid; gap: .45rem; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.morgane-contact-form input,
.morgane-contact-form textarea,
.morgane-contact-form select {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  font: inherit;
  min-height: 3.25rem;
  padding: .65rem 0;
  width: 100%;
}
.morgane-contact-form textarea { min-height: 9rem; resize: vertical; }
.morgane-contact-form input:focus,
.morgane-contact-form textarea:focus,
.morgane-contact-form select:focus { outline: 2px solid #b78c5a; outline-offset: .3rem; }
.morgane-contact-form button {
  background: #0d0d0d;
  border: 1px solid #0d0d0d;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font: inherit;
  letter-spacing: .12em;
  min-height: 3.5rem;
  padding: 1rem 1.5rem;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}
.morgane-contact-form button:hover { background: transparent; color: #0d0d0d; }
.morgane-contact-hp { left: -9999px; position: absolute; }
.morgane-form-status { border: 1px solid currentColor; padding: 1rem; }

.morgane-marquee { overflow: hidden; }
.morgane-marquee-track { animation: morgane-marquee 28s linear infinite; display: flex; gap: 3rem; width: max-content; }
@keyframes morgane-marquee { to { transform: translateX(-50%); } }

.morgane-motion-ready .morgane-reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
}
.morgane-motion-ready .morgane-reveal.is-visible { opacity: 1; transform: none; }
.morgane-motion-ready .morgane-reveal:nth-child(2) { transition-delay: .08s; }
.morgane-motion-ready .morgane-reveal:nth-child(3) { transition-delay: .16s; }

@media (min-width: 600px) {
  .morgane-scroll-gallery { grid-auto-columns: minmax(42vw, 1fr); }
  .morgane-masonry { columns: 2; }
  .morgane-contact-form__row { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 782px) {
  body.admin-bar .morgane-site-header { top: 32px; }
  .morgane-masonry { columns: 3; }
  .morgane-scroll-gallery { grid-auto-columns: minmax(28vw, 1fr); }
  .morgane-timeline::before { left: 50%; }
  .morgane-timeline-item { margin-left: 50%; padding-left: 3rem; width: 50%; }
  .morgane-timeline-item:nth-child(even) { margin-left: 0; padding-left: 0; padding-right: 3rem; text-align: right; }
  .morgane-timeline-item::before { left: -.3rem; }
  .morgane-timeline-item:nth-child(even)::before { left: auto; right: -.3rem; }
}

@media (max-width: 781px) {
  .morgane-desktop-only { display: none !important; }
  .morgane-site-header .wp-block-site-title { font-size: 1rem !important; }
  .morgane-site-header { --morgane-header-height: 4rem; }
}

@media (max-width: 600px) {
  body.admin-bar .morgane-site-header { top: 0; }
  .morgane-bleed-mobile { margin-inline: calc(var(--wp--style--root--padding-left) * -1) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .morgane-motion-ready .morgane-reveal { opacity: 1; transform: none; }
}