/* ==========================================================================
   Catbalogan City Planning Data Portal
   Visual language matched to the CBMS Tableau dashboards:
   orange header band, pill navigation, Tableau 10 accents,
   white rounded cards on a light blue-grey panel.
   ========================================================================== */

:root {
  /* Dashboard header */
  --head-orange:    #ffa95a;   /* header band */
  --pill:           #d66b00;   /* nav pill, other pages */
  --pill-hover:     #bf5f00;
  --pill-current:   #fbe3c8;   /* nav pill, current page */

  /* Navigation, inside the header band */
  --nav-text:       #4a2f10;   /* item text at rest */
  --nav-hover:      #e07f1f;   /* hover fill */
  --nav-active:     #d66b00;   /* current page fill */

  /* Tableau 10 accents, same series colors the dashboards use */
  --tab-blue:       #4e79a7;
  --tab-orange:     #f28e2b;
  --tab-red:        #e15759;
  --tab-teal:       #76b7b2;
  --tab-green:      #59a14f;
  --tab-yellow:     #edc948;
  --tab-purple:     #b07aa1;
  --tab-blue-pale:  #c4e1f6;
  --tab-orange-pale:#fdcf87;

  /* Surfaces */
  --bg:             #f7f9fc;   /* page background */
  --panel:          #eceff5;   /* panel behind card groups */
  --surface:        #ffffff;   /* cards */
  --border:         #dde3ec;

  /* Text */
  --text:           #222b36;
  --text-muted:     #5b6879;
  --text-dim:       #5e6f84;

  /* Status */
  --stat-good:      #59a14f;
  --stat-warn:      #ff5500;

  --radius:         8px;
  --shadow:         0 1px 3px rgba(30, 50, 80, .10);
  --space:          8px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', 'Segoe UI Variable', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

code, .mono { font-family: 'Cascadia Code', Consolas, monospace; font-size: 12px; }

.page-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;   /* discounts mobile browser chrome */
}

/* Embed pages lock the viewport so the iframe owns exactly the remaining
   height. Tableau scrolls inside the frame at every screen size. Letting the
   page grow instead leaves dead space under short phone layouts. */
.page-shell.embed {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header band, mirrors the dashboard header
   -------------------------------------------------------------------------- */

.site-head {
  background: var(--head-orange);
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 12px 24px 0;
  flex-shrink: 0;
}
.head-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.head-seal { width: 52px; height: 52px; flex-shrink: 0; display: block; }
.head-title {
  font-size: 21px;
  font-weight: 700;
  color: #1b1b1b;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -.2px;
}
.head-sub {
  font-size: 12.5px;
  color: #4a3a29;
  margin: 3px 0 0;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Navigation, right side of the header band
   -------------------------------------------------------------------------- */

/* Its own lighter band, full-bleed across the foot of the header, so the
   navigation reads as a distinct strip rather than floating on the brand
   colour. Always a full row, so it lays out identically on every page. */
.head-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  width: calc(100% + 48px);
  margin: 12px -24px 0;
  padding: 7px 24px;
  background: rgba(255, 255, 255, .34);
  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(150, 75, 0, .10);
}

/* Soft shading falling away from the band on both sides, so the navigation
   sits on its own plane rather than butting flat against its neighbours. */
.head-nav::before,
.head-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
}
.head-nav::before {
  top: -12px;
  background: linear-gradient(to bottom, rgba(150, 75, 0, 0), rgba(150, 75, 0, .12));
}
.head-nav::after {
  bottom: -12px;
  background: linear-gradient(to bottom, rgba(120, 60, 0, .15), rgba(120, 60, 0, 0));
}
.nav-pill {
  font-size: 13px;
  font-weight: 600;
  color: var(--nav-text);
  background: transparent;
  border: 1px solid transparent;
  padding: 7px 15px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.nav-pill:hover {
  background: var(--nav-hover);
  color: #fff;
}
.nav-pill.active,
.nav-pill.active:hover {
  background: var(--nav-active);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}

/* Phone menu button. Hidden on desktop, where the full row is shown. */
.nav-toggle {
  display: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 14px;
  color: var(--nav-text);
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(150, 75, 0, .25);
  border-radius: 4px;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .7); }
.nav-toggle-bars { display: inline-block; width: 14px; height: 10px; position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after,
.nav-toggle-bars span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars span    { top: 4px; }
.nav-toggle-bars::after  { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 4px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 4px; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero: short, so the index below is reachable without scrolling far.
   Text is dark on the orange rather than white, which was close to
   unreadable against this value.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #ffb87d 0%, #ff9f47 60%, #f79a45 100%);
  padding: 34px 24px 36px;
  border-bottom: 1px solid rgba(150, 75, 0, .22);
  flex-shrink: 0;
}
.hero-mark {
  position: absolute;
  right: -56px;
  top: 50%;
  transform: translateY(-50%);
  width: 330px;
  max-width: 34%;
  opacity: .16;
  pointer-events: none;
  user-select: none;
}
.hero-inner { position: relative; max-width: 1180px; margin: 0 auto; }
.hero-title {
  font-size: 32px;
  font-weight: 700;
  color: #2d1a06;
  line-height: 1.2;
  letter-spacing: -.3px;
  margin: 0 0 10px;
  max-width: 26ch;
}
.hero-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #4b3211;
  max-width: 62ch;
  margin: 0 0 20px;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.btn {
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.btn-primary {
  background: #9c4f00;
  color: #fff;
  border: 1px solid #9c4f00;
}
.btn-primary:hover { background: #7d3f00; border-color: #7d3f00; }
.hero-secondary {
  font-size: 14px;
  font-weight: 600;
  color: #5a3a10;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-secondary:hover { color: #2d1a06; }

/* --------------------------------------------------------------------------
   Panel + section headings
   -------------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  padding: 26px 24px 36px;
  flex: 1;
}
.panel-inner { max-width: 1180px; margin: 0 auto; }
.section-title {
  font-size: 21px;
  font-weight: 700;
  color: #141414;
  letter-spacing: -.2px;
  margin: 0 0 5px;
}
.section-sub {
  font-size: 13.5px;
  color: #4a5361;
  margin: 0 0 4px;
  max-width: 72ch;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Dataset index: an atlas contents page, not a grid of cards. Rules and
   grouping carry the structure, so nothing needs a coloured stripe.
   -------------------------------------------------------------------------- */

.atlas-group { margin-top: 30px; }
.atlas-group:first-of-type { margin-top: 24px; }
.atlas-group-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #141414;
  margin: 0 0 3px;
}
.atlas-group-note {
  font-size: 13px;
  color: #5a6372;
  margin: 0 0 6px;
  max-width: 70ch;
  line-height: 1.55;
}
.atlas-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
  border-top: 1px solid #ccd3dc;
}
.atlas-item {
  display: block;
  padding: 14px 6px 15px;
  border-bottom: 1px solid #e3e7ed;
  text-decoration: none;
  color: inherit;
}
.atlas-item:hover { background: #fdf4e9; }

/* Title, subtitle and provenance separate by size and weight, so the list
   stays legible in plain black. */
.atlas-name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #141414;
  letter-spacing: -.1px;
}
.atlas-item:hover .atlas-name {
  color: #9c4f00;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.atlas-desc {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: #3f4855;
  margin-top: 4px;
}
.atlas-src {
  display: block;
  font-size: 12px;
  color: #6c7686;
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   View switcher, picks a view within one workbook
   -------------------------------------------------------------------------- */

.view-switch {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  flex-shrink: 0;
}
.view-tab {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 14px;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.view-tab:hover { color: var(--tab-blue); border-color: var(--tab-blue-pale); }
.view-tab.active,
.view-tab.active:hover {
  background: var(--tab-blue);
  border-color: var(--tab-blue);
  color: #fff;
}
.view-note {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: 8px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Office identity block (about)
   -------------------------------------------------------------------------- */

.office-identity { display: flex; align-items: center; gap: 22px; }
.office-logo {
  width: 118px;
  height: 118px;
  flex-shrink: 0;
  object-fit: contain;
}
.office-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--tab-blue);
  margin: 0 0 3px;
  line-height: 1.3;
}
.office-line { font-size: 12.5px; color: var(--text-dim); margin: 0 0 10px; }
.office-lede { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* --------------------------------------------------------------------------
   Source disclaimer banner
   -------------------------------------------------------------------------- */

.source-banner {
  background: #fff4e3;
  border-bottom: 1px solid var(--tab-orange-pale);
  padding: 8px 24px;
  font-size: 12.5px;
  color: #6b4500;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Viz container
   -------------------------------------------------------------------------- */

#vizContainer {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--panel);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Below --viz-min-width the viz keeps its full width and the container
   scrolls, rather than Tableau clipping the layout. */
.viz-frame {
  width: 100%;
  height: 100%;
  min-width: var(--viz-min-width, 0);
  max-width: 1400px;
  margin: 0 auto;
  border: none;
  display: block;
}
#vizContainer.viz-phone { overflow-x: hidden; }
#vizContainer.viz-phone .viz-frame { min-width: 0; }

/* Pan controls, shown only when the viz overflows its container */
/* An author `display` beats the UA's [hidden] rule, so restate it. */
.pan-bar[hidden] { display: none; }
.pan-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pan-btn {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: var(--tab-blue);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
}
.pan-btn:hover:not(:disabled) { background: var(--tab-blue); border-color: var(--tab-blue); color: #fff; }
.pan-btn:disabled { opacity: .35; cursor: default; }
/* Shown when the Tableau frame has not loaded, so the page is never a
   blank panel with no way forward. */
.viz-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: var(--panel);
}
.viz-fallback[hidden] { display: none; }
.viz-fallback-title { font-size: 15px; font-weight: 600; color: var(--text); }
.viz-fallback-text  { font-size: 13px; color: var(--text-muted); max-width: 52ch; line-height: 1.6; margin: 0; }
.viz-fallback-link  { font-size: 14px; font-weight: 600; color: #9c4f00; }

.pan-hint {
  font-size: 12px;
  color: var(--text-dim);
  flex: 1;
  min-width: 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Content pages
   -------------------------------------------------------------------------- */

.content { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 28px 24px 48px; }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 16px;
}
.card h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--tab-blue);
  margin: 0 0 12px;
}
.content h1 { font-size: 20px; font-weight: 700; color: #9c4f00; margin: 0 0 6px; }
.content .lede { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0 0 20px; max-width: 640px; }
.content p, .content li { font-size: 13px; line-height: 1.7; color: var(--text-muted); }
.content p { margin: 0 0 12px; }
.content p:last-child, .content ul:last-child { margin-bottom: 0; }
.content ul { margin: 0 0 12px; padding-left: 18px; }
.content li { margin-bottom: 6px; }
.content a { color: var(--tab-blue); }
.content a:hover { color: var(--tab-orange); }
.content strong { color: var(--text); font-weight: 600; }

.data-rows { margin: 0; }
.data-row {
  display: flex;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.data-row:last-child { border-bottom: none; padding-bottom: 0; }
.data-row dt { flex: 0 0 160px; color: var(--text-dim); font-size: 12.5px; }
.data-row dd { margin: 0; color: var(--text-muted); line-height: 1.6; }

.layer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.layer-item:last-child { border-bottom: none; padding-bottom: 0; }
.layer-title { font-size: 13px; font-weight: 600; color: var(--text); }
.layer-desc  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.status-tag {
  font-size: 10px;
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
  background: #eaf3ea;
  color: var(--stat-good);
  border: 1px solid #c6e0c3;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.footer-views { font-size: 12px; color: var(--text-dim); }
.footer-links { display: flex; gap: 18px; }
.footer-links a { font-size: 12px; color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--tab-orange); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .atlas-list { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: the eight links filled several rows before any content, so they
   collapse behind a labelled menu button with an explicit open state. */
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .site-head { padding-bottom: 10px; }
  .head-nav { display: none; }
  .head-nav.is-open { display: flex; margin-bottom: -10px; }
  .head-nav .nav-pill { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 640px) {
  .site-head    { padding: 10px 16px 0; gap: 12px; }
  .head-nav     { width: calc(100% + 32px); margin: 10px -16px 0; padding: 6px 16px; }

  .hero         { padding: 26px 16px 28px; }
  .hero-title   { font-size: 25px; max-width: none; }
  .hero-desc    { font-size: 14.5px; margin-bottom: 18px; }
  .hero-mark    { width: 230px; right: -80px; opacity: .12; }
  .btn          { font-size: 14px; padding: 11px 20px; }
  .atlas-list   { gap: 0; }
  .head-seal    { width: 42px; height: 42px; }
  .head-title   { font-size: 17px; }
  .head-sub     { font-size: 11px; }
  .nav-pill     { font-size: 12px; padding: 6px 11px; }

  .panel        { padding: 16px; }

  .view-switch  { flex-wrap: wrap; padding: 8px 16px; }
  .view-note    { margin-left: 0; flex-basis: 100%; }

  .office-identity { flex-direction: column; align-items: flex-start; gap: 14px; }
  .office-logo     { width: 92px; height: 92px; }
  .content      { padding: 20px 16px 40px; }
  .card         { padding: 18px 16px; }
  .source-banner{ padding: 8px 16px; }
  .pan-hint     { display: none; }
  .pan-bar      { justify-content: space-between; }

  .site-footer  { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-links { flex-wrap: wrap; gap: 14px; }

  .data-row     { flex-direction: column; gap: 2px; }
  .data-row dt  { flex: none; }
}