/*
Theme Name: I Love Bretagne
Author: Claudio
Version: 1.0
*/


/* ========================================
   SIDEBAR NAVIGAZIONE
======================================== */

.site-sidebar-navigation {
  width: 100%;
}

.site-sidebar-navigation .accordion-menu {
  width: 100%;
}

.site-sidebar-navigation .accordion-title,
.site-sidebar-navigation .zone-menu-title {
  box-sizing: border-box;
}

/* ========================================
   ACCORDION
======================================== */

.accordion-menu {
  width: 100%;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-title {
  display: block;
  width: 100%;
  padding: 10px 12px;

  border: 0;
  border-bottom: 1px solid rgba(69, 72, 74, 0.18);
  background: transparent;

  font-size: 15px;
  font-weight: 600;
  text-align: left;

  cursor: pointer;
}

.accordion-title:hover {
  color: var(--ilb-granite);
  background: #f3f3f3;
}

.accordion-title.is-active {
  color: var(--ilb-granite);
}

.accordion-content {
  display: none;
  padding: 0 10px 12px 18px;
}

.accordion-content.is-open {
  display: block;
}

.accordion-content a {
  display: block;
  padding: 7px 8px;

  border-radius: 4px;

  color: inherit;
  text-decoration: none;

  transition:
    background 0.2s ease,
    padding-left 0.2s ease;
}

.accordion-content a:hover {
  color: var(--ilb-granite);
  text-decoration: underline;
}

.accordion-content a:hover,
.accordion-content a.is-highlighted {
  padding-left: 13px;

  background: #f2f2f2;

  font-weight: bolder;
}

.accordion-content a.is-highlighted {
  text-decoration: underline;
}


/* ========================================
   DESTINAZIONI - ZONE
======================================== */

.zone-menu-title {
  position: relative;

  display: block;
  width: 100%;

  padding: 8px 0;

  border: 0;
  background: transparent;

  color: inherit;
  font: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    color 0.2s ease-in-out,
    padding-left 0.2s ease-in-out;
}

.zone-menu-title:hover,
.zone-menu-item.is-open .zone-menu-title {
  padding-left: 8px;

  background: rgba(179, 111, 82, 0.08);
  color: var(--ilb-granite);

  font-weight: bolder;
}

.zone-menu-title::after {
  content: "›";

  position: absolute;
  top: 50%;
  right: 4px;

  transform:
    translateY(-50%)
    rotate(90deg);

  font-size: 20px;
  font-weight: 400;
  line-height: 1;

  transition: transform 0.25s ease-in-out;
}

.zone-menu-item.is-open .zone-menu-title::after {
  transform:
    translateY(-50%)
    rotate(-90deg);
}



/* ========================================
   DESTINAZIONI - LUOGHI
======================================== */

.zone-menu-places {
  display: grid;
  grid-template-rows: 0fr;

  padding-left: 8px;

  opacity: 0;

  transition:
    grid-template-rows 0.28s ease-in-out,
    opacity 0.22s ease-in-out;
}

.zone-menu-places > * {
  overflow: hidden;
}

.zone-menu-item.is-open .zone-menu-places {
  grid-template-rows: 1fr;
  opacity: 1;
}

.zone-menu-places-inner {
  padding:
    2px
    0
    8px
    8px;
}

.zone-menu-places a {
  position: relative;

  display: block;
  padding: 5px 10px;

  color: var(--ilb-slate);

  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;

  text-decoration: none;

  transition:
    color 0.18s ease-in-out,
    padding-left 0.18s ease-in-out;
}

.zone-menu-places a::before {
  content: "•";

  position: absolute;
  top: 5px;
  left: 2px;

  color: var(--ilb-granite);

  font-size: 14px;
  line-height: 1.35;
}

.zone-menu-places a:hover {
  color: var(--ilb-granite);
}

.zone-menu-places a.is-current {
  color: var(--ilb-granite);
  font-weight: 700;
}

.zone-menu-item.is-highlighted .zone-menu-title {
  padding-left: 8px;

  background: rgba(179, 111, 82, 0.08);
  color: var(--ilb-granite);

  font-weight: bolder;
}

/* ========================================
   MAPPA BRETAGNA
======================================== */

.bretagne-map-wrapper {
  width: 100%;
  max-width: 900px;
  margin: 30px auto;
  padding: 18px;

  background: var(--ilb-white);

  border: 1px solid rgba(69, 72, 74, 0.10);
  border-radius: 10px;

  overflow: hidden;
}

.bretagne-map-wrapper svg {
  display: block;
  width: 100%;
  height: auto;

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.map-zone {
  cursor: pointer;
}

.map-zone path {
  transition:
    fill 0.2s ease,
    opacity 0.2s ease,
    filter 0.2s ease,
    transform 0.2s ease;
}

.map-zone:hover path {
  filter: brightness(0.88) saturate(1.25);
}

.map-zone--context {
  opacity: 0.45;
  cursor: default;
}

.map-zone.is-highlighted path {
  filter: brightness(0.85) saturate(1.35);
}


/* ========================================
   MAPPA BRETAGNA - COLORI ZONE
======================================== */

#iroise-leon path {
  fill: #a8c7c4;
}

#granit-rose-morlaix path {
  fill: #c9b0a6;
}

#saint-brieuc-goelo path {
  fill: #b8c5d0;
}

#emeraude-rance path {
  fill: #9fbfc1;
}

#rennes-portes path {
  fill: #c7c9b2;
}

#broceliande path {
  fill: #b6c5ae;
}

#morbihan-sud path {
  fill: #d1c7ad;
}

#centre-bretagne path {
  fill: #c5b6b1;
}

#cornouaille path {
  fill: #b4c3cd;
}

#loire-atlantique path {
  fill: #d8d1c3;
}


/* ========================================
   MAPPA - MARKER LOCALITÀ
======================================== */

.map-marker {
  cursor: pointer;
}

.map-marker circle {
  fill: #d94b3d;
  stroke: #fff;
  stroke-width: 2px;

  vector-effect: non-scaling-stroke;

  transform-box: fill-box;
  transform-origin: center;

  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

.map-marker:hover circle {
  r: 9px;

  transform: scale(1.5);

  filter: brightness(1.15);
}


/* ========================================
   DEV INFO
======================================== */

#ilb-dev-info {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  gap: 30px;

  padding: 6px 12px;

  background: #111;
  color: #fff;

  font-family: monospace;
  font-size: 13px;
  line-height: 1.4;
}

body {
  padding-top: 30px;
}


/* ========================================
   SIDEBAR DESTRA
======================================== */

.sidebar-box {
  padding: 18px;

  background: rgba(255, 255, 255, 0.72);

  border: 1px solid rgba(69, 72, 74, 0.12);
  border-radius: 8px;
}

.sidebar-box h3 {
  margin: 0 0 10px;

  color: var(--ilb-ocean);

  font-size: 17px;
  font-weight: 600;
}

.sidebar-box p {
  margin: 0;

  color: var(--ilb-slate);

  font-size: 14px;
  line-height: 1.5;
}


/* ========================================
   CONTATORE VISITE FOOTER
======================================== */

.footer-visits-wrapper {
  display: flex;
  justify-content: flex-end;

  margin-right: 10px;
  margin-bottom: 10px;
}

.footer-visits {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;

  padding: 8px 14px;

  background: rgba(255, 255, 255, 0.5);

  border: 1px solid rgba(10, 10, 10, 0.6);
  border-radius: 6px;

  font-size: 13px;
  line-height: 1.35;
}

.footer-visits__row {
  white-space: nowrap;
}

.footer-visits strong {
  margin-left: 4px;

  color: rgba(20, 71, 208, 1);

  font-weight: 700;
}


/* ========================================
   SCHEDE LUOGO
======================================== */

.place-tabs {
  margin: 24px 0 32px;
}

.place-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  margin-bottom: 0;
}

.place-tabs__button {
  padding: 10px 16px;

  background: var(--ilb-sand);

  border: 1px solid rgba(69, 72, 74, 0.16);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;

  color: var(--ilb-ocean);

  font-size: 15px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.place-tabs__button:hover {
  background: #ded7cc;
  color: var(--ilb-granite);
}

.place-tabs__button.is-active {
  position: relative;
  z-index: 2;

  background: var(--ilb-white);
  color: var(--ilb-granite);
}

.place-tabs__panel {
  padding: 22px;

  background: var(--ilb-white);

  border: 1px solid rgba(69, 72, 74, 0.16);
  border-radius: 0 8px 8px 8px;
}

.place-tabs__panel[hidden] {
  display: none;
}


/* ========================================
   DATI LUOGO
======================================== */


.place-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}

.place-data-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.place-data-item strong {
  color: var(--ilb-ocean);

  font-size: 13px;
  font-weight: 600;
}

.place-data-item span {
  color: var(--ilb-slate);

  font-size: 15px;
}


/* ========================================
   ACCESSI
======================================== */

.place-access-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.place-access {
  padding-bottom: 20px;

  border-bottom: 1px solid rgba(69, 72, 74, 0.12);
}

.place-access:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}

.place-access__title {
  margin: 0 0 14px;

  color: var(--ilb-ocean);

  font-size: 18px;
}

.place-access__notes,
.place-trekking__notes {
  margin-top: 16px;

  color: var(--ilb-slate);

  font-size: 14px;
  line-height: 1.55;
}


/* ========================================
   ATTIVITÀ
======================================== */

.place-activities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.place-activities li {
  padding: 7px 11px;

  background: var(--ilb-sand);

  border-radius: 5px;

  color: var(--ilb-ocean);

  font-size: 14px;
  font-weight: 600;
}


/* ========================================
   TESTO PAGINA LUOGO - COLONNE
======================================== */

.place-text-columns {
  column-count: 2;
  column-gap: 48px;
  column-rule: 1px solid rgba(69, 72, 74, 0.10);

  margin: 0 0 32px;

  color: var(--ilb-slate);

  font-size: 17px;
  line-height: 1.7;
}

.place-text-columns p {
  margin-top: 0;

  break-inside: avoid;
}


/* ========================================
   LAYOUT EDITORIALE ROW / COL
======================================== */

.place-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: center;

  width: 100%;
  margin: 0 0 36px;
}

.place-row__col {
  min-width: 0;
  width: 100%;

  color: var(--ilb-slate);

  font-size: 17px;
  line-height: 1.7;
}

.place-row__col p:first-child {
  margin-top: 0;
}

.place-row__col p:last-child {
  margin-bottom: 0;
}

.place-row__col h2,
.place-row__col h3,
.place-row__col h4 {
  margin-top: 0;
  margin-bottom: 0.7em;

  color: var(--ilb-ocean);
}

.place-row > p {
  display: contents;
}


/* ========================================
   IMMAGINI NELLE COLONNE
======================================== */

.place-row__col img {
  display: block;

  width: 100%;
  max-width: none;
  height: auto;

  border-radius: 8px;
}

.place-row__col a {
  display: inline-block;
  max-width: 100%;
}

.place-row__col figure {
  width: 100%;
  max-width: none;
  margin: 0 0 20px;
}

.place-row__col figure:last-child {
  margin-bottom: 0;
}

.place-row__col .wp-caption {
  max-width: 100%;
}

.place-row__col .wp-caption-text,
.place-row__col figcaption {
  margin-top: 8px;

  color: var(--ilb-slate);

  font-size: 13px;
  line-height: 1.45;
}


/* ========================================
   VIDEO NELLE COLONNE
======================================== */

.place-row__col iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}


/* ========================================
   PAGINA LUOGO - LAYOUT
======================================== */

.place-single__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;

  align-items: start;
}

.place-single__sidebar {
  min-width: 0;
}

.place-single__main {
  min-width: 0;
}

/* ========================================
   ACCESSI / PARCHEGGI - MEDIA
======================================== */

.place-access__row {
  display: block;
}

.place-access__row.has-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: center;
}

.place-access__data,
.place-access__media {
  min-width: 0;
}

.place-access__media-figure {
  margin: 0;
}

.place-access__media img,
.place-access__media video,
.place-access__embed iframe {
  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;

  border-radius: 8px;
}

.place-access__embed iframe {
  aspect-ratio: 16 / 9;
}

.place-access__media-caption {
  margin-top: 8px;

  color: var(--ilb-slate);

  font-size: 13px;
  line-height: 1.45;
}

.place-access__media-description {
  margin-top: 10px;

  color: var(--ilb-slate);

  font-size: 14px;
  line-height: 1.55;
}

.place-access__media-description p {
  margin: 0;
}

/* ========================================
   LOGIN MODAL
======================================== */

.site-header__login-trigger {
  cursor: pointer;
  font: inherit;
}

.ilb-login-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
}

.ilb-login-modal[hidden] {
  display: none;
}

.ilb-login-modal__overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);
}

.ilb-login-modal__box {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 420px;

  padding: 28px;

  background: var(--ilb-white);
  border-radius: 10px;

  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.25);
}

.ilb-login-modal__title {
  margin: 0 0 20px;

  color: var(--ilb-slate);

  font-size: 22px;
  line-height: 1.2;
}

.ilb-login-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;

  border: 0;
  background: transparent;

  color: var(--ilb-slate);

  font-size: 28px;
  line-height: 1;

  cursor: pointer;
}

.ilb-login-modal .tml {
  margin: 0;
}

.ilb-login-modal .tml-field-wrap {
  margin-bottom: 14px;
}

.ilb-login-modal .tml-label {
  display: block;
  margin-bottom: 5px;

  font-size: 13px;
  font-weight: 600;
}

.ilb-login-modal input[type="text"],
.ilb-login-modal input[type="password"],
.ilb-login-modal input[type="email"] {
  width: 100%;
  box-sizing: border-box;

  padding: 9px 10px;

  border: 1px solid #ccc;
  border-radius: 4px;

  font: inherit;
}

.ilb-login-modal input[type="submit"] {
  padding: 9px 18px;

  border: 0;
  border-radius: 4px;

  background: var(--ilb-ocean);
  color: var(--ilb-white);

  cursor: pointer;
}

.ilb-login-modal .tml-links {
  margin-top: 16px;
  padding: 0;

  list-style: none;

  font-size: 13px;
}

.ilb-login-modal .tml-links li {
  margin-top: 5px;
}

body.is-login-modal-open {
  overflow: hidden;
}

.ilb-login-modal__panel[hidden] {
  display: none;
}

.ilb-login-modal__switch {
  margin-top: 14px;
}

.ilb-login-modal__switch-button {
  padding: 0;
  border: 0;
  background: transparent;

  color: var(--ilb-ocean);

  font-size: 13px;
  text-decoration: underline;

  cursor: pointer;
}

.ilb-login-modal .tml-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 16px;
  padding: 0;

  list-style: none;
}

.ilb-login-modal .tml-links li {
  margin: 0;
}

.ilb-login-modal .tml-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;
  padding: 8px 14px;

  border: 1px solid var(--ilb-ocean);
  border-radius: 4px;

  background: transparent;
  color: var(--ilb-ocean);

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  text-decoration: none;

  cursor: pointer;

  transition:
    background .2s ease,
    color .2s ease;
}

.ilb-login-modal .tml-links a:hover {
  background: var(--ilb-ocean);
  color: var(--ilb-white);

  text-decoration: none;
}

.ilb-login-modal input[type="submit"] {
  min-height: 34px;
  padding: 8px 14px;

  border: 1px solid var(--ilb-ocean);
  border-radius: 4px;

  background: var(--ilb-ocean);
  color: var(--ilb-white);

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
}

.site-dev-notice {
  position: relative;
  z-index: 900;

  width: 100%;

  margin-top: 0px;
  padding: 8px 16px;

  background: #b32025;
  color: #ffffff;

  font-size: 24px;
  font-weight: 900;
  line-height: 2.3;

  text-align: center;
}

/* ========================================
   LOGIN - ERRORE
======================================== */

.ilb-login-error {
  margin: 0 0 18px;
  padding: 12px 14px;

  border: 1px solid #b42318;
  border-radius: 4px;

  background: #fef3f2;
  color: #b42318;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.ilb-login-success {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #26844a;
  border-radius: 4px;
  background: #eef9f1;
  color: #1f6b3c;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

/* ========================================
   THEME MY LOGIN - PAGINE STANDALONE
======================================== */

.page-standard .tml {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.page-standard .tml-alerts {
  margin-bottom: 18px;
}

.page-standard .tml-message,
.page-standard .tml-error,
.page-standard .tml-success {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 4px;
  line-height: 1.5;
}

.page-standard .tml-message {
  border: 1px solid #b9c9cd;
  background: #f5f8f9;
  color: var(--ilb-slate);
}

.page-standard .tml-error {
  border: 1px solid #b42318;
  background: #fef3f2;
  color: #b42318;
}

.page-standard .tml-success {
  border: 1px solid #26844a;
  background: #eef9f1;
  color: #1f6b3c;
}

.page-standard .tml-field-wrap {
  margin-bottom: 18px;
}

.page-standard .tml-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--ilb-slate);
}

.page-standard .tml-field {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #b9c1c4;
  border-radius: 4px;
  background: #fff;
  color: var(--ilb-slate);
  font: inherit;
}

.page-standard .tml-field:focus {
  border-color: var(--ilb-ocean);
  outline: 2px solid rgba(53, 92, 102, 0.18);
  outline-offset: 1px;
}

.page-standard .tml-pwd {
  position: relative;
}

.page-standard .tml-pwd .tml-field {
  padding-right: 50px;
}

.page-standard .tml-toggle-pwd {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
}

.page-standard .tml-button {
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 4px;
  background: var(--ilb-ocean);
  color: var(--ilb-white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.page-standard .tml-button:hover {
  opacity: 0.9;
}

.page-standard .tml-links {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-standard .tml-links li {
  margin: 6px 0;
}

.page-standard .tml-links a {
  color: var(--ilb-ocean);
  text-decoration: none;
}

.page-standard .tml-links a:hover {
  text-decoration: underline;
}