/*
Theme Name: PetFriendly Florida
Theme URI: https://petfriendlyflorida.com
Author: Entropy Media Limited
Author URI: https://entropymedialimited.com
Description: Custom hub-and-spoke travel theme for PetFriendlyFlorida.com. Region index, city hubs, article and gear-roundup templates, affiliate disclosure handling, per-city souvenir shirts pulled from the remote SATG store, and enforced Amazon Associates tagging.
Version: 1.27.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petfriendly-florida
*/

/* ============================================================
   Tokens
   ============================================================ */
:root {
  /* Pale blue, not cream. The warm #FFFDF8 default had ended up on every
     property in the portfolio, which made unrelated sites read as one network.
     Blue also suits a coastal subject and throws the red-orange accent
     forward, where the cream muffled it. */
  --color-bg: #EFF6FC;
  --color-surface: #FFFFFF;
  --color-text: #123A57;
  --color-body: #2F5A78;
  --color-standfirst: #22516F;
  --color-muted: #5A7B93;
  --color-muted-2: #6E8CA0;
  --color-accent: #E8452B;
  --color-accent-300: #B3341E;
  --color-accent-700: #FFD3C7;
  --color-tint: #FFE9E3;
  --color-tint-cool: #E9F1F6;
  --color-photo: #EAF2F7;
  --color-divider: rgba(18, 58, 87, .14);
  --color-rule: rgba(18, 58, 87, .10);
  --color-band-1: #FFC20E;
  --color-band-2: #FF7A3D;
  --color-band-text: #5C3410;
  --color-notice-bg: #FFF3E0;
  --color-notice-border: #FFC98A;
  --shadow-sm: 0 0 0 1px rgba(18, 58, 87, .10);
  --shadow-md: 0 0 0 1px rgba(18, 58, 87, .12), 0 6px 18px rgba(18, 58, 87, .10);
  --shadow-lg: 0 0 0 1px rgba(18, 58, 87, .14), 0 16px 40px rgba(18, 58, 87, .14);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1120px;
  --wrap-narrow: 1000px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: pretty;
  margin: 0 0 12px;
}
h1 { font-size: 40px; letter-spacing: -.02em; }
h2 { font-size: 27px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-muted);
}

p { margin: 0 0 16px; }

a { color: var(--color-accent); text-decoration: none; }
a:hover, a:focus { color: var(--color-accent-300); text-decoration: underline; }

img { max-width: 100%; height: auto; }

hr, .pff-hr {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: 24px 0;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.pff-skip:focus {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  background: #fff; color: var(--color-text);
  padding: 10px 16px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); clip: auto; width: auto; height: auto;
}

.pff-wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.pff-wrap--narrow { max-width: var(--wrap-narrow); }

/* ============================================================
   Buttons
   ============================================================ */
.pff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-decoration: none;
}
.pff-btn:hover, .pff-btn:focus { text-decoration: none; background: rgba(18, 58, 87, .05); color: var(--color-text); }

.pff-btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.pff-btn--primary:hover, .pff-btn--primary:focus {
  background: var(--color-accent-300);
  border-color: var(--color-accent-300);
  color: #fff;
}
.pff-btn--onband {
  border-color: var(--color-text);
  color: var(--color-text);
  background: rgba(255, 255, 255, .55);
}
.pff-btn--onband:hover, .pff-btn--onband:focus { background: rgba(255, 255, 255, .8); color: var(--color-text); }
.pff-btn--block { display: flex; width: 100%; }
.pff-btn--sm { font-size: 13px; padding: 7px 14px; }

/* ============================================================
   Header
   ============================================================ */
.pff-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  position: relative;
  z-index: 20;
}
.pff-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.pff-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--color-text);
  flex: none;
}
.pff-brand:hover, .pff-brand:focus { text-decoration: none; color: var(--color-text); }
.pff-brand__mark { display: block; height: 34px; width: auto; }
.pff-brand__accent { color: var(--color-accent); }

.pff-nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.pff-nav a { color: var(--color-body); }
.pff-nav a:hover, .pff-nav a:focus { color: var(--color-accent); text-decoration: none; }
.pff-nav .current-menu-item > a,
.pff-nav .current_page_item > a,
.pff-nav .current-menu-ancestor > a,
.pff-nav .current_page_ancestor > a { color: var(--color-accent); }
.pff-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.pff-nav li { position: relative; }
.pff-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 200px;
  flex-direction: column;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 30;
}
.pff-nav li:hover > .sub-menu, .pff-nav li:focus-within > .sub-menu { display: flex; }
.pff-nav .sub-menu a { display: block; padding: 7px 10px; border-radius: var(--radius-sm); }
.pff-nav .sub-menu a:hover { background: rgba(232, 69, 43, .09); }

.pff-header__spacer { flex: 1; }

.pff-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 5px 10px;
  min-width: 190px;
  flex: none;
}
.pff-search svg { flex: none; }
.pff-search input {
  background: transparent;
  border: 0;
  color: var(--color-text);
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  width: 100%;
  min-width: 0;
}

.pff-nav-toggle {
  display: none;
  border: 1px solid var(--color-divider);
  background: transparent;
  border-radius: var(--radius-md);
  padding: 7px 10px;
  cursor: pointer;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 13px;
}

/* ============================================================
   Disclosure banner
   ============================================================ */
.pff-disclosure {
  background: var(--color-notice-bg);
  border-bottom: 1px solid var(--color-notice-border);
  padding: 8px 20px;
  font-size: 12px;
  color: var(--color-band-text);
  text-align: center;
}
.pff-disclosure a { color: var(--color-band-text); text-decoration: underline; }

.pff-disclosure--inline {
  border-left: 2px solid var(--color-accent);
  border-bottom: 0;
  background: transparent;
  text-align: left;
  padding: 8px 0 8px 14px;
  font-size: 13px;
  color: var(--color-body);
  margin-bottom: 24px;
}

/* ============================================================
   Breadcrumbs / meta
   ============================================================ */
.pff-crumbs { font-size: 12px; color: var(--color-muted-2); margin-bottom: 16px; }
.pff-crumbs a { color: var(--color-muted-2); }
.pff-crumbs a:hover { color: var(--color-accent); }
.pff-crumbs__sep { padding: 0 4px; }

.pff-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 20px;
}

/* ============================================================
   Home
   ============================================================ */
.pff-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 40px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 40px;
}
.pff-kicker {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: 14px;
}
.pff-hero h1 { font-size: 52px; margin-bottom: 16px; }
.pff-hero__deck { font-size: 17px; color: var(--color-body); max-width: 46ch; margin-bottom: 24px; }
.pff-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pff-hero__figure {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-md);
}
.pff-hero__figure img { display: block; width: 100%; height: auto; }

.pff-stats { display: flex; gap: 28px; margin-top: 32px; flex-wrap: wrap; }
.pff-stats__n { font-family: var(--font-heading); font-size: 26px; line-height: 1.1; }
.pff-stats__l { font-size: 12px; color: var(--color-muted); }

.pff-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-top: 12px;
  padding-bottom: 56px;
}
.pff-map svg { width: 100%; height: auto; overflow: visible; }
.pff-map__note { font-size: 12px; color: var(--color-muted-2); margin-top: 10px; }
/* Each region is stroked in its own fill colour so neighbouring county borders
   inside it disappear. Hover has to move the stroke as well, or the old colour
   is left behind as an outline. */
.pff-region { cursor: pointer; transition: fill .15s ease, stroke .15s ease; }
.pff-region:hover, .pff-region:focus {
  fill: var(--color-band-1);
  stroke: var(--color-band-1);
  outline: none;
}

/* A section's standing note - context that has to travel with every article,
   because most readers arrive on a species page from search and never see the
   section index. */
.pff-section-note {
  background: var(--color-tint-cool);
  border-left: 3px solid var(--color-band-1);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 16px;
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-body);
  max-width: 66ch;
}

/* ============================================================
   Corrections and contact
   ============================================================ */
.pff-correction-line {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-rule);
  font-size: 13px;
  color: var(--color-muted);
}
.pff-hero-figure { margin: 0 0 28px; }
.pff-hero-figure__cap {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
}

.pff-correction-line a { margin-left: 4px; }
/* In the footer this is a <p> inside .pff-footer, which caps paragraphs at 34ch
   for the brand blurb - that wrapped the correction prompt onto two lines. */
.pff-footer .pff-correction-line { max-width: none; }

.pff-form { max-width: 60ch; }
.pff-form__field { display: block; margin-bottom: 16px; }
.pff-form__field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--color-text);
}
.pff-form input[type="text"],
.pff-form input[type="email"],
.pff-form select,
.pff-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 9px 11px;
}
.pff-form textarea { resize: vertical; }
.pff-form input:focus, .pff-form select:focus, .pff-form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: transparent;
}
.pff-form__source {
  background: var(--color-tint-cool);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 18px;
}
.pff-form__check { font-size: 14px; margin-bottom: 18px; }
.pff-form__check label { display: flex; gap: 8px; align-items: flex-start; }

/* Honeypot. Hidden from people, left in the DOM for bots to fill. */
.pff-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pff-note {
  background: var(--color-tint-cool);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 24px;
}
.pff-note p:last-child { margin-bottom: 0; }
.pff-note--warn { background: var(--color-notice-bg); border: 1px solid var(--color-notice-border); }

/* Region heading above each group of city hubs on the front page, and the same
   treatment for grouped section indexes such as /wildlife/. */
.pff-hub-group,
.pff-section-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 26px 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.pff-hub-group:first-of-type, .pff-section-group:first-of-type { margin-top: 0; }
.pff-section-group { margin-top: 32px; }
.pff-hub-group span,
.pff-section-group span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-muted-2);
}

.pff-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.pff-card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.pff-card {
  display: block;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  transition: box-shadow .15s ease;
}
.pff-card:hover, .pff-card:focus { box-shadow: var(--shadow-md); text-decoration: none; color: var(--color-text); }
.pff-card__kicker {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: 6px;
}
/* These are spans inside an <a>, so without display:block they ran together as
   one paragraph and the margin-bottom below did nothing - which is what made
   the 35-card wildlife index unreadable. */
.pff-card__kicker { display: block; }
.pff-card__title { display: block; font-family: var(--font-heading); font-size: 17px; margin-bottom: 4px; line-height: 1.3; }
.pff-card__note { display: block; font-size: 12px; color: var(--color-muted); line-height: 1.45; }

.pff-band {
  background: linear-gradient(135deg, var(--color-band-1), var(--color-band-2));
  border-top: 1px solid #FFB13C;
  border-bottom: 1px solid #FFB13C;
}
.pff-band__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.pff-band p { font-size: 14px; color: var(--color-band-text); margin-bottom: 14px; }

/* ============================================================
   Region index
   ============================================================ */
.pff-region-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.pff-tag {
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--color-text);
  transition: background .15s ease;
}
.pff-tag:hover, .pff-tag:focus { background: rgba(232, 69, 43, .09); text-decoration: none; color: var(--color-text); }

.pff-region-group { margin-bottom: 36px; }
.pff-region-group__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.pff-region-group__head h2 { margin: 0; font-size: 22px; }
.pff-region-group__count { font-size: 12px; color: var(--color-muted); }

.pff-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pff-chip {
  font-size: 11px;
  color: var(--color-body);
  background: var(--color-tint-cool);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}

/* ============================================================
   Two-column layouts
   ============================================================ */
/* Sidebar on the LEFT, but second in the DOM.

   Every template still writes <article> first and the aside after it, so a
   phone and a screen reader both reach the content immediately; grid moves
   the rail to column 1 on desktop only. Ordering the DOM to match the visual
   left-to-right would push the article below the sidebar on mobile, which is
   the usual reason left-rail sites feel slow. */
.pff-layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  padding-top: 32px;
  padding-bottom: 60px;
}
.pff-layout > article,
.pff-layout > .pff-layout__main { grid-column: 2; }
.pff-layout > .pff-aside,
.pff-layout > .pff-rail { grid-column: 1; grid-row: 1; }

.pff-layout--hub { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; padding-top: 40px; }
.pff-layout--single { grid-template-columns: minmax(0, 1fr); }
.pff-layout--single > article { grid-column: 1; }

.pff-aside { position: sticky; top: 24px; display: grid; gap: 16px; }

/* ============================================================
   Left rail
   ============================================================ */
.pff-rail { position: sticky; top: 24px; display: grid; gap: 14px; }
.pff-rail__card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 14px 15px;
}
.pff-rail__card h6 { margin: 0 0 8px; }
.pff-rail__card p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--color-body); }
.pff-rail__card p:last-child { margin-bottom: 0; }
.pff-rail__card a { font-size: 13px; }

.pff-rail__wx { background: var(--color-tint-cool); border-color: transparent; }
.pff-rail__wx-now { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pff-rail__wx-temp {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--color-text);
}
.pff-rail__wx-desc { font-size: 13px; color: var(--color-body); }
.pff-rail__fine { margin: 9px 0 0 !important; font-size: 11px; color: var(--color-muted-2); }

.pff-rail__season { border-left: 3px solid var(--color-band-1); }
.pff-rail__shop { background: var(--color-tint); border-color: transparent; }

/* An unsold slot renders nothing at all, so no empty box holds space. */
.pff-rail__ad { display: grid; justify-items: center; gap: 5px; }
.pff-rail__ad:empty { display: none; }
.pff-rail__ad img, .pff-rail__ad iframe { max-width: 100%; height: auto; }
.pff-rail__adlabel {
  justify-self: start;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
/* The Expedia rectangle is a fixed 300x250; keep it from forcing the grid
   column wider than the track on narrow desktops. */
.pff-rail__ad > .eg-affiliate-banners { max-width: 100%; overflow: hidden; }

.pff-hub__search {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 4px 0 28px;
}
.pff-hub__search h6 { margin: 0 0 10px; }

/* Quiet, but adjacent to the links it covers - which is what the guidance
   actually asks for, and what a top-of-page banner never managed. */
.pff-disclose-inline {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-muted-2);
}
.pff-disclose-foot {
  max-width: none;
  font-size: 12px;
  color: var(--color-muted-2);
  margin-bottom: 8px;
}
.pff-hub__search-fine {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-muted-2);
}
.pff-panel {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 16px;
}
.pff-panel--warm { border-color: var(--color-accent-700); background: #FFF6EE; }
.pff-panel__links { display: grid; gap: 7px; font-size: 13px; }
.pff-panel__rows { display: grid; gap: 8px; font-size: 13px; }
.pff-panel__row { display: flex; justify-content: space-between; gap: 12px; }
.pff-panel__row span:first-child { color: var(--color-muted); }
.pff-panel p { font-size: 13px; color: var(--color-muted); margin-bottom: 12px; }

/* ============================================================
   City hub
   ============================================================ */
.pff-hub__intro { font-size: 16px; color: var(--color-body); max-width: 62ch; }
.pff-hub__intro p:last-child { margin-bottom: 28px; }

.pff-guide-list { display: grid; gap: 10px; margin-bottom: 36px; }
.pff-guide {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  transition: box-shadow .15s ease;
}
.pff-guide:hover, .pff-guide:focus { box-shadow: var(--shadow-md); text-decoration: none; color: var(--color-text); }
.pff-guide__num {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--radius-md);
  background: var(--color-tint);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent);
  font-size: 13px;
  font-family: var(--font-heading);
}
.pff-guide__body { min-width: 0; }
.pff-guide__title { font-family: var(--font-heading); font-size: 17px; }
.pff-guide__note { font-size: 12px; color: var(--color-muted); }
.pff-guide__spacer { flex: 1; }
.pff-guide svg { flex: none; }

/* ============================================================
   Article body (prose)
   ============================================================ */
.pff-standfirst { font-size: 17px; color: var(--color-standfirst); margin-bottom: 20px; }

.pff-prose { color: var(--color-body); }
.pff-prose > h2 { color: var(--color-text); margin-top: 36px; margin-bottom: 8px; }
.pff-prose > h3 { color: var(--color-text); margin-top: 28px; margin-bottom: 8px; }
.pff-prose > h4 { color: var(--color-text); margin-top: 24px; margin-bottom: 8px; }
.pff-prose > *:first-child { margin-top: 0; }
.pff-prose p { max-width: 68ch; }
.pff-prose ul, .pff-prose ol { max-width: 68ch; margin: 0 0 16px; padding-left: 22px; }
.pff-prose li { margin-bottom: 6px; }
.pff-prose strong { color: var(--color-text); font-weight: 600; }
.pff-prose blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 18px;
  border-left: 2px solid var(--color-accent);
  color: var(--color-standfirst);
}
.pff-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 24px;
}
.pff-prose thead tr { text-align: left; border-bottom: 1px solid var(--color-divider); }
.pff-prose th {
  padding: 10px 8px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 500;
}
.pff-prose td { padding: 11px 8px; border-bottom: 1px solid var(--color-rule); }
.pff-table-scroll { overflow-x: auto; margin-bottom: 24px; }

/* ============================================================
   Callouts
   ============================================================ */
.pff-callout {
  border: 1px solid var(--color-accent-700);
  border-radius: var(--radius-lg);
  background: #FFF6EE;
  padding: 18px;
  margin: 32px 0;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}
.pff-callout__img {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--color-photo);
  display: flex; align-items: center; justify-content: center;
  color: #8AA4B6; font-size: 10px; text-align: center;
  overflow: hidden;
}
.pff-callout__img img { width: 100%; height: 100%; object-fit: cover; }
.pff-callout__kicker {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: 5px;
}
.pff-callout__title { font-family: var(--font-heading); font-size: 16px; margin-bottom: 4px; }
.pff-callout p { font-size: 13px; color: var(--color-muted); margin: 0; max-width: 56ch; }

.pff-souvenir {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--color-accent-700);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #FFF4DC, #FFE6D2);
  padding: 20px;
  margin: 32px 0;
}
.pff-souvenir p { font-size: 13px; color: var(--color-band-text); margin: 0; max-width: 52ch; }

/* ============================================================
   Contextual gear rail
   ============================================================ */
.pff-gearrail {
  margin: 36px 0 8px;
  padding: 20px;
  background: var(--color-tint-cool);
  border-radius: var(--radius-lg);
}
.pff-gearrail__title { font-size: 16px; margin: 0 0 14px; }
.pff-gearrail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.pff-gearrail__card {
  display: block;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  color: var(--color-text);
}
.pff-gearrail__card:hover, .pff-gearrail__card:focus {
  text-decoration: none;
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}
/* Both are spans inside an <a>: without display:block they run together as one
   line and the margin below does nothing. Same trap as .pff-card__title. */
.pff-gearrail__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 3px;
}
.pff-gearrail__note { display: block; font-size: 12px; color: var(--color-muted-2); line-height: 1.4; }
.pff-gearrail__foot { font-size: 11px; color: var(--color-muted-2); margin: 12px 0 0; max-width: none; }

/* ============================================================
   Footer
   ============================================================ */
/* ============================================================
   Footer - a full dark band, not small print
   ============================================================ */
.pff-footer {
  position: relative;
  margin-top: 60px;
  padding-bottom: 28px;
  background: linear-gradient(180deg, #0E3149 0%, #0A2739 100%);
  color: #D7E7F1;
  border-top: 0;
}
.pff-footer__wave { position: absolute; top: 0; left: 0; right: 0; line-height: 0; pointer-events: none; }
.pff-footer__wave svg { display: block; width: 100%; height: 72px; }

.pff-footer h6 {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.pff-footer a { color: rgba(255, 255, 255, .82); }
.pff-footer a:hover, .pff-footer a:focus { color: var(--color-band-1); text-decoration: none; }

.pff-footer__top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
  gap: 34px;
  padding-top: 92px;
  padding-bottom: 34px;
}
.pff-footer__logo { display: block; max-width: 210px; margin-bottom: 14px; }
.pff-footer__logo img { width: 100%; height: auto; display: block; }
.pff-footer__brand { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: #fff; margin-bottom: 10px; }
.pff-footer__blurb { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .72); max-width: 36ch; margin: 0 0 14px; }
.pff-footer__fb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.pff-footer__fb:hover, .pff-footer__fb:focus { border-color: var(--color-band-1); background: rgba(255, 255, 255, .06); }
.pff-footer__links { display: grid; gap: 8px; font-size: 13px; line-height: 1.35; }
.pff-footer__shop {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-band-1), var(--color-band-2));
  color: var(--color-band-text) !important;
  font-size: 13px;
  font-weight: 700;
}
.pff-footer__shop:hover, .pff-footer__shop:focus { filter: brightness(1.06); color: var(--color-band-text) !important; }

/* The site's actual scale, counted from the database. */
.pff-footer__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding: 4px 0;
}
.pff-footer__stat { display: grid; gap: 2px; padding: 18px 12px 18px 0; }
.pff-footer__stat:hover .pff-footer__stat-n, .pff-footer__stat:focus .pff-footer__stat-n { color: #fff; }
.pff-footer__stat-n {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--color-band-1);
}
.pff-footer__stat-l { font-size: 12.5px; color: rgba(255, 255, 255, .7); }

.pff-footer__road { padding-top: 30px; }
.pff-footer__road p { font-size: 13px; color: rgba(255, 255, 255, .62); margin: 0 0 14px; max-width: 60ch; }
.pff-footer__road-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pff-footer__card { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; }
.pff-footer__card img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform .5s ease;
}
.pff-footer__card:hover img, .pff-footer__card:focus img { transform: scale(1.04); }
.pff-footer__card span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, rgba(10, 39, 57, 0), rgba(10, 39, 57, .92));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.pff-footer__legal {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 30px;
  padding-top: 18px;
}
.pff-footer .pff-disclose-foot,
.pff-footer .pff-copyright,
.pff-footer .pff-correction-line { font-size: 12px; color: rgba(255, 255, 255, .6); margin: 0; max-width: none; }
.pff-footer__legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 12.5px;
}
.pff-footer .pff-correction-line { padding-top: 22px; }

@media (max-width: 1000px) {
  .pff-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .pff-footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .pff-footer__wave svg { height: 44px; }
  .pff-footer__top { grid-template-columns: minmax(0, 1fr); padding-top: 62px; }
  .pff-footer__road-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pff-footer__road-grid a:nth-child(3) { display: none; }
  .pff-footer__stat-n { font-size: 28px; }
}

/* ============================================================
   Archive / search
   ============================================================ */
.pff-archive-head { padding-top: 40px; padding-bottom: 8px; }
.pff-results { display: grid; gap: 12px; padding-bottom: 60px; }
.pff-result {
  display: block;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
.pff-result:hover { box-shadow: var(--shadow-md); text-decoration: none; color: var(--color-text); }
.pff-result__title { font-family: var(--font-heading); font-size: 18px; margin-bottom: 4px; }
.pff-result__excerpt { font-size: 14px; color: var(--color-body); margin: 0; }

.pff-pagination { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 60px; }
.pff-pagination .page-numbers {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: 13px;
  color: var(--color-text);
}
.pff-pagination .page-numbers.current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ============================================================
   Responsive
   ============================================================ */
/* ============================================================
   Discovery rail - section indexes, destinations, About, legal
   ============================================================ */
/* Tall and image-led, so it scrolls with the page instead of sticking. */
.pff-rail--discover { position: static; gap: 16px; }

.pff-reel-card { padding: 0; overflow: hidden; border: 0; box-shadow: var(--shadow-md); }
.pff-reel { position: relative; aspect-ratio: 4 / 3; background: var(--color-photo); }
.pff-reel__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.pff-reel__slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease; z-index: 1; }
.pff-reel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pff-reel__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 12px 10px;
  background: linear-gradient(to bottom, rgba(12, 36, 54, 0), rgba(12, 36, 54, .82));
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .01em;
}
.pff-reel__slide:hover .pff-reel__label, .pff-reel__slide:focus .pff-reel__label { text-decoration: underline; }
.pff-reel-card__foot { padding: 11px 14px 13px; background: var(--color-text); }
.pff-reel-card__foot h6 { margin: 0 0 3px; color: var(--color-band-1); }
.pff-reel-card__foot p { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .78); }

.pff-rail__map { background: var(--color-tint-cool); border-color: transparent; }
.pff-rail__map .pff-map svg { display: block; }
.pff-rail__map path.pff-region { transition: filter .15s ease; }
.pff-rail__map a:hover path.pff-region, .pff-rail__map a:focus path.pff-region { filter: brightness(.9) saturate(1.3); }

.pff-rail__shirts {
  background: linear-gradient(140deg, var(--color-band-1), var(--color-band-2));
  border: 0;
}
.pff-rail__shirts h6 { color: var(--color-band-text); }
.pff-rail__shirt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 11px; }
.pff-rail__shirt {
  display: grid; gap: 4px; background: #fff; border-radius: var(--radius-sm);
  padding: 5px; color: var(--color-text); text-decoration: none;
  box-shadow: 0 1px 2px rgba(92, 52, 16, .18);
}
.pff-rail__shirt:hover, .pff-rail__shirt:focus { text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(92, 52, 16, .25); }
.pff-rail__shirt img { width: 100%; height: auto; aspect-ratio: 247 / 296; object-fit: cover; border-radius: 3px; display: block; }
.pff-rail__shirt span { font-size: 11px; line-height: 1.25; font-weight: 500; padding: 0 2px 2px; }
.pff-rail__card .pff-rail__shirt span { font-size: 11px; }

/* Viator tours card - deep sea to lagoon, so it reads apart from the
   yellow shirt card and the pale weather card around it. */
.pff-tours {
  background: linear-gradient(145deg, #0E4D64, #138C8A);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 15px 15px 12px;
}
.pff-tours__kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-band-1); margin-bottom: 4px; }
.pff-tours__title { font-family: var(--font-heading); font-size: 18px; font-weight: 600; line-height: 1.25; margin-bottom: 8px; }
.pff-tours p { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .86); margin: 0 0 12px; }
.pff-tours .pff-tours__btn { background: #fff; border-color: #fff; color: #0E4D64; font-weight: 600; }
.pff-tours .pff-tours__btn:hover, .pff-tours .pff-tours__btn:focus { background: var(--color-band-1); border-color: var(--color-band-1); color: #0E4D64; }
.pff-tours .pff-tours__fine { font-size: 11px; margin: 8px 0 0; color: rgba(255, 255, 255, .6); }
.pff-tours--inline { margin: 28px 0; max-width: 520px; }

/* Viator banner placements */
.pff-tours-ad { display: grid; gap: 7px; justify-items: center; }
.pff-tours-ad__head { justify-self: stretch; display: grid; gap: 2px; }
.pff-tours-ad__note { font-size: 12px; line-height: 1.45; color: var(--color-muted); }
.pff-tours-ad [data-id="viator-banner"] { overflow: hidden; }
.pff-tours--inline { margin: 30px 0; }
.pff-tours--inline .pff-tours-ad__head { max-width: 728px; justify-self: center; width: 100%; }
.pff-tours-ad__box { display: none; }
.pff-tours--tripster { justify-items: stretch; }
.pff-tours--tripster .tripster-widget,
.pff-tours--tripster .pff-viator-widget { width: 100%; }
/* Viator's widget sizes its iframe by postMessage, which never arrives on this
   site, leaving it 0px tall. The cards are a fixed height, so give it one. */
.pff-viator-widget { min-height: 460px; }
.pff-viator-widget iframe { height: 460px !important; }
@media (max-width: 800px) {
  .pff-tours-ad__wide { display: none; }
  .pff-tours-ad__box { display: block; }
}

@media (max-width: 900px) {
  .pff-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 36px; }
  .pff-hero h1 { font-size: 38px; }
  .pff-hero__figure { order: -1; }
  .pff-home-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* One column below the breakpoint, and the explicit grid-column assignments
     that put the rail on the left must be undone or the article would be
     placed into a second column that no longer exists. */
  .pff-layout, .pff-layout--hub { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pff-layout > article,
  .pff-layout > .pff-layout__main,
  .pff-layout > .pff-aside,
  .pff-layout > .pff-rail { grid-column: 1; grid-row: auto; }
  .pff-rail { position: static; }
  .pff-aside { position: static; }
  .pff-callout, .pff-souvenir { grid-template-columns: minmax(0, 1fr); }
  .pff-callout__img, .pff-souvenir > div:first-child { max-width: 120px; }
}

@media (max-width: 760px) {
  h1 { font-size: 32px; }
  h2 { font-size: 23px; }
  .pff-header__inner { flex-wrap: wrap; row-gap: 12px; }
  .pff-nav-toggle { display: inline-flex; order: 3; margin-left: auto; }
  .pff-header__spacer { display: none; }
  .pff-nav {
    order: 5;
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--color-divider);
    padding-top: 10px;
  }
  .pff-nav.is-open { display: flex; }
  .pff-nav ul { flex-direction: column; gap: 0; width: 100%; }
  .pff-nav a { display: block; padding: 9px 0; }
  .pff-nav .sub-menu {
    display: flex;
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 14px;
  }
  .pff-search { order: 4; flex-basis: 100%; }
  .pff-guide { flex-wrap: wrap; }
}

/* ============================================================
   Souvenir shop (remote SATG store)
   ============================================================ */
.pff-shop {
  border: 1px solid var(--color-accent-700);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #FFF4DC, #FFE6D2);
  padding: 22px;
  margin: 36px 0;
}
.pff-shop__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pff-shop__kicker {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: 6px;
}
.pff-shop__title { font-size: 20px; margin: 0 0 6px; }
.pff-shop__blurb {
  font-size: 13px;
  color: var(--color-band-text);
  margin: 0;
  max-width: 56ch;
}
.pff-shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.pff-shop-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  transition: box-shadow .15s ease;
}
.pff-shop-card:hover, .pff-shop-card:focus { box-shadow: var(--shadow-md); text-decoration: none; color: var(--color-text); }
.pff-shop-card__img {
  display: block;
  aspect-ratio: 247 / 296;
  border-radius: var(--radius-sm);
  background: var(--color-photo);
  overflow: hidden;
}
.pff-shop-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pff-shop-card__name {
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pff-shop-card__price {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-accent-300);
}

.pff-panel--shop { border-color: var(--color-accent-700); background: linear-gradient(180deg, #FFF4DC, #FFE6D2); }
.pff-panel--shop p { color: var(--color-band-text); }
.pff-shop-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--color-text);
}
.pff-shop-mini:hover, .pff-shop-mini:focus { text-decoration: none; color: var(--color-accent-300); }
.pff-shop-mini__img {
  flex: none;
  width: 52px;
  aspect-ratio: 247 / 296;
  border-radius: var(--radius-sm);
  background: var(--color-photo);
  overflow: hidden;
}
.pff-shop-mini__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pff-shop-mini__name { font-size: 13px; line-height: 1.35; }

@media (max-width: 760px) {
  .pff-shop { padding: 16px; }
  .pff-shop__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ============================================================
   Where to stay
   ============================================================ */
.pff-hotels { margin: 8px 0 36px; }
.pff-hotel-list { display: grid; gap: 10px; }
.pff-hotel {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.pff-hotel__body { flex: 1; min-width: 0; }
.pff-hotel__name { font-family: var(--font-heading); font-size: 16px; }
.pff-hotel__meta { font-size: 12px; color: var(--color-muted); margin-bottom: 6px; }
.pff-hotel__fee {
  font-size: 11px;
  background: var(--color-tint);
  color: var(--color-accent-300);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}

/* ============================================================
   Vacation rentals (read from First Choice Florida)
   ============================================================ */
.pff-rentals {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin: 36px 0;
  background: var(--color-surface);
}
.pff-rentals__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pff-rentals__kicker {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: 6px;
}
.pff-rentals__title { font-size: 20px; margin: 0 0 6px; }
.pff-rentals__blurb { font-size: 13px; color: var(--color-muted); margin: 0; max-width: 60ch; }
.pff-rentals__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.pff-rental {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: transform .15s ease;
}
.pff-rental:hover, .pff-rental:focus { text-decoration: none; color: var(--color-text); transform: translateY(-2px); }
.pff-rental__img {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--color-photo);
  overflow: hidden;
}
.pff-rental__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pff-rental__name { font-family: var(--font-heading); font-size: 14px; line-height: 1.3; }
.pff-rental__meta { font-size: 12px; color: var(--color-muted); }
.pff-rental__fee {
  align-self: flex-start;
  font-size: 11px;
  background: var(--color-tint);
  color: var(--color-accent-300);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}


/* ============================================================
   Pet help by county
   ============================================================ */
.pff-help__standfirst { font-size: 17px; color: var(--color-standfirst); max-width: 62ch; margin-bottom: 20px; }
.pff-help-sos {
  background: #FFF1EC;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 18px 20px 14px;
  margin: 0 0 28px;
}
.pff-help-sos h2 { font-size: 20px; margin: 0 0 12px; color: var(--color-accent-300); }
.pff-help-sos__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pff-help-sos__item {
  display: grid;
  gap: 2px;
  align-content: start;
  background: #fff;
  border: 1px solid var(--color-accent-700);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  color: var(--color-text);
}
.pff-help-sos__item:hover, .pff-help-sos__item:focus { text-decoration: none; border-color: var(--color-accent); color: var(--color-text); }
.pff-help-sos__kind { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.pff-help-sos__name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.pff-help-sos__phone { font-size: 19px; font-weight: 700; color: var(--color-accent-300); white-space: nowrap; }
.pff-help-sos__fine { font-size: 12px; color: var(--color-body); margin: 10px 0 0; }

.pff-help-sec { margin: 0 0 34px; }
.pff-help-sec > h2 { font-size: 22px; margin: 0 0 10px; scroll-margin-top: 20px; }
.pff-help-sec > p { color: var(--color-body); max-width: 66ch; }
.pff-help-town { font-size: 13px; margin: 18px 0 8px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; }
.pff-help-list { display: grid; gap: 8px; }
.pff-help-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.pff-help-card__name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.pff-help-card__meta { font-size: 13px; color: var(--color-muted); margin-top: 2px; }
.pff-help-card__hours { font-size: 12px; color: var(--color-body); margin-top: 3px; }
.pff-help-card__acts { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.pff-help-card__acts .pff-btn { white-space: nowrap; }
.pff-help-card__src { font-size: 12px; }

.pff-help-ready__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 0; }
.pff-help-ready__item {
  display: grid;
  gap: 4px;
  align-content: start;
  background: var(--color-tint-cool);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--color-text);
}
.pff-help-ready__item:hover, .pff-help-ready__item:focus { text-decoration: none; color: var(--color-text); background: #DDEAF3; }
.pff-help-ready__item span { font-size: 13px; color: var(--color-body); }
.pff-help-foot { border-top: 1px solid var(--color-divider); padding-top: 16px; font-size: 13px; color: var(--color-muted); }
.pff-help-foot p { margin: 0 0 8px; }
.pff-panel--help { border-color: var(--color-accent); background: #FFF1EC; }
.pff-help-card--vouch { border: 2px solid var(--color-band-1); background: #FFFBEA; }
.pff-help-card__badge {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-band-1);
  color: var(--color-band-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.pff-help-card__vouch { margin: 6px 0 0; font-size: 13px; font-style: italic; color: var(--color-band-text); }
.pff-panel--help p { color: var(--color-body); }

@media (max-width: 560px) {
  .pff-help-card { flex-direction: column; align-items: stretch; }
  .pff-help-card__acts { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============================================================
   Venue directories (dog beaches, parks)
   ============================================================ */
.pff-venue-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 28px;
}
.pff-venue-jump a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.pff-venue-jump a:hover, .pff-venue-jump a:focus { text-decoration: none; border-color: var(--color-accent); color: var(--color-accent-300); }
.pff-venue-jump span { font-size: 12px; font-weight: 500; color: var(--color-muted); }

.pff-venue-region { margin: 0 0 40px; }
.pff-venue-region > h2 { font-size: 24px; margin: 0 0 10px; scroll-margin-top: 20px; }
.pff-venue-region > p { color: var(--color-body); max-width: 66ch; }
.pff-venue-county {
  font-size: 13px;
  margin: 22px 0 10px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.pff-venue-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.pff-venue {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 15px 16px;
  scroll-margin-top: 20px;
}
.pff-venue__head { margin-bottom: 10px; }
.pff-venue__name { font-size: 17px; margin: 0 0 2px; line-height: 1.25; }
.pff-venue__where { font-size: 12px; color: var(--color-muted); }
.pff-venue__facts { display: grid; gap: 7px; margin: 0; }
.pff-venue__fact { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.pff-venue__fact dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.pff-venue__fact dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-text); }
.pff-venue__note {
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-rule);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-body);
}
.pff-venue__src { margin-top: 10px; font-size: 12px; align-self: flex-start; }

.pff-venue-no { display: grid; gap: 8px; }
.pff-venue-no__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.pff-venue-no__row strong { font-size: 15px; }
.pff-venue-no__row span { font-size: 12px; color: var(--color-muted); margin-left: 8px; }
.pff-venue-no__row p { margin: 4px 0 0; font-size: 13px; color: var(--color-body); }
.pff-venue-no__row a { font-size: 12px; flex-shrink: 0; }

/* ============================================================
   Page banner - the photo is the top of the page
   ============================================================ */
.pff-banner {
  position: relative;
  margin: 0 0 30px;
  /* Full-bleed out of the layout grid it sits in. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--color-text);
  isolation: isolate;
}
.pff-banner__media { position: absolute; inset: 0; overflow: hidden; }
.pff-banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Two stops: a soft top wash so the header sits clear of the photo, and a
   heavy bottom so white type holds over a bright beach. */
.pff-banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 39, 57, .55) 0%, rgba(10, 39, 57, .12) 32%, rgba(10, 39, 57, .62) 72%, rgba(10, 39, 57, .88) 100%);
}
.pff-banner__body {
  position: relative;
  z-index: 1;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 42px;
  padding-bottom: 34px;
  color: #fff;
}
.pff-banner__body h1 { color: #fff; margin: 0; max-width: 20ch; text-wrap: balance; }
.pff-banner__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-band-1);
  margin-bottom: 10px;
}
.pff-banner__standfirst {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
}
.pff-banner .pff-crumbs { margin-bottom: auto; }
.pff-banner .pff-crumbs a { color: rgba(255, 255, 255, .8); }
.pff-banner .pff-crumbs span { color: rgba(255, 255, 255, .6); }
.pff-banner__cap {
  position: relative;
  z-index: 1;
  margin: -26px 0 0;
  padding-bottom: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
}
/* No photo: keep the shape, drop the drama. */
.pff-banner--plain { background: transparent; }
.pff-banner--plain .pff-banner__body { min-height: 0; color: inherit; padding-top: 28px; padding-bottom: 6px; }
.pff-banner--plain .pff-banner__body h1 { color: var(--color-text); }
.pff-banner--plain .pff-banner__standfirst { color: var(--color-standfirst); }
.pff-banner--plain .pff-crumbs a { color: var(--color-muted); }
.pff-banner--plain .pff-crumbs span { color: var(--color-muted-2); }

/* The banner sits inside a grid column, so pull the page padding back. */
.pff-layout > article > .pff-banner,
.pff-layout > .pff-layout__main > .pff-banner,
.pff-layout > div > .pff-banner { margin-top: -32px; }
.pff-layout--hub > div > .pff-banner { margin-top: -40px; }

@media (max-width: 900px) {
  .pff-banner__body { min-height: 300px; }
}
@media (max-width: 600px) {
  .pff-banner__body { min-height: 240px; padding-top: 24px; }
  .pff-banner__standfirst { font-size: 15px; }
}

/* ============================================================
   Front page - photo first
   ============================================================ */
.pff-home-hero {
  position: relative;
  background: var(--color-text);
  margin-bottom: 40px;
  isolation: isolate;
}
.pff-home-hero__media { position: absolute; inset: 0; overflow: hidden; }
.pff-home-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: 62% center; }
/* The banner photos are landscape and the subject is usually low in frame. */
.pff-banner__media img { object-position: center 42%; }
.pff-home-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 39, 57, .5) 0%, rgba(10, 39, 57, .3) 40%, rgba(10, 39, 57, .85) 100%);
}
.pff-home-hero__body {
  position: relative;
  z-index: 1;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 64px;
  padding-bottom: 54px;
  color: #fff;
}
.pff-home-hero__body .pff-kicker { color: var(--color-band-1); }
.pff-home-hero__body h1 { color: #fff; font-size: 56px; max-width: 16ch; margin-bottom: 18px; text-wrap: balance; }
.pff-home-hero__deck {
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
  max-width: 48ch;
  margin-bottom: 26px;
}
.pff-btn--onphoto {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  backdrop-filter: blur(3px);
}
.pff-btn--onphoto:hover, .pff-btn--onphoto:focus { background: rgba(255, 255, 255, .9); color: var(--color-text); border-color: #fff; }

.pff-home-hero__stats { position: relative; z-index: 1; background: rgba(10, 39, 57, .72); border-top: 1px solid rgba(255, 255, 255, .16); }
.pff-home-hero__stats-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px; }
.pff-home-hero__stats-inner a { display: grid; gap: 2px; padding: 16px 14px 16px 0; color: #fff; }
.pff-home-hero__stats-inner strong {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-band-1);
}
.pff-home-hero__stats-inner span { font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.pff-home-hero__stats-inner a:hover strong, .pff-home-hero__stats-inner a:focus strong { color: #fff; }

.pff-paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 44px; }
.pff-path {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px 18px 42px;
  border: 1px solid var(--color-divider);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pff-path:nth-child(2) { border-top-color: var(--color-band-2); }
.pff-path:nth-child(3) { border-top-color: #4FBBD8; }
.pff-path:nth-child(4) { border-top-color: var(--color-band-1); }
.pff-path:hover, .pff-path:focus {
  text-decoration: none;
  color: var(--color-text);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(18, 58, 87, .13);
}
.pff-path__title { font-family: var(--font-heading); font-size: 19px; font-weight: 600; }
.pff-path__note { font-size: 13.5px; line-height: 1.5; color: var(--color-body); }
.pff-path__go { position: absolute; left: 18px; bottom: 16px; font-size: 18px; color: var(--color-accent); }

@media (max-width: 900px) {
  .pff-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pff-home-hero__body { min-height: 400px; }
  .pff-home-hero__body h1 { font-size: 40px; }
}
@media (max-width: 600px) {
  .pff-paths { grid-template-columns: minmax(0, 1fr); }
  .pff-home-hero__body { min-height: 340px; padding-top: 44px; }
  .pff-home-hero__media img { object-position: 74% center; }
  .pff-home-hero__body h1 { font-size: 32px; }
  .pff-home-hero__deck { font-size: 16px; }
}