/* ============================================================================
 * ps-brand.css  -  Planting Season shared brand layer for the US website.
 * Brings the cosy app look (green banner band, wood section bands, mascots,
 * bed illustrations, cards) to any page. Link it AFTER the page's own inline
 * <style>. The site footer is handled separately by footer.js (.ps-foot), so
 * footer styling is intentionally NOT included here to avoid class clashes.
 * Classes are namespaced ps- so they never collide with page CSS.
 * ==========================================================================*/
:root {
  --ps-leaf: #487834; --ps-leaf-dk: #355a26; --ps-bark: #905c2c; --ps-bark-dk: #6e4520;
  --ps-cream: #faf6ef; --ps-ink: #2a2218; --ps-line: #e4dcc7;
}

/* site header: give the banner the green brand band and a sensible logo size,
   like the app (otherwise the white logo floats huge on a white strip). */
.site-banner { background: linear-gradient(135deg, #355a26 0%, #487834 55%, #355a26 100%); box-shadow: 0 2px 8px rgba(42,34,24,.15); padding: 12px 24px; }
.site-banner .banner-inner { max-width: 1180px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-banner .banner-logo { display: block; line-height: 0; }
.site-banner .banner-logo img { height: 54px; width: auto; max-width: 260px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
@media (max-width: 620px) { .site-banner .banner-logo img { height: 44px; } .site-banner { padding: 10px 16px; } }

/* wood-textured section band, like the app headers */
.ps-band { position: relative; background-color: #6e4520; background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.20)), repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 2px, rgba(255,255,255,.02) 2px 5px, transparent 5px 10px); color: #fff; padding: 50px 20px; text-align: center; border-top: 4px solid #5a3717; border-bottom: 4px solid #5a3717; }
.ps-band h2 { font-family: Georgia, "Iowan Old Style", serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); margin: 0 0 8px; font-size: 1.9rem; }
.ps-band p { color: #fdf3e0; max-width: 640px; margin: 0 auto; line-height: 1.55; }

/* the mascot cast peeking along a row */
.ps-mascots { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px; max-width: 780px; margin: 22px auto 0; }
.ps-mascots img { width: 86px; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.28)); transition: transform .18s ease; }
.ps-mascots img:hover { transform: translateY(-6px); }

/* the bed-type illustrations */
.ps-beds { max-width: 1080px; margin: 0 auto; padding: 44px 20px; text-align: center; }
.ps-beds h2 { font-family: Georgia, "Iowan Old Style", serif; color: var(--ps-leaf-dk); font-size: 1.7rem; margin: 0 0 4px; }
.ps-beds .ps-sub { color: var(--ps-ink); opacity: .72; margin: 0 auto 24px; max-width: 620px; }
.ps-bedgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ps-bedcell { background: linear-gradient(160deg, #fbf6ea, #f3ead6); border: 1px solid #e6d8bd; border-radius: 16px; padding: 14px 8px 12px; box-shadow: 0 2px 10px rgba(120,90,40,.08); }
.ps-bedcell img { width: 100%; max-width: 132px; height: auto; display: block; margin: 0 auto 6px; }
.ps-bedcell span { font-weight: 700; color: #4a3b1e; font-size: .9rem; }

/* a cosy callout card matching the app rows */
.ps-callout { background: #fffdf8; border: 1px solid #ece0c8; border-left: 5px solid var(--ps-leaf); border-radius: 14px; padding: 16px 18px; }

@media (max-width: 620px) {
  .ps-mascots img { width: 58px; }
  .ps-band h2 { font-size: 1.5rem; }
  .ps-band { padding: 40px 16px; }
}