/* Avsa Adasi island journey theme: shared public and panel design tokens. */
:root {
  --brand: #087f8c;
  --brand-d: #075e70;
  --ink: #17384b;
  --ink-2: #466477;
  --mut: #718694;
  --line: #d9e7e8;
  --soft: #f5f7f3;
  --island-sea: #087f8c;
  --island-deep: #123d55;
  --island-glass: #dff2ed;
  --island-sand: #f6f0e3;
  --island-sun: #f2bb56;
  --island-coral: #e9785d;
  --island-leaf: #568b70;
  --island-violet: #7666a7;
  --island-shadow: 0 16px 42px rgba(18, 61, 85, .09);
  color-scheme: light;
}

html { scroll-padding-top: 92px; }
body { color: var(--ink); background: #f5f6f1; }
body, button, input, select, textarea { accent-color: var(--island-sea); }
:where(h1,h2,h3,h4) { color: var(--island-deep); }
:where(a) { text-decoration-color: color-mix(in srgb, var(--island-sea) 45%, transparent); }
:where(a:hover) { color: var(--island-sea); }
:where(button,input,select,textarea,a):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--island-sea) 55%, white);
  outline-offset: 3px;
}

/* Navigation and search */
header { border-color: var(--line); }
header .dnav a, header .mnav a { color: var(--island-deep); }
header .dnav a:hover, header .mnav a:hover { color: var(--island-sea); }
header .dnav .dnav-cta, header .btn, .btn.primary, .btn:not(.ghost):not(.secondary) {
  background-color: var(--island-sea);
  border-color: var(--island-sea);
}
header .dnav .dnav-cta:hover, header .btn:hover, .btn.primary:hover { background-color: var(--brand-d); }
.menu-search, .hsearch, .avsa-search, .search-panel {
  border-color: #cfe2e4;
  background: linear-gradient(135deg, #fff 0%, #f0f8f6 100%);
  box-shadow: 0 9px 26px rgba(18, 61, 85, .09);
}

/* Island palette across landing, discovery, guide, blog, ferry, listing, and hotel pages */
.home-page, .guide-hub-page, .guide-detail-page, .blog-refresh-page, .blog-detail,
.ferry-page, .ferry-route-page, .hotel-discovery-page, .hotel-list-page, .listing-page {
  color: var(--ink-2);
}
.wrap > .crumb, .guide-hub-page > .crumb, .guide-detail-page > .crumb,
.blog-refresh-page > .crumb, .hotel-breadcrumb, .ferry-route-crumb {
  border-color: var(--line);
  background: rgba(255,255,255,.88);
  color: var(--mut);
}
.avsa-hero { box-shadow: 0 22px 58px rgba(12, 63, 82, .18); }
.avsa-hero:after { background: linear-gradient(180deg, transparent 58%, rgba(9, 49, 66, .22)); }
.avsa-search, .avsa-hero-status, .avsa-plan, .avsa-section, .island-ferries,
.guide-more-section, .blog-refresh-page .blog-topic, .ferry-live-panel,
.hotel-discovery-stat, .hotel-list-guide, .detail-panel {
  border-color: var(--line);
  box-shadow: 0 10px 28px rgba(18, 61, 85, .055);
}
.avsa-section-heading h2, .guide-section h2, .blog-refresh-page h2,
.ferry-section h2, .hotel-section-heading h2 { color: var(--island-deep); }
.avsa-section-heading .eyebrow, .guide-kicker, .blog-eyebrow,
.ferry-route-eyebrow, .hotel-section-eyebrow, .detail-eyebrow { color: var(--island-sea); }
.avsa-card-arrow, .guide-quick-links a, .guide-back-link, .blog-refresh-page .blog-chips .chip,
.hotel-breadcrumb a, .ferry-route-shortcuts a {
  border-color: #cce3e4;
  background: linear-gradient(145deg, #fff, #f1f8f6);
  color: var(--brand-d);
}
.avsa-hotel-card, .avsa-listings .card, .guide-hub-page .guide-card,
.guide-detail-page .guide-card, .blog-refresh-page .blog-post-grid .card,
.blog-refresh-page .blog-featured, .blog-detail > .grid .card,
.hotel-card-shell, .hotel-public-room-card, .ferry-route-content,
.listing-card, .ilan-card {
  border-color: var(--line);
  background: linear-gradient(155deg, #fff 0%, #fbfcf8 100%);
  box-shadow: 0 12px 30px rgba(18, 61, 85, .065);
}
.avsa-hotel-card:hover, .guide-hub-page .guide-card:hover, .guide-detail-page .guide-card:hover,
.blog-refresh-page .blog-post-grid .card:hover, .blog-detail > .grid .card:hover,
.hotel-card-shell:hover { border-color: #9bcfd0; box-shadow: var(--island-shadow); }
.guide-card b, .avsa-discover-icon, .avsa-stat-icon, .hotel-public-room-icon,
.hotel-discovery-stat .icon, .detail-block-icon {
  border-color: #cfe8e7;
  background: linear-gradient(145deg, #e8f6f2, #fff4dc);
}
.guide-card b, .avsa-discover-icon, .avsa-stat-icon { color: var(--island-sea); }
.blog-refresh-page .blog-hero, .blog-detail-hero, .guide-detail-hero,
.guide-hub-hero, .hotel-discovery-hero, .ferry-hero, .ferry-route-hero {
  border-color: #cfe3e3;
  box-shadow: 0 18px 48px rgba(18, 61, 85, .085);
}
.blog-refresh-page .blog-hero, .guide-detail-hero {
  background: radial-gradient(circle at 92% 2%, rgba(242,187,86,.25), transparent 25%),
    linear-gradient(128deg, #e2f2ef 0%, #f8f3e7 58%, #e8f4ef 100%);
}
.blog-detail-hero { background: radial-gradient(circle at 90% 5%, rgba(242,187,86,.3), transparent 24%), linear-gradient(125deg,#e3f2ee,#f8f2e5 66%,#dcefea); }
.ferry-hero, .ferry-route-hero { background: linear-gradient(125deg, #123d55 0%, #087f8c 72%, #26a2a0 100%); }
.ferry-hero :where(h1,h2,p), .ferry-route-hero :where(h1,h2,p) { color: #fff; }
.ferry-live-panel, .hotel-booking-callout, .hotel-claim-banner {
  background: linear-gradient(115deg, #e7f5f1 0%, #fff8e8 100%);
}
.hotel-amenity-item, .hotel-address-card, .blog-detail > .row2 > div,
.blog-article-hotels, .hotel-faq-item, .hotel-review-card {
  border-color: var(--line);
  background: #fbfcf9;
}
.hotel-select-room, .hotel-booking-callout > .btn, .hotel-claim-banner > a,
.avsa-search-submit, .ferry-route-primary, .listing-card .btn {
  background: var(--island-sea);
  color: #fff;
}
.hotel-select-room:hover, .hotel-booking-callout > .btn:hover, .hotel-claim-banner > a:hover,
.avsa-search-submit:hover, .ferry-route-primary:hover { background: var(--brand-d); }

/* Semantically coloured shared SVG icons */
.ui-icon[data-icon="home"], .ui-icon[data-icon="building"] { color: #477cbb !important; }
.ui-icon[data-icon="sparkles"], .ui-icon[data-icon="star"] { color: #d69a28 !important; }
.ui-icon[data-icon="clock"], .ui-icon[data-icon="help"], .ui-icon[data-icon="book"] { color: #7666a7 !important; }
.ui-icon[data-icon="pin"], .ui-icon[data-icon="map"] { color: #e9785d !important; }
.ui-icon[data-icon="paw"], .ui-icon[data-icon="check"] { color: #568b70 !important; }
.ui-icon[data-icon="wifi"], .ui-icon[data-icon="snowflake"] { color: #3c9cc0 !important; }
.ui-icon[data-icon="sun"], .ui-icon[data-icon="utensils"] { color: #dc8c32 !important; }
.ui-icon[data-icon="fridge"] { color: #547ec2 !important; }
.ui-icon[data-icon="phone"], .ui-icon[data-icon="message"] { color: #087f8c !important; }
.ui-icon[data-icon="whatsapp"] { color: #378b62 !important; }
.ui-icon[data-icon="heart"] { color: #dc6f75 !important; }
.ui-icon[data-icon="ship"] { color: #087f8c !important; }

/* Guide readability: each subject gets a clear, numbered section heading. */
.guide-article-content { max-width: 900px; margin: 24px auto 44px; border-color: #dce8e5; box-shadow: 0 14px 38px rgba(18,61,85,.06); }
.guide-article-content h2 {
  counter-increment: guide-section;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 13px;
  margin: 2.1em 0 .85em;
  padding: 15px 17px;
  border: 1px solid #dce9e6;
  border-left: 4px solid var(--island-sea);
  border-radius: 15px;
  background: linear-gradient(110deg,#eef7f4,#fffaf0);
  box-shadow: 0 6px 16px rgba(18,61,85,.045);
  scroll-margin-top: 110px;
  font-size: clamp(1.18rem,2.4vw,1.58rem);
}
.guide-article-content { counter-reset: guide-section; }
.guide-article-content h2::before {
  content: counter(guide-section, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #d9efeb;
  color: var(--island-sea);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.guide-article-content h2:nth-of-type(3n+2) { border-left-color: var(--island-coral); background: linear-gradient(110deg,#fff1e9,#fffaf0); }
.guide-article-content h2:nth-of-type(3n+2)::before { background: #ffe5d8; color: #bd5b3f; }
.guide-article-content h2:nth-of-type(3n) { border-left-color: #598d72; background: linear-gradient(110deg,#edf6e9,#fffaf0); }
.guide-article-content h2:nth-of-type(3n)::before { background: #e2f0df; color: #487c61; }
.guide-article-content h3 { color: #315f73; }
.guide-detail-page > nav.guide-card-grid { gap: 12px; margin: 24px auto 40px; }
.guide-detail-page .guide-card { min-width: 0; overflow-wrap: anywhere; }

/* Compact sticky guide title and hotel section navigation */
.guide-detail-hero { position: sticky; top: 72px; z-index: 30; transition: padding .2s ease, border-radius .2s ease, box-shadow .2s ease; }
.guide-detail-hero.is-compact { display: flex; align-items: center; min-height: 58px; max-height: 64px; overflow: hidden; padding: 9px 18px; border-radius: 14px; box-shadow: 0 8px 24px rgba(18,61,85,.16); }
.guide-detail-hero.is-compact .guide-kicker, .guide-detail-hero.is-compact p, .guide-detail-hero.is-compact .guide-back-link { display: none; }
.guide-detail-hero.is-compact h1 { overflow: hidden; max-width: 100%; margin: 0; font-size: clamp(.96rem,1.65vw,1.15rem); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.det .otel-section-nav { position: sticky; top: 72px; z-index: 40; padding: 10px 8px; border: 1px solid #dce8e5; border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(18,61,85,.11); }
.det .otel-section-nav a { border-color: #d8e8e8; background: #f4faf8; color: #31586a; }
.det .otel-section-nav a:hover, .det .otel-section-nav a:focus-visible { border-color: #7cc4c6; background: #e3f3ef; color: var(--brand-d); }

/* Footer and panel surfaces share the same sea-glass/sand identity. */
body > footer { background: var(--island-deep); }
body > footer :where(a,p,small,li) { color: #d8e8e8; }
body > footer :where(h2,h3,strong,b) { color: #ffe0a3; }
body > footer a:hover { color: #ffe0a3; }
:where(.admin-shell,.admin-page,.owner-dashboard,.owner-page,.panel-page,.chat-admin-page) :where(.card,.box,.panel-card,.detail-panel) {
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(18,61,85,.055);
}
body.has-owner-sidebar :where(.card,.box,.panel-card,.detail-panel,.stat-card,.dashboard-card) {
  border-color: var(--line);
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(18,61,85,.055);
}
body.has-owner-sidebar :where(.btn,.button) { background-color: var(--island-sea); border-color: var(--island-sea); color: #fff; }

@media (max-width: 820px) {
  html { scroll-padding-top: 66px; }
  .guide-detail-hero { top: 56px; }
  .guide-detail-hero.is-compact { min-height: 52px; max-height: 58px; padding: 8px 13px; }
  .det .otel-section-nav { top: 56px; }
}
@media (max-width: 560px) {
  .guide-article-content { padding: 20px 16px; }
  .guide-article-content h2 { grid-template-columns: 34px minmax(0,1fr); gap: 10px; padding: 12px; border-radius: 13px; font-size: 1.08rem; }
  .guide-article-content h2::before { width: 32px; height: 32px; border-radius: 10px; }
  .guide-detail-page > nav.guide-card-grid { grid-template-columns: 1fr; }
  .det .otel-section-nav { max-width: 100vw; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}