/* ============================================================================
 * ps-brand.css  -  Planting Season shared brand layer for the website.
 * Brings the cosy app look (wood bands, mascots, bed illustrations, cards) to
 * any page. Link it AFTER the page's own inline <style>. Uses /graphics/ art
 * copied from the app. Classes are namespaced ps- so they never clash.
 * ==========================================================================*/
/* --- GLOBAL BASE (shared, change-once) ---------------------------------------
   Site-wide defaults. Loaded before each page's inline <style>, so any page can
   still override. Bump the base text size for the whole site from here. */
html { font-size: 18px; }
body { font-size: 1rem; }
: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: the markup uses .site-banner/.banner-logo but the page CSS only
   styled the old .banner/.brand-logo names, so the white logo floated huge on
   white. Give it the green brand band and a sensible logo size, like the app. */
.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; }

/* the full site footer: mascot border + dark band with link columns (like AU) */
.ps-sitefooter { background: #2e2114; color: #d8cbb6; margin-top: 36px; }
.ps-foot-top { display: flex; justify-content: center; align-items: flex-end; gap: 6px; flex-wrap: wrap; padding: 16px 12px 0; background: #f4eee0; }
.ps-foot-top img { width: 62px; height: auto; filter: drop-shadow(0 4px 5px rgba(0,0,0,.18)); }
.ps-foot-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 28px; padding: 36px 24px 22px; }
.ps-foot-brand .ps-foot-logo { height: 42px; width: auto; margin-bottom: 12px; }
.ps-foot-brand p { font-size: 13px; line-height: 1.6; color: #b7a98f; margin: 0; max-width: 280px; }
.ps-foot-col h4 { color: #fff; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; font-family: inherit; font-weight: 700; }
.ps-foot-col a { display: block; color: #d8cbb6; text-decoration: none; font-size: 14px; margin-bottom: 9px; }
.ps-foot-col a:hover { color: #fff; }
.ps-foot-bottom { border-top: 1px solid rgba(255,255,255,.1); max-width: 1120px; margin: 0 auto; padding: 16px 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #b7a98f; }
.ps-foot-bottom a { color: #d8cbb6; }
.ps-foot-bottom a:hover { color: #fff; }
@media (max-width: 780px) { .ps-foot-inner { grid-template-columns: 1fr 1fr; gap: 22px; } .ps-foot-brand { grid-column: 1 / -1; } .ps-foot-top img { width: 44px; } }

/* the illustrated footer (garden scene + overlaid text), available on every page */
.site-footer { position: relative; margin-top: -180px; z-index: 1; pointer-events: none; }
.site-footer-image { display: block; width: 100%; height: auto; pointer-events: auto; }
.site-footer-text { position: absolute; left: 0; right: 0; top: 190px; padding: 18px 20px 22px; color: #2a2218; font-size: 13px; text-align: center; pointer-events: auto; }
.site-footer-text .fine { max-width: 640px; margin: 8px auto 0; line-height: 1.55; color: #2a2218; }
.site-footer-text a { color: var(--ps-leaf-dk); }
@media (max-width: 720px) { .site-footer { margin-top: -100px; } .site-footer-text { top: 110px; padding: 12px 16px 18px; font-size: 11px; } }

/* mascots peeking along the top of the footer, on every page */
.ps-footer-mascots { display: flex; justify-content: center; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 6px 12px 16px; }
.ps-footer-mascots img { width: 56px; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.22)); }
@media (max-width: 620px) { .ps-footer-mascots img { width: 44px; } }

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

/* --- AU site footer (.ps-foot) consolidated from per-page inline blocks --- */
.ps-foot{background:#2a2218;color:#c9bfb0;font-family:Georgia,'Times New Roman',serif;margin-top:3rem}
.ps-foot .ps-foot-img{width:100%;height:96px;background:#faf7f0 url('/app/graphics/footer-top.png') repeat-x center bottom;background-size:auto 96px}
.ps-foot-in{max-width:1140px;margin:0 auto;padding:2.4rem 1.5rem 1.2rem;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:1.5rem 1.8rem}
.ps-foot-brand img{height:38px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.ps-foot-brand p{font-size:0.82rem;color:#9a8f80;line-height:1.55;margin:0.6rem 0 0;max-width:250px}
.ps-foot h4{color:#fff;font-size:0.72rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 0.5rem}
.ps-foot-col a{display:block;color:#d8cdbd;text-decoration:none;font-size:0.86rem;padding:0.2rem 0;line-height:1.35}
.ps-foot-col a:hover{color:#e8b84a}
.ps-foot-bar{max-width:1140px;margin:0 auto;padding:0.9rem 1.5rem 1.6rem;border-top:1px solid #463827;display:flex;flex-wrap:wrap;gap:0.5rem 1rem;justify-content:space-between;align-items:center;font-size:0.8rem;color:#9a8f80}
.ps-foot-bar a{color:#9a8f80;text-decoration:none}
.ps-foot-bar a:hover{color:#e8b84a}
.ps-foot-legal a{margin-left:0.9rem}
.ps-foot-switch strong{color:#d8cdbd}
.ps-foot-switch a{color:#e8b84a;margin-left:0.3rem}
@media(max-width:760px){.ps-foot-in{grid-template-columns:1fr 1fr;gap:1.2rem 1.4rem}.ps-foot-brand{grid-column:1 / -1}.ps-foot-bar{flex-direction:column;align-items:flex-start}.ps-foot-legal a{margin:0 0.9rem 0 0}}

/* footer logo: centred + a little bigger (27 Jun) */
.ps-foot-brand { text-align: center; }
.ps-foot-brand img { height: 56px; margin: 0 auto 0.4rem; display: block; }
.ps-foot-brand .ps-foot-logo { height: 56px; margin-left: auto; margin-right: auto; }
.ps-foot-brand p { margin-left: auto; margin-right: auto; }