/* Public site: styles for CMS features the design has no artboard for (server-side filters, pagination,
   form errors, search, previews). Loaded after the design stylesheet (/assets/css/styles.css) and built
   only from its tokens, so a new design drop restyles these too. */

main:focus { outline: none; }
body.no-action-bar { padding-bottom: 0; }
.center { text-align: center; }

/* Hero and card text that comes from the rich-text editor arrives wrapped in <p> */
.hero .lead > :last-child, .feature-row__content .lead > :last-child { margin-bottom: 0; }
.hero .lead p { margin: 0 0 var(--space-2); }
.card__text p, .faq-card__a > p + p { margin: 0; }
.image-card__body p { margin-bottom: var(--space-3); max-width: 36ch; }

/* Rich-text lists shown as the design's red ticks (home service rows) */
.rich-ticks ul { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: 10px; }
.rich-ticks li { position: relative; padding-left: 34px; font-weight: var(--font-weight-semibold); }
.rich-ticks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--archies-primary-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D60A0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Server-side filters (gallery categories, blog categories): links styled like the design's filter buttons */
.filter--links a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 20px;
  background: var(--archies-white); color: var(--archies-dark); border: 1px solid var(--archies-silver); border-radius: 999px;
  font: var(--font-weight-semibold) 15px/1 var(--font-primary); box-shadow: var(--shadow-sm);
  transition: background .2s, color .2s, border-color .2s;
}
.filter--links a:hover { border-color: var(--archies-primary); text-decoration: none; color: var(--archies-dark); }
.filter--links a .i { display: none; width: 16px; height: 16px; }
.filter--links a[aria-current="page"] { background: var(--archies-dark); border-color: var(--archies-dark); color: var(--archies-white); }
.filter--links a[aria-current="page"] .i { display: inline-block; }

/* Pagination */
.pager { margin-top: var(--space-6); }
.pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.pager a, .pager span {
  display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--archies-silver); background: var(--archies-white); color: var(--archies-dark); font-weight: var(--font-weight-semibold);
}
.pager a:hover { border-color: var(--archies-primary); text-decoration: none; }
.pager span[aria-current="page"] { background: var(--archies-dark); border-color: var(--archies-dark); color: var(--archies-white); }
.i-flip { transform: scaleX(-1); }

/* Form-level error above the enquiry form */
.form-alert {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border: 2px solid var(--error); border-left-width: 8px; border-radius: var(--radius-md); background: var(--archies-white); color: var(--error); font-weight: 600;
}
.form-alert p { margin: 0; }
.form-alert .i { margin-top: 3px; }
.enquiry-form .cf-turnstile { min-height: 65px; }

/* Find your local Archie's */
.find-form { flex: 1 1 320px; max-width: 460px; }
.find-form__row { display: flex; gap: var(--space-2); }
.find-form__row input { flex: 1; }
.find-form__row .btn { flex: none; }
.find-message { margin-bottom: var(--space-4); font-weight: 600; }

/* Download cards stacked (service pages, downloads blocks) */
.downloads { display: grid; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-4); padding: 0; }

/* Booking calendar embed once the real calendar is in place */
.calendar-embed--live { display: block; padding: 0; min-height: 0; background: none; border: 0; }

/* Embed blocks (video, calendar) */
.embed iframe { width: 100%; border: 0; }

/* Draft preview banner */
.preview-banner { padding: 12px var(--side); background: #FFF4CE; border-bottom: 2px solid #C98A00; font-weight: 600; text-align: center; }
.preview-banner p { margin: 0; }

/* Narrow phones (320–379 px, e.g. iPhone SE 1st gen): the design's header row needs ~364 px, which pushed
   the page wider than the screen and part of the Menu button off it. Smaller logo; Call shows its icon only
   (the link keeps its "Call ..." accessible name). */
@media (max-width: 379px) {
  .brand img { width: 150px; height: auto; }
  .header-actions { gap: var(--space-2); }
  .hdr-btn:not(.hdr-menu) { font-size: 0; gap: 0; }
}

/* Grid columns may shrink below their content's minimum width (long select options, the calendar card),
   so forms and the booking panel fit a 320 px screen. */
.enquiry-layout > *, .book-layout > *, .contact-layout > * { min-width: 0; }
.field select { text-overflow: ellipsis; }
.form-grid > * { min-width: 0; }
.calendar-embed { grid-template-columns: minmax(0, 1fr); }

/* Cloudflare's security check is a fixed 300 px wide; scale it to fit the form on 320 px screens. */
@media (max-width: 379px) {
  .cf-turnstile { transform: scale(.84); transform-origin: left top; height: 55px; }
  .calendar-embed { padding: var(--space-4) var(--space-3); }
}

/* Header location picker: reuses the design's nav dropdown (.has-sub / .sub-toggle / .sub) */
.brand-loc--national { color: var(--archies-muted); text-transform: uppercase; letter-spacing: .04em; }
.loc-pick .sub-toggle > .i:first-child { width: 16px; height: 16px; color: var(--archies-primary); transform: none; }
.loc-pick .sub-toggle[aria-expanded="true"] > .i:first-child, .main-nav .loc-pick:hover .sub-toggle > .i:first-child { transform: none; }
.loc-pick__title { margin: 0 0 6px; padding: 0 12px; font: var(--font-weight-semibold) 13px/1.4 var(--font-primary); color: var(--archies-muted); text-transform: uppercase; letter-spacing: .04em; }
.loc-pick .sub a[aria-current="true"] { color: var(--archies-primary); }
.loc-pick__locate {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 6px; padding: 0 12px;
  background: none; border: 0; border-top: 1px solid var(--archies-border); border-radius: 0; cursor: pointer;
  font: var(--font-weight-semibold) 15px/1.2 var(--font-primary); color: var(--archies-dark); text-align: left;
}
.loc-pick__locate .i { width: 16px; height: 16px; color: var(--archies-primary); }
.loc-pick__locate:hover { color: var(--archies-primary); }
.loc-pick__status:empty { display: none; }
.loc-pick__status { margin: 4px 0; padding: 0 12px; font-size: 14px; }
.main-nav .loc-pick .sub a.loc-pick__all, .mobile-nav .loc-pick a.loc-pick__all { font-size: 14px; font-weight: 400; text-decoration: underline; }

/* Rich-text image layout chosen in the admin editor (classes allowed by RichTextSanitizer; the editor preview is in prose.css).
   Left/right images wrap text from 768px; on phones they sit full width. */
.prose img { height: auto; border-radius: var(--radius-md); }
.prose .img-w25 { width: 25%; }
.prose .img-w50 { width: 50%; }
.prose .img-w75 { width: 75%; }
.prose .img-w100, .prose .img-full { width: 100%; }
.prose .img-center { margin: var(--space-5) auto; }
.prose .img-full { margin: var(--space-5) 0; }
.prose .img-left, .prose .img-right { margin: var(--space-4) 0; }
.prose::after { content: ""; display: table; clear: both; }
@media (min-width: 768px) {
  .prose .img-left, .prose .img-right { margin-top: var(--space-1); margin-bottom: var(--space-3); }
  .prose .img-left:not([class*="img-w"]), .prose .img-right:not([class*="img-w"]) { max-width: 50%; }
  .prose .img-left { float: left; margin-right: var(--space-5); }
  .prose .img-right { float: right; margin-left: var(--space-5); }
}

/* Customised About sections (intro, story, team): the first paragraph keeps the design's lead size, as the default copy does. */
.prose--lead > p:first-child { font-size: var(--font-size-lead); line-height: 1.6; }
.prose--lead > :last-child { margin-bottom: 0; }