/* Paddlers Cove - Resources page (loads after auth.css) */
.pc-app [hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-resources .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.res-hero {
  background:
    linear-gradient(100deg, rgba(10, 32, 56, .95) 0%, rgba(12, 42, 72, .82) 50%, rgba(12, 42, 72, .55) 100%),
    image-set(url("../img/about-lake.webp") type("image/webp"), url("../img/about-lake.jpg") type("image/jpeg")) center 60% / cover no-repeat,
    var(--pc-navy, #123a63);
}
.res-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.res-hero .eyebrow .icon { width: 17px; height: 17px; }

/* emergency strip */
.sos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.sos-card { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: #fff; text-decoration: none; color: inherit;
  border: 1px solid rgba(228, 225, 217, .9); box-shadow: 0 18px 44px rgba(10, 32, 56, .12); transition: transform .15s, box-shadow .15s; }
.sos-card:hover { transform: translateY(-2px); box-shadow: 0 22px 50px rgba(10, 32, 56, .18); }
.sos-card > .icon { width: 42px; height: 42px; padding: 10px; box-sizing: border-box; border-radius: 12px; background: #fbf4e6; color: var(--pc-gold, #c38d2c); }
.sos-card b { display: block; font-family: var(--pc-serif, Georgia, serif); font-size: 21px; color: var(--pc-navy, #123a63); line-height: 1.1; }
.sos-card small { display: block; font-size: 13px; color: var(--pc-muted, #5d6873); }
.sos-card.red { background: linear-gradient(135deg, #b4392a, #8e2c20); border-color: #8e2c20; }
.sos-card.red > .icon { background: rgba(255, 255, 255, .16); color: #fff; }
.sos-card.red b { color: #fff; font-size: 30px; }
.sos-card.red small { color: #fbe0db; }

/* tools */
.res-tools { position: sticky; top: var(--header-h, 76px); z-index: 20; margin: 0 -8px 12px; padding: 10px 8px; background: rgba(247, 245, 240, .95); backdrop-filter: blur(8px); }
.res-jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; }
.res-jump::-webkit-scrollbar { display: none; }
.res-jump a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--pc-line, #e4e1d9); background: #fff;
  font-weight: 700; font-size: 14px; color: var(--pc-navy, #123a63); text-decoration: none; white-space: nowrap; }
.res-jump a:hover { border-color: var(--pc-gold, #c38d2c); }
.res-jump .icon { width: 16px; height: 16px; color: var(--pc-gold, #c38d2c); }
.res-tools-row { display: flex; gap: 10px; }
.res-search { position: relative; flex: 1; }
.res-search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--pc-muted, #5d6873); }
.pc-app .res-search input { padding-left: 42px; border-radius: 999px; height: 46px; }
.tool-btn { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px; border-radius: 999px; cursor: pointer; border: 1.5px solid #dcd8ce; background: #fff;
  color: var(--pc-navy, #123a63); font: 700 14px var(--pc-sans, sans-serif); white-space: nowrap; }

/* sections */
.res-sec { margin: 26px 0 34px; scroll-margin-top: calc(var(--header-h, 76px) + 120px); }
.res-sec-h { padding-bottom: 10px; margin-bottom: 16px; border-bottom: 2px solid var(--pc-navy, #123a63); }
.res-sec-h h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--pc-serif, Georgia, serif); color: var(--pc-navy, #123a63); font-size: 30px; }
.res-sec-h h2 .icon { width: 26px; height: 26px; color: var(--pc-gold, #c38d2c); }
.res-sec-h p { margin: 6px 0 0; color: var(--pc-muted, #5d6873); font-size: 15.5px; max-width: 820px; line-height: 1.55; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.res-card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; padding: 18px 20px; border: 1px solid rgba(228, 225, 217, .9); box-shadow: 0 6px 20px rgba(14, 45, 79, .07); }
.rc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rc-top h3 { margin: 0; font-family: var(--pc-serif, Georgia, serif); color: var(--pc-navy, #123a63); font-size: 20px; line-height: 1.2; }
.rc-tag { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: #f4efe3; color: #8d6317; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rc-note { margin: 6px 0 12px; color: #33404c; font-size: 14.5px; line-height: 1.5; }
.rc-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.rl { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--pc-line, #e4e1d9); background: #fbfaf7;
  color: var(--pc-navy, #123a63); font-weight: 700; font-size: 13.5px; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.rl .icon { width: 15px; height: 15px; color: var(--pc-teal, #1c6b8c); }
.rl:hover { background: var(--pc-navy, #123a63); border-color: var(--pc-navy, #123a63); color: #fff; }
.rl:hover .icon { color: #fff; }
.rl-map { background: #e3eef8; border-color: #c4dbe8; }
.rl-tel { background: #eef6ec; border-color: #cfe3c8; }
.rl-tel .icon { color: #3f7a3a; }
.rc-extra { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--pc-cream, #f7f5f0); color: var(--pc-muted, #5d6873); font-size: 13.5px; line-height: 1.45; }
.rc-print { display: none; }
.res-foot { margin: 12px 0 0; font-size: 13.5px; color: var(--pc-muted, #5d6873); font-style: italic; }
.res-none { text-align: center; padding: 40px 20px; }
.res-none h3 { font-family: var(--pc-serif, Georgia, serif); color: var(--pc-navy, #123a63); font-size: 26px; margin: 0 0 6px; }
.res-none a { color: var(--pc-teal, #1c6b8c); }
.res-help { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 10px; }
.res-help > div { flex: 1; min-width: 260px; }
.res-help h2 { margin: 0 0 4px; font-family: var(--pc-serif, Georgia, serif); color: var(--pc-navy, #123a63); font-size: 24px; }
.res-help p { margin: 0; color: var(--pc-muted, #5d6873); }
.res-verified { text-align: center; font-size: 13px; color: var(--pc-muted, #5d6873); margin: 18px 0 0; }

@media (max-width: 960px) { .sos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .res-grid { grid-template-columns: minmax(0, 1fr); }
  .res-tools { position: static; }
  .tool-btn span { display: none; }
  .sos-card { padding: 12px 14px; }
  .sos-card b { font-size: 17px; }
  .sos-card.red b { font-size: 24px; }
  .res-sec-h h2 { font-size: 25px; }
}

/* print: a one-page-ish fridge list */
@media print {
  @page { margin: 10mm; }
  .site-header, .badge, footer, .res-tools, .res-help, .res-verified, .rc-links, .rc-extra, .res-sec-h p, .res-foot, .flashes { display: none !important; }
  .acct-hero { padding: 0 0 4mm !important; background: none !important; color: #000 !important; }
  .acct-hero::after, .acct-hero p, .acct-hero .eyebrow { display: none !important; }
  .acct-hero h1 { color: #123a63 !important; font-size: 20pt !important; margin: 0 !important; }
  .acct-hero h1 em { color: #c38d2c !important; }
  .acct-hero h1::after { content: " · Paddlers Cove quick numbers"; font: 9pt Arial, sans-serif; color: #666; }
  .acct-body { margin-top: 0 !important; }
  .pc-main { padding: 0 !important; background: #fff !important; }
  .sos { grid-template-columns: repeat(4, 1fr); gap: 2mm; margin-bottom: 4mm; }
  .sos-card, .res-card { box-shadow: none !important; border: .6pt solid #bbb !important; transform: none !important; }
  .sos-card.red { background: #fff !important; } .sos-card.red b, .sos-card.red small { color: #b4392a !important; }
  .res-sec { margin: 3mm 0; break-inside: auto; }
  .res-sec-h { margin-bottom: 2mm; padding-bottom: 1mm; border-width: 1pt; }
  .res-sec-h h2 { font-size: 13pt; }
  .res-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2mm; }
  .res-card { padding: 2mm 3mm; break-inside: avoid; }
  .rc-top h3 { font-size: 10pt; }
  .rc-tag { display: none; }
  .rc-note { font-size: 8pt; margin: 1mm 0; }
  .rc-print { display: block; font-size: 9pt; font-weight: 700; margin: 0; }
}