/*
Theme Name: Stone Porch Cottage
Theme URI: https://stoneporchcottage.com
Description: "Fieldstone and Porch Light" (Wren) with Winter's paintings, hummingbird version. Phone first. Michelle's blog, From the Porch, and the guest guide.
Author: Stone Porch Cottage
Version: 2.0.0
Update URI: false
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: stone-porch
*/

/* Design source: Mockups/stone-porch-ww (hummingbird) and
   Mockups/stone-porch-rebuild-claude/source/house.css. Values are Wren's. */

:root{
  --paper:#F5EFE4;      /* limewash cream */
  --paper-2:#EBE3D5;    /* mortar */
  --ink:#2A2521;        /* walnut ink */
  --ink-soft:#5B524A;
  --stone:#8C8378;      /* fieldstone */
  --stone-lt:#D6CCBD;
  --cranberry:#9B2C33;  /* the red chairs, the dollhouse trim */
  --sage:#4D5E47;       /* garden */
  --sage-dk:#34412F;
  --finch:#E2AE3A;      /* the porch light: accent only */
  --serif:"Fraunces",Georgia,serif;
  --sans:"Atkinson",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}
body{font-family:var(--serif);font-size:19px;line-height:1.6;overflow-x:hidden;background:var(--paper)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:static;width:auto;height:auto;clip:auto;display:inline-block;padding:8px 12px;background:var(--finch)}
:focus-visible{outline:3px solid var(--finch);outline-offset:2px}

/* the fieldstone course: a row of uneven stones used as the section rule */
.course{display:flex;gap:4px;height:12px;margin:40px 0}
.course i{flex:var(--w,1);background:var(--stone-lt);border-radius:5px 7px 4px 6px}
.course i:nth-child(3n){background:#CFC3B2;border-radius:7px 4px 6px 5px}
.course i:nth-child(4n){background:#DDD4C7}
.course i:nth-child(1){--w:1.6}.course i:nth-child(2){--w:.9}.course i:nth-child(3){--w:2.2}
.course i:nth-child(4){--w:1.1}.course i:nth-child(5){--w:1.8}.course i:nth-child(6){--w:.7}
.course i:nth-child(7){--w:1.4}.course i:nth-child(8){--w:2}.course i:nth-child(9){--w:1}

/* ---------- masthead ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.masthead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:18px 0 14px;border-bottom:1px solid var(--stone-lt)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;line-height:1.05}
.brand .mark{width:50px;height:auto;flex:none;margin-right:-2px}
.brand b{display:block;font-weight:600;font-size:22px;letter-spacing:-.01em}
.brand small{display:block;font-style:italic;color:var(--cranberry);font-size:15px;margin-top:3px}
.menu-btn{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:9px 16px;background:none;cursor:pointer;min-height:44px}
.nav{display:none;font-family:var(--sans);font-size:16px;gap:28px}
.nav a{text-decoration:none}
.nav a.on,.nav a[aria-current="page"]{border-bottom:2px solid var(--cranberry)}
/* phone: the menu opens as a list under the name */
.nav.open{display:flex;flex-direction:column;gap:0;width:100%;margin-top:12px;border-top:1px solid var(--stone-lt)}
.nav.open a{padding:13px 2px;border-bottom:1px solid var(--paper-2);font-size:18px}
.nav.open a.on,.nav.open a[aria-current="page"]{border-bottom:1px solid var(--paper-2);color:var(--cranberry);font-weight:700}
/* narrow phones (Wren): the Menu button stays beside the name and the name
   wraps inside the brand. A zero flex-basis keeps the button on the first line
   while wrap stays on, so the open list still drops to its own full-width row. */
@media (max-width:899px){
  .brand{flex:1 1 0;min-width:0}
  .menu-btn{flex:none;margin-left:12px}
}

/* the house painting as the home page masthead (Winter, stucco v2) */
.hero{position:relative;height:300px;background:url(assets/img/house-wide-800.webp) center 60%/cover no-repeat;
  -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(245,239,228,.85),rgba(245,239,228,0) 40%)}
.hero-in{position:relative}
.hero .masthead{border-bottom:0}
.hero .nav.open{background:rgba(245,239,228,.96);border-radius:12px;padding:0 14px}
/* phone (Wren, v6): the header sits on paper and the painting is its own 3:2
   block below it, faded in at the top and out at the bottom. No veil, no
   overlay, so the open menu simply pushes the painting down. */
@media (max-width:899px){
  .hero{height:auto;background:none;-webkit-mask-image:none;mask-image:none}
  .hero:before{content:none}
  .hero .nav.open{background:none;border-radius:0;padding:0}
  .hero:after{content:"";display:block;width:100%;aspect-ratio:3/2;background:url(assets/img/house-wide-800.webp) center/cover no-repeat;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 44px,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 44px,#000 80%,transparent 100%)}
}

.kicker{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.kicker a{text-decoration:none}
.lead{padding-top:22px}
.lead .photo{display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.lead .photo img{width:100%;height:100%;object-fit:cover}
.lead h1{font-size:36px;line-height:1.08;font-weight:600;letter-spacing:-.015em;margin:14px 0 10px}
.lead h1 a{text-decoration:none}
.lead p{color:var(--ink-soft)}
.lead .excerpt{margin-top:14px}
.meta{font-family:var(--sans);font-size:14px;color:var(--ink-soft);margin-top:12px}
.meta .by{color:var(--cranberry);font-weight:700}
.meta a{text-decoration:none}
.more{display:inline-block;margin-top:14px;font-family:var(--sans);font-weight:700;font-size:16px;text-decoration:none;border-bottom:2px solid var(--finch);padding-bottom:2px}

.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.section-h h2,.section-h h1{font-size:26px;font-weight:600;line-height:1.15}
.section-h a{font-family:var(--sans);font-size:15px}

/* post lists: rows on a phone, cards on a desk */
.plist{list-style:none}
.plist li{border-top:1px solid var(--paper-2)}
.plist li:first-child{border-top:0}
.plist a{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:14px 0;text-decoration:none}
.plist .th{width:96px;height:96px;border-radius:10px;overflow:hidden;background:var(--paper-2)}
.plist .th img{width:100%;height:100%;object-fit:cover}
.plist h3{font-size:20px;line-height:1.2;font-weight:600}
.plist .d{font-family:var(--sans);font-size:13px;color:var(--ink-soft);margin-top:4px}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:22px;font-family:var(--sans);font-size:16px;font-weight:700}
.pager a{text-decoration:none;border-bottom:2px solid var(--finch)}

.rooms{display:flex;flex-wrap:wrap;gap:8px}
.rooms a{font-family:var(--sans);font-size:15px;text-decoration:none;background:var(--paper-2);border-radius:999px;padding:9px 14px}

/* the About card, with Winter's hummingbird at bee balm standing on its top edge */
.mimi{position:relative;display:grid;grid-template-columns:1fr;gap:16px;align-items:center;background:#fff8ec;border:1px solid var(--stone-lt);border-radius:14px;padding:22px 18px 18px;margin-top:150px}
/* the hummingbird visit: bee balm at the right, a twig to its left, the bird perched on its side
   branch. Absolutely placed on the card's top edge, so nothing here can move the layout.
   Winter's art shares one scale, so every size and offset is in the art's own pixels times --k
   (the 800px pose canvas shows at 125px on desktop, 110px on phones). Registration points:
   flower stem x246 of 500; twig stem x196 of 400; Winter's anchors: the branch landing point
   x267 y211 of the twig, the perched feet x383 y570 of the bird's canvas (the tail tip reaches y683).
   On phones the stage sits 26px further in, so a bird feeding on the bloom's right stays on screen. */
.hb-stage{--k:.1375;position:absolute;bottom:calc(100% - 3px);right:48px;width:calc(1078px*var(--k));height:calc(1059px*var(--k));z-index:2;pointer-events:none}
.hb-stage img{position:absolute;display:block;max-width:none;background:none;border-radius:0}
.hb-flower{right:0;bottom:0;width:calc(500px*var(--k));height:calc(900px*var(--k))}
.hb-twig{right:calc(562px*var(--k));bottom:0;width:calc(400px*var(--k));height:calc(700px*var(--k))}
.hb-bird{right:calc(278px*var(--k));bottom:calc(259px*var(--k));width:calc(800px*var(--k));height:calc(800px*var(--k));transform-origin:47.875% 71.25%}
/* the visit switched off (spc_hb_visit): Winter's still, exactly as in the approved comp */
.mimi .hbf{position:absolute;bottom:calc(100% - 3px);right:22px;width:150px;height:auto;z-index:2;background:none;border-radius:0}
.hb-fly{position:fixed;left:0;top:0;z-index:50;pointer-events:none;will-change:transform,opacity}
@media (min-width:900px){.hb-stage{--k:.15625;right:22px}}
.mimi p{font-size:17px;line-height:1.5}
.mimi em{color:var(--cranberry)}

/* Stay: the garden grows up out of the deep sage */
.band{height:96px;background:url(assets/img/garden-band.webp) bottom center/auto 96px repeat-x;margin:28px 0 -1px}
.stay{background:var(--sage-dk);color:var(--paper);border-radius:16px;padding:26px 22px;position:relative;overflow:hidden;scroll-margin-top:20px}
.band + .stay{border-radius:0 0 16px 16px}
.stay:after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(226,174,58,.45),rgba(226,174,58,0) 70%)}
.stay h2{font-size:26px;font-weight:600;line-height:1.15;margin:8px 0}
.stay p{font-size:17px;color:#E4DDCF}
.stay .kicker{color:var(--finch)}
.btn{display:inline-block;margin-top:16px;font-family:var(--sans);font-weight:700;font-size:16px;text-decoration:none;background:var(--finch);color:var(--ink);border-radius:999px;padding:12px 20px}

.foot{margin-top:48px;padding:28px 0 40px;border-top:1px solid var(--stone-lt);font-family:var(--sans);font-size:14px;color:var(--ink-soft)}
.foot b{font-family:var(--serif);font-size:18px;color:var(--ink)}
.foot .fmark{width:30px;height:auto;display:inline-block;vertical-align:-4px;margin-right:6px}
.foot nav{display:flex;flex-wrap:wrap;gap:16px;margin:10px 0}
.foot.narrow{max-width:680px;margin-left:auto;margin-right:auto}

/* ---------- single post and pages ---------- */
.post{max-width:680px;margin:0 auto}
.post > header{padding:26px 0 18px}
.post h1{font-size:40px;line-height:1.05;font-weight:600;letter-spacing:-.015em;margin:10px 0 12px;overflow-wrap:break-word}
.post .hero-img{border-radius:14px;overflow:hidden;margin:0 -4px}
.post .hero-img img{width:100%}
.body{margin-top:26px}
.body p{margin:0 0 1.05em}
.body > p:first-of-type::first-letter{font-size:3.3em;float:left;line-height:.85;padding:6px 8px 0 0;color:var(--cranberry);font-weight:600}
.page-body > p:first-of-type::first-letter{font-size:inherit;float:none;padding:0;color:inherit;font-weight:inherit}
.body a{text-decoration-color:var(--finch);text-decoration-thickness:2px;text-underline-offset:3px}
.body h2{font-size:28px;line-height:1.15;font-weight:600;margin:1.2em 0 .5em}
.body h3{font-size:23px;line-height:1.2;font-weight:600;margin:1.1em 0 .4em}
.body ul,.body ol{margin:0 0 1.05em 1.3em}
.body blockquote{margin:1.2em 0;padding:4px 0 4px 16px;border-left:4px solid var(--cranberry);font-style:italic;color:var(--ink-soft)}
/* Michelle's photos: classic [caption] figures, aligned images and image blocks */
.body img{border-radius:12px}
.body figure,.body .wp-caption,.body .wp-block-image{margin:26px -4px;max-width:calc(100% + 8px)!important;width:auto!important}
.body figure img,.body .wp-caption img{width:100%;height:auto}
.body figcaption,.body .wp-caption-text{font-family:var(--sans);font-size:14px;color:var(--ink-soft);margin-top:8px}
.body .alignleft,.body .alignright{float:none;margin:26px auto}
.body .aligncenter{margin-left:auto;margin-right:auto}
.body .wp-block-group{margin:0 0 1.05em}
.body iframe,.body video{max-width:100%}
.body .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.body .wp-block-button__link,.body .wp-element-button{display:inline-block;font-family:var(--sans);font-weight:700;font-size:16px;text-decoration:none;background:var(--sage-dk);color:var(--paper);border-radius:999px;padding:12px 20px}
.body::after{content:"";display:table;clear:both}
/* Every in-post photo sits on the design grid: full column width (680px max),
   12px radius, 26px above and below, never floated, whatever alignment class
   the old editor gave it (Wren). CSS only; Mimi's content is unchanged. */
.post .body img{float:none!important;display:block;width:100%!important;max-width:100%!important;height:auto!important;margin:26px 0;border-radius:12px}
.post .body figure,.post .body .wp-caption,.post .body .wp-block-image,.post .body .alignleft,.post .body .alignright,.post .body .aligncenter,.post .body .alignnone{float:none!important;width:100%!important;max-width:100%!important;margin:26px 0!important}
.post .body figure img,.post .body .wp-caption img{margin:0}
.post .body a:has(> img){display:block}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tags a{font-family:var(--sans);font-size:14px;text-decoration:none;background:var(--paper-2);border-radius:999px;padding:7px 12px}
.next{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;font-family:var(--sans);font-size:14px}
.next a{text-decoration:none;border:1px solid var(--stone-lt);border-radius:12px;padding:14px;display:block}
.next a.home{background:var(--paper-2);border-color:transparent}
.next b{display:block;font-family:var(--serif);font-size:18px;line-height:1.2;margin-top:4px}
/* forms on Get in Touch */
.body input[type=text],.body input[type=email],.body textarea,.body select{width:100%;font:inherit;font-family:var(--sans);font-size:17px;padding:10px 12px;border:1.5px solid var(--stone-lt);border-radius:10px;background:#fffbf4}
/* Get in Touch on riley-forms (the post-launch swap from WPForms): Wren's same spec, 5 Oct. */
.body .rf-form .rf-title{display:none}
.body .rf-form .rf-field{margin:0 0 18px}
.body .rf-form .rf-field label{display:block;font-family:var(--sans);font-weight:700;font-size:16px;margin:0 0 6px;color:var(--ink)}
.body .rf-form .rf-field input[type=text],.body .rf-form .rf-field input[type=email],.body .rf-form .rf-field textarea{width:100%;box-sizing:border-box;font-family:var(--sans);font-size:17px;padding:10px 12px;border:1.5px solid #D6CCBD;border-radius:8px;background:#fffbf4;color:var(--ink)}
.body .rf-form .rf-submit button{background:#34412F;color:#F5EFE4;border:0;border-radius:999px;padding:12px 22px;font-family:var(--sans);font-weight:700;font-size:16px;line-height:1.25;cursor:pointer;opacity:1}
.body .rf-form .rf-submit button:hover{background:#4D5E47;color:#F5EFE4}
.body .rf-form .rf-submit button:focus{outline:none;background:#34412F}
.body .rf-form .rf-submit button:focus-visible{outline:3px solid var(--finch);outline-offset:3px}
.body .rf-notice{font-family:var(--sans);border-radius:8px;padding:12px 14px;background:var(--paper-2)}
/* required fields (Wren, 5 Oct): a cranberry asterisk, silent to screen readers (they hear "required" from the input) */
.body .rf-form .rf-field:has(:required) > label::after{content:" *";content:" *" / "";color:#9B2C33}
/* the inline error that replaces the browser's validation bubble (assets/js/site.js) */
.body .rf-form .rf-err{display:block;font-family:var(--sans);font-size:15px;color:#9B2C33;margin:6px 0 0}
.body .rf-form .rf-field :is(input,textarea)[aria-invalid=true]{border-color:#9B2C33}
.body button[type=submit],.body input[type=submit]{font-family:var(--sans);font-weight:700;font-size:16px;background:var(--finch);color:var(--ink);border:0;border-radius:999px;padding:12px 22px;cursor:pointer}

.empty{padding:40px 0;text-align:center;color:var(--ink-soft)}

/* ---------- desktop: the parlor opens up ---------- */
@media (min-width:900px){
  body{font-size:20px}
  .menu-btn{display:none}
  .nav{display:flex}
  .brand b{font-size:30px}
  .brand .mark{width:78px}
  .hero{height:620px;background-image:url(assets/img/house-wide.webp);background-position:center 20%}
  .home-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:56px;align-items:start;padding-top:36px}
  .lead{padding-top:0}
  .lead h1{font-size:52px}
  .side .mimi{margin-top:150px;margin-bottom:28px}
  .band{height:110px;background-size:auto 110px}
  .plist.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .plist.cards.three{grid-template-columns:repeat(3,1fr);gap:32px}
  .plist.cards li{border-top:0}
  .plist.cards a{display:block;padding:0}
  .plist.cards .th{width:auto;height:auto;aspect-ratio:1;border-radius:12px}
  .plist.cards h3{margin-top:12px}
  .plist.cards .cat{display:none}      /* desktop cards: the date only (Wren) */
  .post h1{font-size:48px}
}