/* Additions on top of site.css for the PHP build. */

/* menu button swaps between the two icons */
.menu-button .icon-close { display: none; }
.menu-is-open .menu-button .icon-open { display: none; }
.menu-is-open .menu-button .icon-close { display: block; }
.mobile-nav[hidden] { display: none !important; }
.desktop-nav button, .mobile-nav button, .footer-nav button, .brand-mark, .nav-cta, .text-link, .button { cursor: pointer; }
.footer-nav a { color: inherit; font-size: inherit; }

/* FAQ answers are always in the page; only the open one shows */
.faq-item:not(.is-active) p { display: none; }

/* booking widget states */
[hidden] { display: none !important; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.booking-dates button:disabled { opacity: .32; cursor: not-allowed; }
.booking-empty { color: var(--ink-muted); font-size: 12px; margin: 0; padding: 10px 0; }
.booking-error { color: #b3261e; background: #fdecea; border: 1px solid #f5c6c2; font-size: 12px; padding: 10px 14px; margin: 0 0 14px; }
.booking-when { color: var(--ink); font-size: 14px; }
.booking-reset { cursor: pointer; margin-top: 18px; }
.success-icon { color: var(--orange); display: flex; justify-content: center; margin-bottom: 12px; }
a.article-card { display: block; color: inherit; }

/* inner pages */
.public-page { display: flex; flex-direction: column; }
.public-page > header { gap: 18px; flex-wrap: wrap; }
.public-page-nav { display: flex; align-items: center; gap: 22px; font-size: 11px; }
.public-page-nav a { display: inline-flex; align-items: center; gap: 7px; color: #ffffffc7; transition: color .18s; }
.public-page-nav a:hover { color: #fff; }
.public-page > article, .public-page > .blog-list { flex: 1; }
.public-page-body ul { margin: 0 0 18px; padding-inline-start: 22px; list-style: disc; }
.public-page-body a { color: var(--orange); text-decoration: underline; }
.public-page-back { margin-top: 46px; }
.blog-list { padding-block: 80px; width: 100%; }
.blog-list h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 700; line-height: 1.25; }
.blog-list .articles-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.blog-empty { color: var(--ink-muted); font-size: 13px; }
@media (max-width: 600px) {
  .public-page-nav { gap: 14px; font-size: 10px; }
  .public-page-nav a:first-child { display: none; }
}

/* phone numbers read left-to-right but sit on the right like the other fields */
.booking-form input[type=tel], .message-form input[type=tel] { direction: ltr; text-align: right; }