/* Component layer. Loads last, after the page sheets and the theme, so a plain control rule here wins by
   order and nothing needs !important. The card, panel and section-heading bases sit inside :where() so they
   carry no specificity: they are the defaults, and any page sheet can vary them without fighting. */
:root{--control-radius:4px;scroll-padding-top:110px;color-scheme:light}
::selection{background:#dbe7cf;color:#283b34}
input,textarea{caret-color:#a24931}input,textarea,select{font:inherit;font-size:max(16px,1em)}
.button,button,a{touch-action:manipulation}

/* Buttons and control shapes */
.button,button,.round-link,.filter-chip,.trip-tabs a,.calendar-arrow,.calendar-view-tabs a,.site-header .mobile-menu-button,.primary-nav .nav-account,.nav-member{border-radius:var(--control-radius)}
.button{transition:background-color .18s ease-out,outline-color .18s ease-out,transform .18s ease-out;outline:1px solid transparent;outline-offset:3px}
.button:hover{outline-color:currentColor;transform:translateY(-1px)}
.site-header .mobile-menu-button{background:#283b34;color:#fffef8;border:1px solid #283b34;min-height:44px;appearance:none;-webkit-appearance:none;padding:10px 16px}

/* Focus ring, one colour everywhere. The selector list carries enough specificity to beat every page-level ring. */
:is(a,button,input,select,textarea,summary,[tabindex],[role=option]):focus-visible,.messages-shell :focus-visible,.settings-page :focus-visible,.newsletter-form :focus-visible,.newsletter-preferences :focus-visible{outline:2px solid #a24931;outline-offset:4px}

/* Cards: an image-led block with a caption underneath. */
:where(.card,.destination-card,.heritage-story-card,.heritage-timeline-card){min-width:0}

/* Panels: a soft surface with rounded corners. Page sheets set padding and any border. */
:where(.panel,.soft-panel,.admin-content .admin-product,.enquiry-card){border-radius:5px;background:var(--theme-surface,var(--paper))}
:where(.panel){padding:1.5rem;margin-bottom:1.25rem}

/* Section headings: title on the left, an action or a note on the right. */
:where(.section-heading,.admin-section-heading,.heritage-section-heading,.overview-band-heading){display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
:where(.section-heading,.admin-section-heading,.heritage-section-heading,.overview-band-heading)>h2{margin-top:0}

::view-transition-old(root),::view-transition-new(root){animation-duration:160ms}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.button{transition:none}.button:hover{transform:none}}

/* Legal pages: list text reads at the same size as the paragraphs around it. */
.legal-page li{font-size:17px;line-height:1.8;margin-bottom:.5rem}.legal-page ul,.legal-page ol{padding-left:1.3rem;margin-block:0 1.4rem}@media(max-width:700px){.legal-page li{font-size:16px}}

/* Profile entry. Wide screens show one "My profile" link; the phone menu also lists the three things people open it for. */
.nav-profile-more{display:none}
@media(max-width:960px){.primary-nav .nav-profile{margin-top:10px}.nav-profile-more{display:flex;flex-direction:column}.nav-profile-more a,.nav-profile-more button{display:flex;align-items:center;justify-content:flex-start;min-height:48px;padding:10px 0 10px 18px;font:inherit;font-size:15px;font-weight:400;color:inherit;text-decoration:none;text-align:left;width:100%;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;cursor:pointer}.nav-profile-more form{margin:0}}
@media(min-width:961px) and (max-width:1100px){.primary-nav{gap:12px}.primary-nav .nav-account{padding-inline:12px}}
.account-sign-out{margin:1rem 0 2rem}

/* Agenda option toggles: a full-height tap target on touch screens. */
@media(max-width:700px){.personal-agenda-item .agenda-options summary{min-height:44px;display:flex;align-items:center}}