/* Potty Pal Website Styles */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500..800&family=DM+Sans:wght@400;500;700&display=swap');

/* WCAG Accessibility: Skip navigation link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary-color);
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* WCAG Accessibility: Focus indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

:root {
  /* Clear Day palette (matches the app) */
  --primary-color: #2458A6;   /* saturated blue action */
  --primary-dark: #1C4685;
  --secondary-color: #50C878;
  --text-dark: #192C46;       /* deep navy */
  --text-light: #5A697D;      /* muted blue-grey */
  --background: #FFFFFF;       /* white surface / cards */
  --background-light: #F2F6FA; /* pale cool-blue canvas */
  --tinted: #E2ECFB;          /* soft blue tint */
  --amber: #F5A623;           /* warm playful accent (matches the app's treat gold) */
  --amber-soft: #FDEFD6;      /* amber tint for highlights */
  --border-color: #DCE6F3;
  --error-color: #E74C3C;
  --radius-card: 24px;
  --shadow-card: 0 10px 28px rgba(25, 44, 70, 0.08);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--background-light);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
header {
  background-color: var(--background);
  color: var(--text-dark);
  padding: 18px 0;
  box-shadow: 0 1px 0 var(--border-color);
  position: sticky;
  top: 0;
  z-index: 50;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-dark);
}

header nav a {
  color: var(--text-dark);
  text-decoration: none;
  margin-left: 28px;
  font-weight: 600;
  transition: color 0.2s;
}

header nav a:hover {
  color: var(--primary-color);
}

/* Hero Section */
.hero {
  background: linear-gradient(160deg, var(--tinted) 0%, var(--background-light) 100%);
  color: var(--text-dark);
  padding: 80px 0;
  text-align: center;
}

.hero h2 {
  font-size: 48px;
  margin-bottom: 20px;
  font-weight: 800;
  color: var(--text-dark);
}

.hero p {
  font-size: 20px;
  margin-bottom: 30px;
  color: var(--text-light);
}

.cta-button {
  display: inline-block;
  background-color: var(--primary-color);
  color: white;
  padding: 15px 40px;
  text-decoration: none;
  border-radius: 16px;
  font-weight: 700;
  font-size: 18px;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.cta-button:hover {
  transform: translateY(-2px);
  background-color: var(--primary-dark);
  box-shadow: 0 8px 20px rgba(36, 88, 166, 0.25);
}

/* Official store download badges.
   Each store requires its own artwork, unmodified: a hand-rolled button with a
   scraped logo violates both brand guidelines. Do not recolor these, replace
   them with text buttons, or set only a width. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

/* Secondary line under the badges. Smaller and dimmer than `.hero p` so the
   store badge stays the primary call to action. */
.hero p.hero-secondary {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 0;
  color: var(--text-light);
}

.hero p.hero-secondary a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
}

.store-badges a {
  display: inline-flex;
  transition: transform 0.3s;
}

.store-badges a:hover {
  transform: translateY(-2px);
}

.store-badges img {
  display: block;
  width: auto;
}

/* Google Play's en_badge_web_generic.png is a 646x250 canvas whose VISIBLE
   badge is 564x168, centred inside 41px of transparent clear space. That
   padding is part of the official asset and must not be cropped, so height is
   set to the visible height scaled by the canvas ratio (250/168). 48px visible
   badge -> 71.43px image. Apple's badge bakes in no clear space, so if one is
   added later it takes the plain height plus the 16px gap above. */
.badge-google-play {
  height: 71.43px;
}

/* Apple's official badge bakes in no clear space, so its height is the visible
   badge height directly: match the Google Play visible badge (~48px desktop,
   40px mobile) so the two sit level. */
.badge-app-store {
  height: 48px;
}

@media (max-width: 480px) {
  .badge-google-play {
    height: 59.52px; /* 40px visible badge */
  }
  .badge-app-store {
    height: 40px;
  }
}

/* Features Section */
.features {
  padding: 80px 0;
  background-color: var(--background-light);
}

.features h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 50px;
  color: var(--text-dark);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.feature-item {
  text-align: center;
  padding: 30px;
  background: var(--background);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, box-shadow 0.2s;
}

.feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(25, 44, 70, 0.10);
}

.feature-item h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.feature-item p {
  color: var(--text-light);
  line-height: 1.8;
}

/* Content Section */
.content {
  padding: 60px 0;
}

.content h1 {
  font-size: 36px;
  margin-bottom: 30px;
  color: var(--text-dark);
}

.content h2 {
  font-size: 28px;
  margin-top: 40px;
  margin-bottom: 20px;
  color: var(--primary-color);
}

.content h3 {
  font-size: 22px;
  margin-top: 30px;
  margin-bottom: 15px;
  color: var(--text-dark);
}

.content p {
  margin-bottom: 15px;
  color: var(--text-light);
  line-height: 1.8;
}

.content ul, .content ol {
  margin: 20px 0 20px 30px;
  color: var(--text-light);
  line-height: 1.8;
}

.content li {
  margin-bottom: 10px;
}

.content a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

.content a:hover {
  border-bottom-color: var(--primary-color);
}

/* Footer */
footer {
  background-color: var(--text-dark);
  color: white;
  padding: 40px 0;
  margin-top: 80px;
}

footer .container {
  text-align: center;
}

footer p {
  margin-bottom: 15px;
  opacity: 0.8;
}

footer nav a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  opacity: 0.8;
  transition: opacity 0.3s;
}

footer nav a:hover {
  opacity: 1;
}

/* Contact Section */
.contact-info {
  background-color: var(--background);
  padding: 30px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin: 30px 0;
}

.contact-info h3 {
  margin-top: 0 !important;
}

.contact-info a {
  font-weight: 600;
}

/* Contact Form */
.contact-form {
  background-color: var(--background);
  padding: 30px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin: 30px 0;
}

.contact-form .form-row {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text-dark);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text-dark);
  background-color: var(--background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: border-color 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary-color);
  outline: none;
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

/* Honeypot: hidden from real users, visible to naive bots */
.contact-form .hp-field {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form button {
  display: inline-block;
  background-color: var(--primary-color);
  color: white;
  padding: 14px 40px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.contact-form button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.contact-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-status {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 8px;
  font-weight: 500;
  display: none;
}

.form-status.visible {
  display: block;
}

.form-status.success {
  background-color: rgba(80, 200, 120, 0.15);
  color: #2e7d4f;
  border: 1px solid var(--secondary-color);
}

.form-status.error {
  background-color: rgba(231, 76, 60, 0.12);
  color: #b03a2e;
  border: 1px solid var(--error-color);
}

/* Cookie Consent Banner */
.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--text-dark);
  color: white;
  padding: 20px;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.consent-banner .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.consent-banner p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.consent-banner a {
  color: var(--primary-color);
  text-decoration: underline;
}

.consent-banner-buttons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.consent-banner button {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.3s;
}

.consent-banner button:hover {
  opacity: 0.85;
}

.consent-accept {
  background-color: var(--secondary-color);
  color: white;
}

.consent-decline {
  background-color: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.consent-banner.hidden {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  header h1 {
    font-size: 22px;
  }

  header nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  header nav a {
    margin: 5px 0;
  }

  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 18px;
  }

  .features h2 {
    font-size: 28px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .content h1 {
    font-size: 28px;
  }

  .content h2 {
    font-size: 24px;
  }

  footer nav {
    display: flex;
    flex-direction: column;
  }

  footer nav a {
    margin: 5px 0;
  }
}

/* ------------------------------------------------------------------ */
/* Guides hub + articles (Clear Day)                                   */
/* ------------------------------------------------------------------ */

/* Breadcrumb */
.breadcrumb {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 20px;
}

.breadcrumb a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* Guides hub grid */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 32px 0 8px;
}

.guide-card {
  display: block;
  background: var(--background);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}

.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(25, 44, 70, 0.10);
}

.guide-card .guide-emoji {
  font-size: 30px;
  display: block;
  margin-bottom: 12px;
}

.guide-card h3 {
  font-size: 20px;
  color: var(--text-dark);
  margin-bottom: 8px;
  font-weight: 700;
}

.guide-card p {
  color: var(--text-light);
  font-size: 15px;
  line-height: 1.6;
}

.guide-card .guide-more {
  display: inline-block;
  margin-top: 14px;
  color: var(--primary-color);
  font-weight: 600;
  font-size: 15px;
}

/* Article body: a white reading card on the pale canvas */
.article {
  background: var(--background);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 44px;
  max-width: 760px;
  margin: 0 auto;
}

.article h1 {
  font-size: 34px;
  color: var(--text-dark);
  margin-bottom: 10px;
  line-height: 1.25;
}

.article .lead {
  font-size: 19px;
  color: var(--text-light);
  margin-bottom: 24px;
}

.article h2 {
  font-size: 24px;
  color: var(--text-dark);
  margin-top: 34px;
  margin-bottom: 14px;
}

.article h3 {
  font-size: 19px;
  color: var(--text-dark);
  margin-top: 24px;
  margin-bottom: 10px;
}

.article p {
  color: var(--text-light);
  margin-bottom: 15px;
  line-height: 1.8;
}

.article ul, .article ol {
  color: var(--text-light);
  margin: 16px 0 16px 24px;
  line-height: 1.8;
}

.article li {
  margin-bottom: 8px;
}

.article a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.article a:hover {
  border-bottom-color: var(--primary-color);
}

/* Simple responsive table for schedules */
.article .schedule {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 15px;
}

.article .schedule th,
.article .schedule td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-dark);
}

.article .schedule th {
  background: var(--tinted);
  font-weight: 700;
}

.article .schedule tr:last-child td {
  border-bottom: none;
}

/* Highlighted tip / callout */
.callout {
  background: var(--tinted);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 22px 0;
  color: var(--text-dark);
}

.callout strong {
  color: var(--primary-dark);
}

/* Soft app call-to-action inside articles and the hub */
.app-cta {
  background: linear-gradient(160deg, var(--tinted) 0%, #EAF1FB 100%);
  border-radius: var(--radius-card);
  padding: 28px 32px;
  margin: 34px auto 0;
  max-width: 760px;
  text-align: center;
}

.app-cta h2 {
  color: var(--text-dark);
  font-size: 22px;
  margin-bottom: 8px;
}

.app-cta p {
  color: var(--text-light);
  margin-bottom: 18px;
}

.app-cta .store-badges {
  margin-top: 0;
}

/* Related links at the foot of an article */
.related {
  max-width: 760px;
  margin: 32px auto 0;
}

.related h2 {
  font-size: 20px;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.related li {
  margin-bottom: 8px;
}

.related a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.related a:hover {
  text-decoration: underline;
}

.disclaimer {
  max-width: 760px;
  margin: 26px auto 0;
  font-size: 13px;
  color: var(--text-light);
  text-align: center;
}

@media (max-width: 768px) {
  .article {
    padding: 28px 22px;
  }
  .article h1 {
    font-size: 28px;
  }
  .guide-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Playful layer (Fraunces display headings, blobs, bounce)            */
/* ------------------------------------------------------------------ */

/* Characterful display serif on every heading + the wordmark */
header h1,
.hero h2,
.features h2,
.feature-item h3,
.content h1,
.content h2,
.content h3,
.article h1,
.article h2,
.article h3,
.guide-card h3,
.app-cta h2,
.related h2 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.hero h2,
.article h1,
.content h1 {
  font-weight: 800;
  line-height: 1.1;
}

/* Playful hero: soft floating blobs behind the content */
.hero {
  position: relative;
  overflow: hidden;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 42% 58% 63% 37% / 45% 52% 48% 55%;
  filter: blur(6px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.hero::before {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 30% 30%, #C7DCF7, transparent 70%);
  top: -80px;
  left: -60px;
}

.hero::after {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle at 60% 40%, var(--amber-soft), transparent 70%);
  bottom: -90px;
  right: -50px;
}

/* Bouncier, more tactile cards */
.feature-item,
.guide-card {
  transition: transform 0.3s var(--bounce), box-shadow 0.3s ease;
}

.feature-item:hover,
.guide-card:hover {
  transform: translateY(-6px) scale(1.02) rotate(-0.4deg);
  box-shadow: 0 18px 36px rgba(25, 44, 70, 0.12);
}

/* Guide emoji: a touch bigger, and it gives a friendly wiggle on hover */
.guide-card .guide-emoji {
  font-size: 34px;
  display: inline-block;
  transition: transform 0.3s var(--bounce);
}

.guide-card:hover .guide-emoji {
  transform: rotate(-8deg) scale(1.12);
}

/* Feature emojis sit inside a soft rounded chip for a friendlier look */
.feature-item h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Rounder, springier primary buttons */
.cta-button {
  border-radius: 999px;
  transition: transform 0.25s var(--bounce), box-shadow 0.25s ease, background-color 0.25s ease;
}

.cta-button:hover {
  transform: translateY(-3px) scale(1.04);
}

.guide-card .guide-more,
.hero p.hero-secondary a {
  transition: color 0.2s ease;
}

/* App CTA: warm it up with an amber edge so it pops off the blue */
.app-cta {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--tinted);
}

.app-cta::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--amber-soft), transparent 70%);
  opacity: 0.7;
  top: -70px;
  right: -60px;
  pointer-events: none;
}

.app-cta > * {
  position: relative;
  z-index: 1;
}

/* Amber accent under section-level headings for a spot of colour */
.content > .container > h1::after,
.features h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 5px;
  border-radius: 999px;
  background: var(--amber);
  margin: 14px auto 0;
}

.content > .container > h1::after {
  margin-left: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .feature-item:hover,
  .guide-card:hover,
  .cta-button:hover,
  .guide-card:hover .guide-emoji {
    transform: none;
  }
}