/*
Trix 1.3.2
Copyright © 2024 Basecamp, LLC
http://trix-editor.org/*/
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }
trix-toolbar * {
  box-sizing: border-box; }
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-device-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-device-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }
trix-toolbar .trix-button--icon-attach::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
  top: 8%;
  bottom: 4%; }
trix-toolbar .trix-button--icon-bold::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-italic::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-link::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-strike::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-quote::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-code::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-undo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-redo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-dialogs {
  position: relative; }
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }
trix-toolbar .trix-dialog--link {
  max-width: 600px; }
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight; }
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }
trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }
trix-editor .trix-button-group {
  display: inline-flex; }
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }
trix-editor .attachment__metadata-container {
  position: relative; }
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }
@charset "UTF-8";
.trix-content {
  line-height: 1.5; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' · '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
/* CSS Variables */
:root {
  --primary-color: #84A59D;
  /* Solid-button fill: a darker step of the brand sage. The brand colour itself
     against white text is only ~2.6:1, below WCAG AA even for large text, which
     made every primary button read as disabled. Same hue and saturation,
     lightness 58% -> 40%, measuring 4.99:1. */
  --primary-button: #56766E;
  --primary-button-hover: #4A665F;
  --secondary-color: #F28482;
  --accent-color: #F6BD60;
  --danger-color: #dc3545;
  --success-color: #198754;
  --text-color: hsl(164deg 11.12% 39.51%);
}

/* Text color for content on warm backgrounds */
body {
  background-color: #F7EDE2 !important;
  font-family: 'Nunito', sans-serif;
  color: hsl(164deg 11.12% 39.51%) !important;
}

/* Ensure paragraphs, labels, and other text elements use this color */
p, .form-label, .card-text, li, td, th, .text-muted, .form-check-label {
  color: hsl(164deg 11.12% 39.51%) !important;
}

/* Headings should also use this color */
h1, h2, h3, h4, h5, h6, .card-title, .section-title {
  color: hsl(164deg 11.12% 39.51%) !important;
}

/* Keep our other styles */
.card {
  background-color: white !important;
  border: none !important;
  border-radius: 0.75rem !important;
}

.card-img-top {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.card-title {
  color: var(--primary-color);
  font-weight: 600;
}

.card-text.text-muted {
  font-size: 0.9rem;
}

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

.btn-secondary, a.btn-secondary {
  background-color: #F28482 !important;
  border-color: #F28482 !important;
  color: white !important; /* Keep button text white for contrast */
}

.text-primary {
  color: hsl(164deg 11.12% 39.51%) !important;
}

.text-secondary {
  color: #F28482 !important;
}

.text-accent {
  color: #F6BD60 !important;
}

.navbar {
  padding: 0.75rem 0; /* Increase vertical padding */
  background-color: white !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04); /* Very subtle shadow */

  /* Above the environment banner, which is sticky at top: 0 with z-index 900.
     The banner comes after the navbar in the document, so while the burger menu
     was open and the page was scrolled the banner slid over the open menu and
     cut it in half. */
  position: relative;
  z-index: 1000;
}

/* The open burger menu scrolls on its own rather than running off a short
   screen. Without a ceiling, a menu longer than the viewport is simply
   unreachable at the bottom, and the page behind it scrolls instead. */
@media (max-width: 991.98px) {
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.navbar-brand {
  padding: 0; /* Remove default padding to have more control */
  margin-right: 2rem; /* Increase space after logo */
  min-height: 60px; /* Match logo height */
  text-decoration: none !important;
}

/* Style the brand text properly */
.navbar-brand h1 {
  color: var(--text-color) !important;
  transition: color 0.2s ease;
}

.navbar-brand p {
  color: var(--text-color) !important;
  opacity: 0.8;
}

.navbar-brand:hover h1 {
  color: var(--secondary-color) !important;
}

.navbar-brand:hover {
  text-decoration: none !important;
}

/* Override Bootstrap's default navbar-collapse behavior */
.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 0 !important; /* Override Bootstrap's flex-grow: 1 */
  align-items: center;
}

/* Links remain teal/coral for clear call-to-action */
a:not(.btn) {
  color: #F28482 !important; /* Coral color */
  text-decoration: none;
}

a:not(.btn):hover {
  color: #e57471 !important; /* Slightly darker coral on hover */
  text-decoration: underline;
}

footer {
  background-color: white;
  padding: 3rem 0 2rem; /* More top padding */
  margin-top: 4rem; /* More space above footer */
  border-top: 1px solid rgba(0,0,0,0.05); /* Very subtle border */
}

.featured-card {
  background-color: #F7EDE2 !important;
}

/* Ensure input text uses the same color */
input, select, textarea {
  color: hsl(164deg 11.12% 39.51%) !important;
}

/* Placeholder text for form fields */
::placeholder {
  color: hsla(164deg 11.12% 39.51%, 0.6) !important;
}

/* Logo styling */
.logo {
  height: 60px; /* Increase height significantly */
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .logo {
    height: 45px; /* Still larger but slightly smaller on mobile */
  }
}

/* Footer logo */
.footer-logo {
  height: 18px; /* Larger footer logo */
  width: auto;
  display: inline-block;
  margin-bottom: 0.25rem; /* More space below */
}

/* Enhanced styling for a more polished look */
.nav-link {
  font-size: 1.05rem; /* Slightly larger nav links */
  padding: 0.5rem 1rem; /* More padding around nav links */
}

/* Improve the inscription button */
.nav-link.btn {
  border-radius: 50px; /* Rounded button */
  padding: 0.5rem 1.25rem; /* Adjust padding */
  font-weight: 600;
}

.nav-link.btn:hover {
  transform: translateY(-2px); /* Subtle hover effect */
  box-shadow: 0 4px 8px rgba(242, 132, 130, 0.2); /* Subtle shadow on hover */
}

/* Search form enhancements */
.search-form .input-group-text {
  background-color: transparent;
  border-right: none;
}

.search-form .form-control, .search-form .form-select {
  border-left: none;
}

.search-form .input-group {
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Advanced search toggle styling */
#advanced-search-toggle {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: 600;
  color: #84A59D;
  border-radius: 2rem;
  transition: all 0.2s ease;
}

#advanced-search-toggle:hover {
  color: #F28482;
  text-decoration: none;
  background-color: rgba(132, 165, 157, 0.05);
}

#advanced-search-toggle i {
  transition: transform 0.2s ease;
}

#advanced-search-toggle:hover i {
  transform: translateY(2px);
}

/* Form checks styling */
.form-check {
  padding-left: 1.8em;
  margin-bottom: 0.5rem;
}

/* Scoped to .form-check, which is the only place the negative margin makes
   sense: Bootstrap pairs it with the wrapper's own padding-left. Unscoped, it
   dragged every checkbox outside a .form-check 1.8em to the left, which is how
   the "Contribution réduite" filter chip ended up with its box hanging out
   through the left edge of the pill. Inside .form-check nothing changes. */
.form-check .form-check-input {
  width: 1.2em;
  height: 1.2em;
  margin-left: -1.8em;
  margin-top: 0.15em;
}

/* Outside one, a checkbox is just a checkbox. */
.form-check-input {
  width: 1.2em;
  height: 1.2em;
}

/* A switch is not a checkbox and must not be squared down to one. The rule
   above loads after Bootstrap and beat .form-switch .form-check-input on source
   order, so every switch in the app came out 1.2em wide while keeping
   Bootstrap's 2em border-radius: a bare circle with the knob clipped out of it,
   reading the same whether it was on or off. */
.form-check.form-switch .form-check-input {
  width: 2em;
  border-radius: 2em;
}

/* Helper text */
.text-muted {
  font-size: 0.8rem;
}

/* Submit button enhancement */
.search-form .btn-primary {
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(132, 165, 157, 0.2);
}

.search-form .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(132, 165, 157, 0.3);
}

.card-img-top {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.card-title {
  color: var(--primary-color);
  font-weight: 600;
}

.card-text.text-muted {
  font-size: 0.9rem;
}

.badge {
  font-weight: 500;
  padding: 0.5em 0.75em;
}

.badge.bg-info {
  background-color: var(--secondary-color) !important;
}

.badge.bg-success {
  background-color: var(--success-color) !important;
}

.card-footer {
  padding: 1rem;
}

.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline-primary:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Form Validation Styles */
.required::after {
  content: "*";
  color: var(--danger-color);
  margin-left: 4px;
}

/* Validation States */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: var(--danger-color) !important;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-check-input:invalid {
  border-color: var(--danger-color) !important;
}

.was-validated .form-check-input:invalid ~ .form-check-label {
  color: var(--danger-color) !important;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--danger-color) !important;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-feedback {
  display: block;
}

/* Alert Styles */
.alert {
  position: relative;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

/* Form Group Styles */
.form-group {
  margin-bottom: 1rem;
}

.form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.form-control, .form-select {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(132, 165, 157, 0.25);
}

/* Checkbox Group Styles */
.form-check {
  margin-bottom: 0.5rem;
}

.form-check-input {
  margin-top: 0.2rem;
}

.form-check-label {
  margin-left: 0.5rem;
}

/* Submit Button Styles */
.btn-primary {
  background-color: var(--primary-button) !important;
  border-color: var(--primary-button) !important;
  color: white !important;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 0.5rem;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-button-hover) !important;
  border-color: var(--primary-button-hover) !important;
  box-shadow: 0 4px 8px rgba(132, 165, 157, 0.3);
}

/* Opening Hours Time Fields Styles */
.time-fields {
  width: 100%;
}

.time-input-group {
  min-width: 120px;
  max-width: 180px;
}

/* Make sure opening hours time inputs have consistent styling on all devices */
.time-input {
  text-align: center;
  -webkit-appearance: none; /* Remove default styles on iOS */
  font-size: 0.95rem;
  padding: 0.5rem 0.25rem;
}

/* Ensure consistent spacing and alignment on mobile */
@media (max-width: 768px) {
  .time-fields {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .time-input-group {
    flex: 1;
  }
}

/* Error message styling */
.error-message {
  color: var(--danger-color) !important;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  font-weight: 500;
  display: none;
}

.error-message.show {
  display: block !important;
}

.form-control.error,
.form-select.error {
  border-color: var(--danger-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Enhanced form validation styling.
   :user-invalid, not :invalid: a required field is "invalid" the moment the page
   loads, so plain :invalid painted every empty field red before the visitor had
   typed anything. :user-invalid only matches after they interact or submit. */
.required-field:user-invalid {
  border-color: var(--danger-color) !important;
}

.required-field:user-valid {
  border-color: #ced4da !important;
}

/* Make error messages more prominent */
.child-age-error,
.location-error,
.daycare-type-error {
  background-color: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.2);
  border-radius: 0.375rem;
  padding: 0.5rem;
  margin-top: 0.5rem;
  font-weight: 500;
}

/* Alert styling */
.alert {
  position: relative;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

/* Stat tiles: headline numbers, no chart. The number carries the emphasis, the
   icon carries the accent, and the label stays in muted ink so identity is never
   colour-alone. Shared by the landing page and the provider signup page.

   The --rail modifier is the landing page's narrow right-hand column. Everything
   it changes is a consequence of that column being 4/12 wide and needing to end
   level with the search block beside it, so none of it applies to the card when
   it sits at full width somewhere else. */
.stats-card--rail {
  position: sticky;
  top: 1rem;
}

/* Bootstrap's .btn-sm is a single class, so the .btn-primary padding declared
   in this file was beating it and every "small" primary button rendered full
   size. Restore the small sizing at equal specificity. */
.btn-sm.btn-primary,
.btn-sm.btn-secondary,
.btn-sm.btn-outline-primary,
.btn-sm.btn-outline-secondary,
.btn-group-sm > .btn {
  padding: 0.3rem 0.7rem !important;
  font-size: 0.8rem;
  border-radius: 0.4rem;
}

/* The card action row: one primary, the rest quiet, and a kebab that reads as
   an overflow affordance rather than a fourth call to action. */
.card-actions .btn-icon-only {
  padding: 0.3rem 0.55rem !important;
  color: #6c757d;
  border-color: rgba(0, 0, 0, 0.12);
}

.card-actions .btn-icon-only:hover,
.card-actions .btn-icon-only:focus {
  color: var(--text-color);
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.2);
}

/* A listing that cannot be found or cannot be contacted is broken from the
   provider's point of view, so it gets a real warning rather than grey text. */
.listing-warning {
  background-color: rgba(246, 189, 96, 0.16);
  border-left: 4px solid var(--accent-color);
}

.listing-warning__icon {
  color: #B8770A;
  flex: 0 0 auto;
}

.listing-warning__link {
  color: #8A5806;
}

.listing-warning__link:hover {
  color: #5E3D04;
}

/* Checkbox "chips": the global .form-check-label margin makes each one wide
   enough to wrap onto its own line inside a narrow column. */
.form-check-chip .form-check-label {
  margin-left: 0.25rem;
  white-space: nowrap;
}

.stats-card__title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #6c757d;
  text-align: center;
  margin-bottom: 0.75rem;
}

.stats-grid {
  display: grid;
  /* Fixed counts rather than auto-fit: six tiles auto-fitted landed as five plus
     an orphan. The rail gets a single column, wider viewports divide evenly. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


.stat-tile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.25rem;
}

/* Tiles side by side need no divider between them; the one below is for the
   rail, where they stack. */
/* Each tile is its own box at every width. It used to be a phones-only
   treatment, because the rail beside the search stacked its four tiles into a
   single divided column; the rail is a 2x2 grid now and wants the same boxes. */
.stat-tile {
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(132, 165, 157, 0.22);
  border-radius: 0.6rem;
}

.stat-tile__icon {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgba(132, 165, 157, 0.12);
  color: var(--primary-color);
  font-size: 0.85rem;
}

.stat-tile__value {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-color);
}

.stat-tile__label {
  font-size: 0.75rem;
  line-height: 1.25;
  color: #6c757d;
}

@media (min-width: 992px) {
  .stats-card--rail {
    position: static;
  }

  /* Two by two, the shape the tiles have everywhere else. This used to be a
     single column, on the grounds that two columns in 4/12 of the page wrapped
     the labels. They do wrap, onto two lines, and read perfectly well that way,
     while the stacked column ran far taller than the search block beside it. */
  .stats-card--rail .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .stats-card--rail .stat-tile {
    padding: 0.55rem 0.6rem;
    gap: 0.5rem;
  }

  .stats-card--rail .stat-tile__icon {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.75rem;
  }

  .stats-card--rail .stat-tile__value {
    font-size: 1.05rem;
    line-height: 1.15;
  }

  .stats-card--rail .stat-tile__label {
    font-size: 0.74rem;
    line-height: 1.2;
  }
}

/* A caller that renders a couple of tiles says so, rather than leaving a third
   of the row empty at the width where the grid opens up to three columns. */
.stats-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The heat map of nearby searches on the provider signup page. Mapbox paints
   into this box, so it needs a height before the map loads or the canvas
   initialises at zero and never recovers. */
.stats-map {
  height: 190px;
  border-radius: 0.6rem;
  overflow: hidden;
}

/* The consent block reads as a quiet aside rather than another form field: it is
   there to be understood before ticking, not filled in. */
.consent-block {
  background-color: rgba(132, 165, 157, 0.07);
  border: 1px solid rgba(132, 165, 157, 0.22);
  border-radius: 0.7rem;
  padding: 0.9rem 1rem;
}

.consent-block .form-check-label {
  font-size: 0.9rem;
}

.consent-block .form-text {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.45;
}

/* Keep multi-word nav items on one line; they were wrapping mid-phrase. */
.navbar-nav .nav-link {
  white-space: nowrap;
}

/* When the header runs out of room the brand tagline gives way, not the
   navigation: a truncated strapline is better than a nav row that wraps or
   pushes off-screen. */
.navbar-brand {
  min-width: 0;
  flex-shrink: 1;
}

/* The wrapper around the title and strapline needs min-width too, otherwise its
   default min-width:auto keeps the whole brand at its content width and the
   shrinking never happens. */
.navbar-brand > div {
  min-width: 0;
}

/* Sized so the brand and the five nav links both fit the standard 1320px
   container. The ellipsis is the fallback for anything narrower, not the
   normal desktop state. */
.navbar-brand p {
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 992px) {
  /* Take only the width the links need. Bootstrap's flex-grow:1 made the nav
     claim all the free space, which squeezed the brand into an ellipsis even
     when the row had room to spare. */
  .navbar .navbar-collapse {
    flex-grow: 0;
    flex-shrink: 0;
  }
}

/* Opening hours, on the public daycare page.
   One grid for the whole list, so the day column is exactly as wide as the
   longest label and every row shares that width. A flex row per day either
   pushed the hours to the far edge, leaving a hand's width of nothing between a
   day and its own hours, or needed a fixed column that is fine on a desktop and
   most of the screen on a phone. */
.opening-hours {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
}

.opening-hours > * {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* The separation is padding rather than a column-gap, so the row's underline
   runs the width of the card instead of breaking in the middle. */
.opening-hours__day {
  padding-left: 1rem;
  padding-right: 1.5rem;
}

.opening-hours__hours {
  padding-right: 1rem;
}

/* The last row closes the card. */
.opening-hours > *:nth-last-child(-n + 2) {
  border-bottom: 0;
}

/* Off-screen until focused. A keyboard visitor otherwise tabbed through the
   navbar and the news ticker on every single page before reaching the content. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background-color: var(--primary-button);
  color: #fff;
  text-decoration: none;
  border-bottom-right-radius: 0.4rem;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

/* Where you are, in the navbar. Bootstrap's .active alone is invisible against
   this theme's coral nav links, so the marker is an underline plus the darker
   ink: two signals, not colour alone. */
.navbar .nav-link.active {
  color: var(--primary-button) !important;
  border-bottom: 2px solid var(--primary-button);
}

.navbar .nav-link.active.text-danger {
  color: #b02a37 !important;
  border-bottom-color: #b02a37;
}

/* One control language for the pages a parent actually uses.
   The results page rebuild introduced rounded cards and pill controls, which
   left the search form looking like it belonged to an older site: same site,
   two eras, one click apart. These match the radii and weight used by
   .result-card and .filter-chip.

   Scoped to .search-panel and .search-form, which the home page and the alert
   form share, so admin and Devise screens are untouched. */
.search-panel {
  border-radius: 0.9rem;
}

.search-form .form-control,
.search-form .form-select,
.search-form .input-group-text,
.search-form .mapboxgl-ctrl-geocoder--input {
  border-radius: 0.6rem;
}

/* An input group has to keep its halves joined. */
.search-form .input-group > :not(:last-child),
.search-form .input-group > :not(:last-child) .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.search-form .input-group > :not(:first-child),
.search-form .input-group > :not(:first-child) .form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.search-form .form-label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

/* The type checkboxes read as choices rather than as a fenced-off group. */
.search-form .form-check-chip {
  white-space: nowrap;
}

.search-form .btn-lg {
  border-radius: 0.7rem;
}

.stats-card {
  border-radius: 0.9rem;
}

/* Mois / Ans. A two-state toggle, not a dropdown: opening the system picker to
   choose between exactly two things is a lot of ceremony, and inside the search
   bar's Âge chip it opened a second overlay on top of the first.

   Radios underneath, so the value posts as it always did and the arrow keys
   work. Styled here rather than with .btn-group and .btn-check, which fought
   these rules and produced one borderless label beside one black-outlined one,
   with nothing showing which was selected. */
.age-unit {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2rem;
  overflow: hidden;
  background-color: #fff;
}

/* The input is the state; the label is the whole of what is seen. Hidden with
   opacity and position rather than display:none, so it stays focusable. */
.age-unit__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.age-unit__label {
  margin: 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #6c757d;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.age-unit__label + .age-unit__input + .age-unit__label {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.age-unit__label:hover {
  color: var(--primary-button);
}

.age-unit__input:checked + .age-unit__label {
  background-color: var(--primary-button);
  color: #fff;
  font-weight: 600;
}

/* The input is visually hidden, so the focus ring has to be drawn on the label
   that stands in for it. */
.age-unit__input:focus-visible + .age-unit__label {
  outline: 2px solid var(--primary-button);
  outline-offset: -2px;
}

/* The landing page's search box: one field that matters, with the filters as
   chips under it, rather than a six-field form standing between a visitor and
   any result at all. */
/* Shown when the search button is pressed with half a search. The page's own
   prompt lives under the results area, below the fold, and is on screen before
   the button is pressed, so submitting looked like nothing happening. */
.search-bar__error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid #E4B4B0;
  border-left: 4px solid #B5504A;
  border-radius: 0.5rem;
  background-color: #FBEDEC;
  color: #8F3B36;
  font-size: 0.92rem;
  font-weight: 600;
}

/* The icon is added by the controller rather than sitting in the markup, so an
   empty message is genuinely empty. */
.search-bar__error::before {
  content: "\26A0";
  font-size: 1rem;
  line-height: 1;
}

/* The field or chip that is actually missing, so the message has something to
   point at. */
/* An outline, not a border: .search-bar__field has no border of its own to
   recolour, and the geocoder rebuilds the markup inside it, so anything set on
   the input is liable to be overwritten. An outline also costs no layout,
   so nothing shifts when it appears. */
.search-bar__field.is-missing {
  border-radius: 0.75rem;
  outline: 2px solid #B5504A;
  outline-offset: 1px;
}

.filter-chip.is-missing {
  border-color: #B5504A;
  color: #B5504A;
}

.search-bar {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  max-width: 46rem;
}

.search-bar__geocoder {
  flex: 1 1 auto;
  min-width: 0;
}

.search-bar__geocoder .mapboxgl-ctrl-geocoder {
  width: 100%;
  max-width: none;
  box-shadow: none;
  border-radius: 2rem;
}

.search-bar__geocoder .mapboxgl-ctrl-geocoder--input {
  border-radius: 2rem;
  height: 3rem;
}

.search-bar__submit {
  border-radius: 2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .search-bar { flex-direction: column; }
}


/* ---------------------------------------------------------------
   Search components, shared by the landing page and the results page.
   These lived in an inline <style> on the results page, so when the
   landing page started rendering the same cards and chips it rendered
   them unstyled.
   --------------------------------------------------------------- */
/* A filter, readable without opening it: the chip shows what it is set to. */
.filter-bar { margin-top: 0.75rem; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2rem;
  background-color: #fff;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #33413c;
  cursor: pointer;
}

.filter-chip:hover,
.filter-chip:focus-visible {
  border-color: var(--primary-button);
  color: var(--primary-button);
}

.filter-chip--static {
  background-color: #f1f3f5;
  cursor: default;
}

.filter-chip--static:hover {
  border-color: rgba(0, 0, 0, 0.15);
  color: #33413c;
}

.filter-chip--toggle.is-on {
  border-color: var(--primary-button);
  background-color: rgba(86, 118, 110, 0.08);
  color: var(--primary-button);
  font-weight: 600;
}

.filter-chip .form-check-input { cursor: pointer; }

.dropdown-menu .dropdown-item:has(input) { cursor: pointer; }

/* Liste / Carte, on a phone only. The two used to stack, which gave the map a
   screen of its own under a column of cards and set its drag against the page
   scroll. */
.results-view-toggle {
  display: inline-flex;
  margin-bottom: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2rem;
  overflow: hidden;
  background-color: #fff;
}

.results-view-toggle__button {
  border: 0;
  background: transparent;
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
  color: #6c757d;
  cursor: pointer;
}

.results-view-toggle__button + .results-view-toggle__button {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.results-view-toggle__button.is-on {
  background-color: var(--primary-button);
  color: #fff;
  font-weight: 600;
}

/* The card of the pin that was tapped, shown under the map on a phone. */
.results-selected {
  margin-top: 0.75rem;
}

/* Only ever hides on a phone. On a wide screen both columns stay put and the
   controller's class does nothing. */
@media (max-width: 991.98px) {
  .results-hidden-mobile {
    display: none !important;
  }
}

/* Announcing places. A count, a date and a button on one row is about 250px of
   a 330px card on a phone, which left the button squeezed against the edge. The
   date takes the room it needs and the button gets its own line. */
.places-announce__date {
  width: 10rem;
}

@media (max-width: 575.98px) {
  .places-announce__date {
    width: auto;
    flex: 1 1 8rem;
    min-width: 0;
  }

  .places-announce__submit {
    width: 100%;
  }
}

/* Form fields on a phone.
   ---------------------------------------------------------------------------
   Four fifths of the people filling this in are on a phone, where the row is
   about 390px wide. A "?" bubble took roughly 50 of them and the "Afficher"
   switch about 95, so an ordinary email address rendered as
   "glitchcode160@gmail.c…" with no way to see the rest. */
@media (max-width: 575.98px) {
  /* The bubble is help, and the same words are already on the field's own
     tooltip and in the form-text underneath. It is the first thing to go. */
  .input-group > .field-help {
    display: none;
  }
}

/* The ordinary actions on an alert row: Détails, Modifier, and pause or
   resume. One neutral treatment for all of them, so the only coloured button
   in the row is Supprimer.

   They used btn-outline-secondary and btn-outline-primary, which application.css
   paints coral and teal. Four buttons in three colours, two of them in the
   shade this site otherwise uses for links and warnings. */
.alert-action {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #5a6b5d;
}

.alert-action:hover,
.alert-action:focus-visible {
  background-color: rgba(86, 118, 110, 0.08);
  border-color: var(--primary-button);
  color: var(--primary-button);
}

/* Resuming a paused alert is the one that changes something for the better,
   so it keeps a hint of green without becoming a second call to action. */
.alert-action--resume {
  color: var(--primary-button);
  border-color: rgba(86, 118, 110, 0.4);
}

/* A filter currently narrowing the search, and the way to drop it.

   An applied filter is a statement about the current search, not a warning.
   The coral it used to wear comes from `a:not(.btn) { color: #F28482
   !important }` further up, which paints every link on the site, and coral on
   a chip with an x beside it reads as an error to clear.

   Written as a.applied-filter:not(.btn) rather than .applied-filter: that rule
   scores (0,1,1), because :not() counts its argument, and a bare class is
   (0,1,0). Both are !important, so specificity decides and the plain class
   loses. A first attempt at this fix did exactly that and changed nothing. */
a.applied-filter:not(.btn) {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 2rem;
  background-color: rgba(86, 118, 110, 0.1);
  color: var(--primary-button) !important;
  font-size: 0.85rem;
  text-decoration: none;
}

a.applied-filter:not(.btn) i {
  color: inherit;
}

a.applied-filter:not(.btn):hover {
  background-color: rgba(86, 118, 110, 0.2);
  color: var(--primary-button-hover) !important;
  text-decoration: none;
}

/* One result. A card rather than a row in a scrollable column: the photo is
   large enough to be worth having, and the whole page scrolls instead of a
   250px box inside it. */
.result-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.result-card:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}

.result-card__media {
  position: relative;
}

.result-card__flag {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
}

.result-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0.9rem 1rem 1rem;
}

.result-card__name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.15rem;
}

.result-card__address {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.result-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.result-card__places {
  color: #1a7f52;
  font-weight: 600;
}

.result-card__price {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 0.75rem;
}

/* The card the map is pointing at. Colour plus a ring, so it is not the only
   signal. */
.result-card.highlighted {
  box-shadow: 0 0 0 3px #F28482;
}

/* The photo across the top of a card, and what stands in for it. */
.photo-banner {
  position: relative;
  width: 100%;
  background-color: #f1f3f5;
}

.photo-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-banner__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card badges: a tint of the pin colour with ink of the same hue, so a card and
   its pin read as the same thing without the card carrying a block of saturated
   colour. Every ink clears 5:1 on its own tint.

   Contribution réduite is a third hue on purpose. It used to be Bootstrap's
   .bg-success, a green close enough to the garderie badge beside it that the two
   read as one category. Blue rather than a warm tint because it is good news: a
   rose pill beside a red "Tout est complet" button read as a warning. It also
   carries a check, so the distinction survives for anyone who cannot separate
   the hues, which matters most here: blue against green holds up under protanopia
   and deuteranopia (11.1 and 10.5 dE) but closes to 4.1 under tritanopia. */
.daycare-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0.22rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
}

.daycare-badge--garderie {
  background-color: #E3F0E9;
  color: #26705A;
  border-color: #C8E2D7;
}

/* Lavender, not the teal that was the other suggestion. Teal sits between the
   garderie green and the contribution réduite blue and collides with both:
   worst-case 7.1 and 7.4 dE across protan/deutan/tritan, under the 8 floor this
   palette is held to. Lavender is 32.2 from the green and 12.7 from the blue,
   and 7.0:1 against its own background. */
.daycare-badge--mf {
  background-color: #E7E2F6;
  color: #4C3D8F;
  border-color: #D6CEEE;
}

.daycare-badge--reduite {
  background-color: #E4EEF7;
  color: #1F5E8C;
  border-color: #C6DCEE;
}

/* The paid placement offer. Gold, like the ribbon it buys, and only as loud as
   a card that is asking for money should be next to the work a provider came
   here to do. */
.featured-offer {
  border-left: 4px solid #EFC24A !important;
}

.featured-offer .fa-star {
  color: #C9962B;
}

.featured-offer--active {
  background-color: #FDF7E7;
}

/* The selling card. Tightened: this sits above the work a provider came here to
   do, so it earns its space by being short. */
.featured-sell {
  padding: 1rem 1.25rem;
  border-radius: 0.9rem;
  background: #FDF3DC;
  border: 1px solid #EFC24A;
  color: #4A3A12;
}

.featured-sell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.featured-sell__badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3D2600;
  background: #EFC24A;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.featured-sell__price {
  font-size: 0.9rem;
}

.featured-sell__benefits {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0.85rem;
  font-size: 0.92rem;
}

.featured-sell__benefits li {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}

.featured-sell__icon {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #EFC24A;
  color: #3D2600;
  font-size: 0.7rem;
}

.featured-sell__ack {
  background: #fff;
  border: 1px solid #EFC24A;
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem 0.6rem 2.1rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.featured-sell__more {
  font-weight: 600;
  white-space: nowrap;
}

/* Held closed until the acknowledgement is ticked. */
.btn-featured.disabled,
.btn-featured[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
  background-color: #E3D6AE;
  border-color: #E3D6AE;
  color: #6d5a2a;
}

/* Several eligible listings, so the provider picks rather than being picked for.
   One line, because there is nothing to sell until they have chosen a subject. */
.featured-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.25rem;
  border-radius: 0.9rem;
  background: #FDF3DC;
  border: 1px solid #EFC24A;
  color: #4A3A12;
}

.featured-strip__icon {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #EFC24A;
  color: #3D2600;
}

.featured-strip__body {
  flex: 1 1 18rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
}

.featured-strip__choices {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Replaced in place when a provider posts a place, so it arrives without a page
   load. A brief lift, once. */
@media (prefers-reduced-motion: no-preference) {
  .featured-sell,
  .featured-strip,
  .featured-offer {
    animation: featured-appear 0.45s ease-out;
  }
}

@keyframes featured-appear {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to { opacity: 1; transform: none; }
}

.featured-hero {
  padding: 2rem;
  border-radius: 0.9rem;
  background: linear-gradient(0deg, #FDF3DC, #FDF3DC);
  border: 1px solid #EFC24A;
  color: #4A3A12;
}

/* The buy button, in the gold it is buying. Dark brown ink rather than white:
   8.46:1 against this gold, where white would be 1.68:1 and unreadable. */
.btn-featured,
.btn-featured:visited {
  background-color: #EFC24A;
  border-color: #EFC24A;
  color: #3D2600;
  font-weight: 600;
}

.btn-featured:hover,
.btn-featured:focus {
  background-color: #E8B733;
  border-color: #DFAC28;
  color: #3D2600;
}

.btn-featured:focus-visible {
  outline: 2px solid #3D2600;
  outline-offset: 2px;
}

.featured-hero__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #3D2600;
  background: #EFC24A;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.75rem;
}

/* The public listing page for a paid placement. The gold followed a parent from
   the results and the map and then stopped at the door, which is the one page
   the placement was paying to get them to. */
.featured-page-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.65rem 1rem;
  border-radius: 0.6rem;
  background: #FDF3DC;
  border: 1px solid #EFC24A;
  color: #4A3A12;
  font-size: 0.95rem;
}

.featured-page-banner .fa-star {
  color: #C9962B;
}

.featured-page-title {
  position: relative;
  padding-left: 0.85rem;
}

.featured-page-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 2px;
  background: #EFC24A;
}

/* Previews on the sales page. Scaled down and inert: they are there to be
   looked at, not clicked. */
.featured-preview {
  pointer-events: none;
  user-select: none;
}

.featured-preview--email {
  border: 1px solid #e6e0d5;
  border-radius: 0.6rem;
  padding: 0.75rem;
  background: #fff;
}

.featured-email-card {
  border-left: 4px solid #EFC24A;
  background: #FDF3DC;
  border-radius: 0.4rem;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.6rem;
}

.featured-email-card--plain {
  border-left-color: #84A59D;
  background: #F7EDE2;
  margin-bottom: 0;
  opacity: 0.7;
}

.featured-email-card__badge {
  display: inline-block;
  background: #EFC24A;
  color: #3D2600;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

/* Legend strip below the map. Overlaid on it, it hid whichever pin fell in
   that corner, and the corners are taken by the Mapbox logo and attribution. */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid rgba(0, 0, 0, 0.075);
  font-size: 12px;
  color: #5a6b5d;
}

.legend-item {
  display: inline-flex;
  align-items: center;
}

/* A small teardrop echoing the map pin, with the same white outline. */
.legend-pin {
  width: 13px;
  height: 17px;
  margin-right: 8px;
  flex: 0 0 auto;
  border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
  clip-path: polygon(50% 100%, 0 42%, 0 0, 100% 0, 100% 42%);
  box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Featured results: a gold border and a quiet tint, alongside the explicit
   badge, so it is never colour alone. Now that each result is its own card the
   border can simply be a border. */
/* A paid placement has to look promoted. The tint used to be a wash of gold at
   5%, which over white lands on very nearly the page's own cream: the one card
   meant to stand out was the only one not standing off the background. It keeps
   the white card and takes a heavier gold edge and a warm glow instead. */
.result-card.result-featured {
  border-color: #D9A21B;
  border-width: 2px;
  box-shadow: 0 0 0 4px rgba(217, 162, 27, 0.18), 0 0.35rem 1rem rgba(146, 96, 8, 0.16);
}

.result-card.result-featured:hover {
  box-shadow: 0 0 0 4px rgba(217, 162, 27, 0.28), 0 0.75rem 1.5rem rgba(146, 96, 8, 0.24);
}

/* The card's own action, in the card's own colour. A green outline button under
   a gold ribbon was the one part of the card that had not been paid for. */
.result-card.result-featured .btn-outline-primary {
  background-color: #EFC24A;
  border-color: #D9A21B;
  color: #3D2600;
  font-weight: 600;
}

.result-card.result-featured .btn-outline-primary:hover,
.result-card.result-featured .btn-outline-primary:focus {
  background-color: #E0AE2C;
  border-color: #C8860D;
  color: #3D2600;
}

/* The ribbon. Full width across the top of the card, so the promotion reads
   before anything else on it and does not fight the photo underneath. */
.result-card__ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.4rem 0.75rem;
  /* Flat. The gradient was doing an impression of brushed metal and landing
     nearer a 1998 web button. One bright gold, and the dark ink is what lets it
     be this bright: white here is 1.9:1, this ink is 8.5:1. */
  background-color: #EFC24A;
  color: #3D2600;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The same listing in the map popup, which said nothing about it at all. */
.popup-featured {
  border-left: 3px solid #C8860D;
  padding-left: 0.65rem !important;
}

.result-featured-badge {
  background-color: #C8860D;
  color: #fff;
  font-size: 0.68rem;
}


.legend-badge {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  display: inline-block;
  border-radius: 3px;
}
</style>

/* The age chip while it is still empty. A search with no age matches every
   listing regardless of who it can take, so this one is not optional, and the
   chip says so before you press anything. */
.filter-chip--required {
  border-color: var(--primary-button);
  border-style: dashed;
  color: var(--primary-button);
  font-weight: 600;
}

/* Both halves of a search are required, so both say so before you press
   anything: a location with no age returned nothing and gave no hint why. */
.filter-chip__required {
  color: var(--secondary-color);
  font-weight: 700;
  margin-left: 0.25rem;
}

/* The same mark the search bar uses for a required criterion, on ordinary form
   labels. aria-hidden on the span, with the requirement carried to assistive
   tech by the input's own required attribute rather than by a floating asterisk. */
.field-required {
  color: var(--secondary-color);
  font-weight: 700;
}

/* The password requirements under the field. A list rather than a sentence, so
   each rule is its own line and the eye can check them off. */
.password-rules {
  list-style: none;
  padding-left: 0;
  margin-top: 0.35rem;
}

.password-rules li {
  position: relative;
  padding-left: 1rem;
  line-height: 1.5;
}

.password-rules li::before {
  content: "\2022";
  position: absolute;
  left: 0.25rem;
  color: var(--primary-color);
}

.search-bar__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* Room for the asterisk. No border treatment here: the geocoder's markup is
   rebuilt by its own script, which overwrites the input's class list, and the
   visible box is the wrapper rather than the input, so a border on either is
   fragile. The mark carries the meaning on its own. */
.search-bar__field--required .form-control {
  padding-right: 2rem;
}

/* The box has no label to hang the mark on, so it sits inside it. Only shown
   while empty, which is also when the geocoder's own clear button is absent. */
.search-bar__required {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  color: var(--secondary-color);
  font-weight: 700;
  pointer-events: none;
  /* Above the geocoder, which paints its own input over this corner. */
  z-index: 10;
}


/* The search map: a panel beside the results that travels with the reader
   instead of scrolling away after the first two cards. */
.map-container {
  height: 420px;
}

.map-element,
#map {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.results-aside {
  position: sticky;
  top: 1rem;
}

@media (max-width: 991.98px) {
  .results-aside { position: static; }
  .map-container { height: 320px; }
}

/* The provider's own formatting, on the public fiche. Trix emits plain h1/ul/
   blockquote, and without this they inherit whatever the page happens to give
   them: a provider's heading came out larger than the listing's own name. */
.daycare-description h1 { font-size: 1.35rem; }
.daycare-description h2 { font-size: 1.2rem; }
.daycare-description h1,
.daycare-description h2 { margin-top: 1.25rem; margin-bottom: 0.5rem; }

.daycare-description ul,
.daycare-description ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.daycare-description blockquote {
  border-left: 3px solid var(--primary-color);
  padding-left: 0.9rem;
  margin: 1rem 0;
  color: #5a6b5d;
}

.daycare-description :last-child { margin-bottom: 0; }

/* The editor itself, so it does not sit oddly against the Bootstrap fields
   around it. */
trix-editor {
  min-height: 12rem;
  border-radius: 0.5rem;
  border-color: #dee2e6;
  background: #fff;
}

trix-editor:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(132, 165, 157, 0.25);
  outline: none;
}

/* A provider's own listing card when the placement is live. Same gold as the
   results, so what they bought looks the same wherever they see it. */
.listing-card--featured {
  border: 1px solid #EFC24A !important;
  box-shadow: 0 0 0 3px rgba(239, 194, 74, 0.18), 0 .125rem .25rem rgba(0,0,0,.075) !important;
  overflow: hidden;
}

.listing-card__featured-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.45rem 1rem;
  background: #EFC24A;
  color: #3D2600;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.listing-card__featured-days {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.featured-active {
  padding: 1rem 1.25rem;
  border-radius: 0.9rem;
  background: #FDF3DC;
  border: 1px solid #EFC24A;
  color: #4A3A12;
}

.featured-active__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.featured-active__remaining {
  font-size: 0.85rem;
  font-weight: 600;
}

/* The public fiche of a featured listing. Every card carries the gold, not just
   the banner at the top: a parent arriving from a gold result should land
   somewhere that still looks like the thing they clicked. */
.daycare-page--featured .card {
  border: 1px solid #EFC24A !important;
  box-shadow: 0 0 0 3px rgba(239, 194, 74, 0.14), 0 .125rem .25rem rgba(0,0,0,.06) !important;
}

.daycare-page--featured .card-header {
  background: #FDF3DC !important;
  border-bottom-color: #EFC24A !important;
}

/* No attachments in the description. Photos have their own gallery, with
   ordering and a cover shot; a file dropped inline would bypass all of that and
   land in the middle of the text. */
trix-toolbar .trix-button-group--file-tools {
  display: none;
}
/* Styles for opening hours */
.opening-hours-container {
  width: 100%;
}

.opening-hours-container .time-picker-popup {
  position: absolute;
  z-index: 1000;
  background-color: white;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}

/* Style for time input containers */
.opening-hours-container .time-input-group {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.opening-hours-container .time-input-group input[type="time"] {
  cursor: pointer;
  width: 115px;
}

.opening-hours-container .time-input-group.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.opening-hours-container .time-input-group.disabled input {
  cursor: not-allowed;
}

/* Style for all time inputs */
.opening-hours-container .time-input {
  cursor: pointer;
}

.opening-hours-container .time-input-group.disabled .time-input {
  cursor: default;
}

.opening-hours-container .form-check-input {
  cursor: pointer;
}

/* Style buttons in the opening hours section */
.opening-hours-container .btn-outline-primary {
  background-color: transparent;
  border-color: #0d6efd;
  color: #0d6efd;
  transition: all 0.2s;
}

.opening-hours-container .btn-outline-primary:hover {
  background-color: #0d6efd;
  color: white;
}

/* Style the preset buttons */
.opening-hours-container .preset-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.opening-hours-container .preset-buttons .btn {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

/* Add indicator for weekday labels */
.opening-hours-container .day-label {
  position: relative;
  padding-left: 8px;
}

.opening-hours-container .day-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 100%;
  background-color: #0d6efd;
  opacity: 0.6;
}

.opening-hours-container .day-label.weekend::before {
  background-color: #6c757d;
}

/* Hide native browser time picker arrows in some browsers */
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* Style for time inputs across browsers */
.opening-hours-container .time-input-group input[type="time"],
.opening-hours-container .time-input-group input[type="text"] {
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid #ced4da;
  position: relative;
  z-index: 1;
  cursor: pointer;
  width: 100%;
  font-family: sans-serif;
  font-size: 1rem;
}

.opening-hours-container .time-input-group input[type="time"]:disabled,
.opening-hours-container .time-input-group input[type="text"]:disabled {
  background-color: #e9ecef;
  opacity: 1;
  cursor: default;
}

/* Firefox-specific time input replacements */
/* Hide standard time pickers in Firefox */
html.firefox .standard-browser-time {
  display: none;
}

/* Show Firefox-specific text inputs only in Firefox */
.firefox-time-input {
  display: none; /* Hidden by default in all browsers */
  text-align: center;
}

/* But make them visible in Firefox */
html.firefox .firefox-time-input {
  display: block; /* Visible only in Firefox */
}

/* Additional Firefox-specific styles */
@-moz-document url-prefix() {
  .firefox-time-input {
    display: block; /* Ensure Firefox sees this */
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    cursor: text;
  }

  .firefox-time-input:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }

  .firefox-time-input:disabled {
    background-color: #e9ecef;
    opacity: 0.7;
    cursor: default;
  }

  /* For safety, hide any non-Firefox time inputs */
  .standard-browser-time {
    display: none;
  }
}

/* Chrome-specific styles */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type="time"] {
    -webkit-appearance: none;
  }
}

/* Opening Hours styles */

.opening-hours-container .table td {
  vertical-align: middle;
}

.opening-hours-container .form-check {
  margin: 0;
  padding-left: 0;
}

.opening-hours-container .form-check-input {
  margin-top: 0;
  margin-left: 0;
  position: static;
}

/* Custom time picker popup styles */
.time-picker-popup {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
}

.time-picker-popup div:hover {
  background-color: #f8f9fa;
}

/* The day heading holds the name and the Ouvert switch on one line. Below md
   it spans the row, so the switch sits at the right edge where a thumb is; from
   md up it is a fixed column beside the times, as before. */
.day-heading {
  min-width: 80px;
}

@media (max-width: 767.98px) {
  .day-row + .day-row {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  /* The times sit under the heading rather than beside it, and share the row
     evenly instead of one of them collapsing. */
  .day-row .time-fields {
    width: 100%;
  }

  .day-row .time-input-group {
    flex: 1 1 0;
    min-width: 0;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Color palette from https://coolors.co/palette/f6bd60-f7ede2-f5cac3-84a59d-f28482 */
:root {
  --yellow: #F6BD60;     /* Warm yellow */
  --cream: #F7EDE2;      /* Light cream background */
  --pink-light: #F5CAC3; /* Soft pink */
  --teal: #84A59D;       /* Teal/sage green */
  --coral: #F28482;      /* Coral/salmon */

  /* Text colors */
  --text-dark: #4A4A4A;
  --text-medium: #6B7280;
  --text-light: #94A3B8;
}

/* Global styles */
body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--cream);
  color: var(--text-dark);
  line-height: 1.6;
}

/* Navigation */
.navbar {
  background-color: white !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Typography overrides */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark);
}

/* Title and headings */
.card-title, .section-title {
  color: var(--text-dark);
}

/* Links */
a {
  color: var(--teal);
  text-decoration: none;
}

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

/* Buttons */
.btn-primary {
  background-color: var(--teal);
  border-color: var(--teal);
  color: white;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #6b8a83;
  border-color: #6b8a83;
  color: white;
}

.btn-secondary {
  background-color: var(--coral);
  border-color: var(--coral);
  color: white;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: #e57471;
  border-color: #e57471;
  color: white;
}

.btn-accent {
  background-color: var(--yellow);
  border-color: var(--yellow);
  color: white;
}

.btn-accent:hover, .btn-accent:focus, .btn-accent:active {
  background-color: #e5ad50;
  border-color: #e5ad50;
  color: white;
}

.btn-outline-primary {
  color: var(--teal);
  border-color: var(--teal);
}

.btn-outline-primary:hover {
  background-color: var(--teal);
  color: white;
}

.btn-outline-secondary {
  color: var(--coral);
  border-color: var(--coral);
}

.btn-outline-secondary:hover {
  background-color: var(--coral);
  color: white;
}

/* Text color classes */
.text-primary {
  color: var(--teal) !important;
}

.text-secondary {
  color: var(--coral) !important;
}

.text-accent {
  color: var(--yellow) !important;
}

.text-soft {
  color: var(--pink-light) !important;
}

/* Background color classes */
.bg-primary {
  background-color: var(--teal) !important;
}

.bg-secondary {
  background-color: var(--coral) !important;
}

.bg-accent {
  background-color: var(--yellow) !important;
}

.bg-soft {
  background-color: var(--pink-light) !important;
}

.bg-cream {
  background-color: var(--cream) !important;
}

/* Landing page styles */
.landing-container {
  padding: 3rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.landing-container h1 {
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.card {
  border: none;
  border-radius: 0.75rem;
  background-color: white;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}

/* Form styles */
.form-control, .form-select {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background-color: white;
}

.form-control:focus, .form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 0.25rem rgba(132, 165, 157, 0.25);
}

.form-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-dark);
}

.form-control-lg, .form-select-lg, .btn-lg {
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

.form-check-input:checked {
  background-color: var(--teal);
  border-color: var(--teal);
}

/* Buttons */
.btn {
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

/* Featured sections */
.featured-section {
  padding: 3rem 2rem;
  background-color: white;
  margin: 2rem 0;
  border-radius: 0.75rem;
}

.featured-card {
  background-color: var(--cream);
  border-radius: 0.75rem;
  padding: 1.5rem;
  height: 100%;
  transition: transform 0.3s ease;
}

.featured-card:hover {
  transform: translateY(-5px);
}

/* Social login buttons */
.btn-facebook {
  background-color: #3b5998;
  color: white;
}

.btn-facebook:hover {
  background-color: #344e86;
  color: white;
}

.btn-google {
  background-color: #ea4335;
  color: white;
}

.btn-google:hover {
  background-color: #d73925;
  color: white;
}

/* Divider with text in the middle */
.or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;
}

.or-divider::before, .or-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e2e8f0;
}

.or-divider span {
  padding: 0 1rem;
  color: var(--text-medium);
  font-size: 0.875rem;
}

/* Footer */
footer {
  background-color: white;
  color: var(--text-medium);
  margin-top: 3rem;
}

footer a {
  color: var(--teal);
  text-decoration: none;
}

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

footer .heart {
  color: var(--coral);
}

/* Mobile responsive */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  .card-body {
    padding: 1.5rem;
  }

  .form-control-lg, .form-select-lg, .btn-lg {
    padding: 0.625rem 0.875rem;
  }
}

.confirmation-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
}

/* Mapbox Geocoder custom styles */
.mapbox-geocoder-container {
  width: 100%;
  position: relative;
}

/* Ensure geocoder control takes full width and has appropriate styling */
.mapboxgl-ctrl-geocoder {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-shadow: none !important;
  border-radius: 0.375rem;
  border: 1px solid #ced4da;
  height: auto !important;
  background-color: #fff !important;
}

/* Input element styling to match Bootstrap */
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input {
  height: calc(1.5em + 0.75rem + 2px) !important;
  padding: 0.375rem 2.25rem !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #212529 !important;
  background-color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Form control large variant */
.form-control-lg.mapboxgl-ctrl-geocoder--input,
.search-form .mapboxgl-ctrl-geocoder--input {
  height: calc(1.5em + 1.5rem) !important;
  padding: 0.75rem 2.5rem !important;
  font-size: 1.25rem !important;
  min-height: 58px !important;
}

/* Make sure the input fills the container */
.mapboxgl-ctrl-geocoder--input {
  width: 100% !important;
  text-overflow: ellipsis;
}

/* Position the search icon and other icons */
.mapboxgl-ctrl-geocoder--icon {
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}

.mapboxgl-ctrl-geocoder--icon-search {
  left: 10px !important;
}

.mapboxgl-ctrl-geocoder--icon-close {
  right: 10px !important;
}

/* Suggestion list styling */
.mapboxgl-ctrl-geocoder--suggestion-title {
  font-weight: 600;
}

.mapboxgl-ctrl-geocoder--suggestion-address {
  color: #6c757d;
}

/* Make suggestions match Bootstrap styling */
.suggestions-wrapper {
  border-radius: 0.375rem;
  margin-top: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

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

.mapboxgl-ctrl-geocoder--powered-by {
  display: none !important;
}

/* Special styling for home page search input */
.input-group .mapbox-geocoder-container {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
}

/* Override Mapbox default styles for our site */
.mapboxgl-ctrl-geocoder.mapboxgl-ctrl {
  min-width: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: inherit;
  line-height: 1.5;
}

.mapboxgl-ctrl-geocoder.mapboxgl-ctrl input[type='text'] {
  height: auto !important;
  width: 100% !important;
  color: #333333;
  border: none;
  box-shadow: none;
  padding-left: 35px !important;
}

/* Fix position of the search icon */
.mapboxgl-ctrl-geocoder--icon {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.mapboxgl-ctrl-geocoder--icon-search {
  left: 10px !important;
}

.mapboxgl-ctrl-geocoder--icon-close {
  right: 10px !important;
}

/* Make the suggestions full width of the container */
.mapboxgl-ctrl-geocoder--suggestions {
  width: 100% !important;
  margin-top: 6px;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.1);
}

/* Hide the Mapbox 'powered by' message */
.mapboxgl-ctrl-geocoder--powered-by {
  display: none !important;
}

/* Fix suggestions dropdown visibility */
.mapboxgl-ctrl-geocoder .suggestions {
  position: absolute !important;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 6px !important;
  padding: 0;
  background-color: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.1);
  z-index: 1010 !important; /* Ensure it's above other elements */
  max-height: 300px;
  overflow-y: auto;
}

.mapboxgl-ctrl-geocoder .suggestions > li > a {
  padding: 8px 12px;
  text-decoration: none;
  display: block;
  color: #333;
  transition: background-color 0.2s;
}

.mapboxgl-ctrl-geocoder .suggestions > li > a:hover,
.mapboxgl-ctrl-geocoder .suggestions > .active > a {
  background-color: #f8f9fa;
  cursor: pointer;
}

/* Make sure suggestions wrapper doesn't hide suggestions */
.mapboxgl-ctrl-geocoder .suggestions-wrapper {
  position: static !important;
  z-index: 1010 !important;
}

/* Force autocomplete visibility on home page */
.mapboxgl-ctrl-geocoder .suggestions-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
  max-height: 500px !important;
  border-radius: 4px;
  overflow: visible !important;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.mapboxgl-ctrl-geocoder ul.suggestions {
  display: block !important;
  position: absolute !important;
  background: white;
  border: 1px solid #e0e0e0;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 0;
  list-style: none;
  margin: 0;
  border-radius: 4px;
  z-index: 9999 !important;
}

.mapboxgl-ctrl-geocoder .suggestions li {
  padding: 0;
  cursor: pointer;
  color: #000;
}

.mapboxgl-ctrl-geocoder .suggestions li a {
  padding: 10px 15px;
  text-decoration: none;
  color: #404040;
  display: block;
  cursor: pointer;
}

.mapboxgl-ctrl-geocoder .suggestions li.active a,
.mapboxgl-ctrl-geocoder .suggestions li:hover a {
  background-color: #f1f1f1;
}

.mapboxgl-ctrl-geocoder .suggestions li:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}

/* Styles for dedicated geocoder container */
.location-geocoder-wrapper {
  position: relative;
  margin-bottom: 10px;
}

.location-geocoder-wrapper .mapboxgl-ctrl-geocoder {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-shadow: none;
  border-radius: 0.375rem;
  border: 1px solid #ced4da;
}

/* Reset some Mapbox styles */
.mapboxgl-ctrl-geocoder {
  border: none;
  background: transparent;
  font-size: inherit;
  line-height: 1.5;
}

/* Make sure suggestions are visible and properly positioned */
.mapboxgl-ctrl-geocoder .suggestions {
  margin-top: 6px;
  width: 100% !important;
  left: 0;
  right: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  border-radius: 0.375rem;
  overflow: visible;
  z-index: 9999;
}

/* Style the individual suggestion items */
.mapboxgl-ctrl-geocoder .suggestions li {
  list-style: none;
}

.mapboxgl-ctrl-geocoder .suggestions li a {
  color: #333;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}

.mapboxgl-ctrl-geocoder .suggestions li.active a,
.mapboxgl-ctrl-geocoder .suggestions li:hover a {
  background-color: #f5f5f5;
}

/* Additional styles specifically for daycare center form geocoder */
#daycare-address-geocoder {
  position: relative;
  z-index: 10;
}

#daycare-address-geocoder .mapboxgl-ctrl-geocoder {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-shadow: none !important;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

/* Ensure home page geocoder continues to work */
#location-geocoder-container {
  position: relative;
  z-index: 10;
}

#location-geocoder-container .mapboxgl-ctrl-geocoder {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-shadow: none !important;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

/* Universal fix for suggestions dropdown visibility */
.mapboxgl-ctrl-geocoder .suggestions {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  margin-top: 6px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background-color: white !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
}

/* Ensure suggestions show on focus */
.mapboxgl-ctrl-geocoder--input:focus + .suggestions-wrapper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.suggestions-wrapper {
  transform: none !important;
  left: 0 !important;
  right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Make sure suggestions are properly hidden when needed */
.mapboxgl-ctrl-geocoder .suggestions.hidden,
.mapboxgl-ctrl-geocoder.mapboxgl-ctrl .suggestions[style*="display: none"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Clear default focus styling that might interfere */
.mapboxgl-ctrl-geocoder--input:focus {
  outline: none !important;
}

/* Fix suggestions list item styles */
.mapboxgl-ctrl-geocoder .suggestions li:hover {
  background-color: #f8f9fa !important;
}

/* Ensure geocoder containers don't create dupes */
.location-geocoder-wrapper, #daycare-address-geocoder {
  position: relative;
  min-height: 38px;
}

/* Prevent input flashes on load */
.mapboxgl-ctrl-geocoder--input {
  transition: none !important;
}

/* Add this CSS to ensure dropdown menus display correctly */

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1000;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0;
  font-size: 1rem;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

.dropdown-menu.show {
  display: block !important;
}

/* Always ensure dropdown items look right */
.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  text-decoration: none;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}

/* Fix for profile dropdown specific styling */
#navbarDropdown + .dropdown-menu.show {
  position: absolute;
  right: 0;
  left: auto;
}

/* Additional CSS for navbar dropdown */
.navbar .dropdown-menu.dropdown-menu-end.show {
  position: absolute;
  right: 0;
  left: auto;
  top: 100%;
  margin-top: 0.125rem;
}

/* Fix for user dropdown */
#userDropdown + .dropdown-menu.show {
  transform: translate3d(0px, 38px, 0px) !important;
  top: 0 !important;
  left: auto !important;
  right: 0 !important;
  position: absolute !important;
  will-change: transform !important;
  margin-top: 0 !important;
  z-index: 15000 !important;
}

.navbar .dropdown-menu.show {
  display: block !important;
  position: absolute !important;
  z-index: 15000 !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  border-radius: 0.25rem !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Extra specificity for the profile dropdown */
.navbar-nav .nav-item.dropdown .dropdown-menu.show {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1000 !important;
  min-width: 10rem !important;
  padding: 0.5rem 0 !important;
  margin: 0 !important;
  font-size: 1rem !important;
  color: #212529 !important;
  text-align: left !important;
  list-style: none !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  border-radius: 0.375rem !important;
}

/* Inside the burger menu, a submenu is part of the list, not a card floating
   over it.

   The rules above force position: absolute at every width, overriding the
   static positioning Bootstrap uses for a navbar dropdown below its expand
   breakpoint. The open burger menu also scrolls on its own, so it is a
   scrolling box, and a scrolling box clips an absolutely positioned child that
   runs past it. Opening "Mon compte" on a phone therefore showed a submenu cut
   off partway down with no way to reach the rest: z-index cannot help, because
   overflow clipping is not a stacking question.

   Declared here rather than in custom.css because application.css puts
   require_self after require_tree, so its own body is the last word. The
   selectors match or exceed the specificity of the ones above, including the
   one carrying an id, and come later in the same file. */
@media (max-width: 991.98px) {
  /* A phone menu is a list, not a centred row of links that happened to wrap.
     ms-auto, align-items-center and justify-content-end on the <ul> are what
     the desktop row needs; below the breakpoint the nav stacks into a column
     and those utilities leave every item floating in the middle with its
     submenu left-aligned underneath, which is why the two never looked like
     they belonged to each other. Bootstrap utilities carry !important, so
     these have to as well. */
  .navbar .navbar-collapse .navbar-nav {
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-bottom: 0.5rem;
  }

  .navbar .navbar-collapse .navbar-nav > .nav-item {
    width: 100%;
  }

  /* Full-width rows with a hairline between them, so the whole row is the tap
     target rather than the few characters in the middle of it. */
  .navbar .navbar-collapse .navbar-nav > .nav-item + .nav-item {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .navbar .navbar-collapse .navbar-nav .nav-link {
    padding: 0.7rem 0.25rem;
    text-align: left;
  }

  /* A tap leaves focus behind on a touch screen, so a hover underline stays
     drawn on whatever was pressed last. That is what was underlining
     "Mon compte" after it had been opened. */
  .navbar .navbar-collapse .navbar-nav .nav-link:hover,
  .navbar .navbar-collapse .navbar-nav .nav-link:focus {
    text-decoration: none;
  }

  /* The active marker is a bottom border, which underlines a word on a desktop
     row but draws a rule across a full-width list row, where it reads as a
     separator rather than as "you are here". A left bar instead, in the same
     colour the link already carries. */
  .navbar .navbar-collapse .navbar-nav .nav-link.active {
    border-bottom: 0 !important;
    border-left: 3px solid currentColor;
    padding-left: 0.6rem;
  }

  /* The dividers are separating items inside a panel that is already visibly
     one block. Three stacked boxes is what they read as. */
  .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-divider {
    display: none !important;
  }

  .navbar .navbar-nav .nav-item.dropdown .dropdown-menu,
  .navbar .navbar-nav .nav-item.dropdown .dropdown-menu.show,
  #userDropdown + .dropdown-menu.show {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    float: none !important;
    width: 100% !important;
    /* Beats the inline min-width on the element, which a plain declaration
       would not. */
    min-width: 0 !important;
    margin: 0.25rem 0 0.5rem !important;
    border: 0 !important;
    box-shadow: none !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-radius: 0.375rem !important;
  }

  /* Transparent, so the block reads as one panel. The rules further up paint
     the menu white, which left the header sitting on a different shade from
     the items under it. */
  .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item,
  .navbar .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-header {
    background-color: transparent !important;
    padding: 0.6rem 1.25rem !important;
  }
}

/* Environment Banner Styles */
.environment-banner {
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.environment-banner.development {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  border-bottom: 2px solid #e74c3c;
}

.environment-banner.staging {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  border-bottom: 2px solid #d68910;
}

.environment-banner i {
  opacity: 0.9;
}

.environment-banner strong {
  letter-spacing: 0.5px;
}

.environment-banner span {
  opacity: 0.9;
  font-weight: 400;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .environment-banner {
    font-size: 12px;
    padding: 6px 0;
  }

  .environment-banner span {
    display: none;
  }
}

/* Launch Banner Styles - Sticky Top Banner */
.launch-banner-sticky {
  position: sticky;
  top: 0;
  z-index: 900;
  background: linear-gradient(135deg, #84A59D 0%, #6B8E7F 50%, #5A7C6F 100%);
  color: white;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.launch-banner-sticky i {
  opacity: 0.95;
  color: #FFE9C0;
}

.launch-banner-sticky .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
  font-size: 12px;
  padding: 4px 12px;
  transition: all 0.3s ease;
}

.launch-banner-sticky .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: white;
}

/* News ticker inside the banner. Slow horizontal scroll, pauses on hover */
.news-ticker {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.news-ticker-track {
  display: inline-flex;
  white-space: nowrap;
  animation: news-ticker-scroll 45s linear infinite;
  will-change: transform;
}

.news-ticker:hover .news-ticker-track {
  animation-play-state: paused;
}

/* News pages back link. Site sage instead of Bootstrap blue */
.news-back-link {
  color: #5A7C6F !important;
}

.news-back-link:hover {
  color: #2C4A40 !important;
}

/* Provider news card. Poll posts highlighted in red */
.provider-news-poll-link {
  color: #c94436 !important;
  font-weight: 600;
}

.provider-news-poll-link:hover {
  color: #a33529 !important;
}

.provider-news-poll-badge {
  background-color: #f8d7da;
  color: #c94436;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

/* NB: !important + double-class scoping is required to override the global
   a:not(.btn) coral rule (0,1,1) + !important */
.launch-banner-sticky .news-ticker-item {
  color: #ffffff !important;
  text-decoration: none !important;
  padding-right: 60px;
}

.launch-banner-sticky .news-ticker-item strong {
  color: #FFE9C0 !important;
  font-weight: 700;
}

.launch-banner-sticky .news-ticker-item:hover,
.launch-banner-sticky .news-ticker-item:focus {
  color: #ffffff !important;
  text-decoration: none !important;
}

.launch-banner-sticky .news-ticker-item:hover strong {
  text-decoration: underline;
}

@keyframes news-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .news-ticker-track {
    animation: none;
  }
}

/* Responsive adjustments for sticky banner */
@media (max-width: 768px) {
  .launch-banner-sticky {
    font-size: 12px;
    padding: 8px 0;
  }

  .news-ticker-track {
    animation-duration: 30s;
  }
}