/* Blog pages only (blog/index.html and the posts under /blog/).
   Loaded after styles.css. Uses the site's own colours, fonts, glass tiles and buttons;
   nothing here changes any existing page. */

/* Blog pages only: every tile and heading box is 30% more filled in than the rest of the site
   (site default in styles.css: .86 / .62 / .38), so long text reads more easily over the oak. */
:root{--tile-bg:linear-gradient(135deg,rgba(14,60,40,.97) 0%,rgba(10,44,30,.92) 50%,rgba(6,30,20,.68) 100%)}

/* tag + date line */
.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:0 0 .9rem;font-size:.9rem}
.blog-tag{display:inline-block;border:1px solid rgba(214,167,60,.5);border-radius:999px;padding:.18rem .7rem;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi);background:rgba(8,30,20,.35)}
.blog-meta time{color:#f1f4ee}

/* list page: three tiles per row, wraps, newest first (add new posts at the top of the grid) */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;align-items:stretch}
.blog-card{display:flex;flex-direction:column;align-items:flex-start}
.blog-card h2{font-size:clamp(1.3rem,2vw,1.55rem);margin:0 0 .7rem;line-height:1.2}
.blog-card p:not(.blog-meta){margin:0 0 1.2rem}
.blog-card .btn{margin-top:auto}

/* call-us text in the closing tiles (plain text, not a link) */
.cta-call{font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* post page: heading block */
.page-hero.post-hero h1{max-width:30ch!important;font-size:clamp(1.9rem,4.2vw,3rem)}
.post-hero .blog-meta{justify-content:center}
.post-back{margin:0 0 1rem}

/* post page: single reading column, about 720px of text */
.post-body{max-width:800px;margin:0 auto;padding:2.4rem 40px}
.post-body p,.post-body li{font-size:1.125rem;line-height:1.75}
.post-body p{margin:0 0 1.35rem}
.post-body .post-lead{font-size:1.3125rem;line-height:1.65}
.post-body h2{font-size:clamp(1.55rem,3vw,2rem);line-height:1.2;margin:2.4rem 0 .8rem}
.post-body ul{padding-left:1.4rem;margin:0 0 1.35rem}
.post-body li{margin-bottom:.6rem}
.post-callout{margin:0 0 1.6rem;padding:1.2rem 1.4rem;border:1px solid rgba(214,167,60,.8);border-left-width:4px;border-radius:14px;background:rgba(8,30,20,.8);font-size:1.0625rem;line-height:1.65;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.post-callout strong{color:#fff}
/* a long article should not glow like a clickable tile */
.post-body.card:hover{border-color:rgba(214,167,60,.5)!important;box-shadow:inset 0 1px 0 rgba(240,201,99,.2),0 6px 24px rgba(0,0,0,.25)!important}

/* in-article link (e.g. to another post) */
.post-body a.post-link{color:var(--gold-hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.post-body a.post-link:hover{color:#fff}
.post-body > :last-child{margin-bottom:0}

/* numbered lists */
.post-body ol{padding-left:1.5rem;margin:0 0 1.35rem}

/* "The short answer" box: first thing in the article, set apart from the body */
.post-short{margin:0 0 1.8rem;padding:1.3rem 1.5rem;border:1px solid rgba(240,201,99,.85);border-radius:14px;background:rgba(6,24,16,.85);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.post-body .post-short p{margin:0;font-size:1.0625rem;line-height:1.65}
.post-body .post-short .post-short-label{margin:0 0 .45rem;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}

/* emergency call-out box: last thing in a post, just above the closing contact tile */
.post-emergency{margin:2.4rem 0 0;padding:1.5rem 1.6rem;border:1px solid rgba(240,201,99,.85);border-radius:14px;background:rgba(6,24,16,.85);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.post-body .post-emergency .post-emergency-label{margin:0 0 .45rem;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.post-body .post-emergency h2{margin:0 0 .7rem;color:#fff}
.post-body .post-emergency p{margin:0 0 1.2rem}
.post-emergency-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.post-emergency-actions .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.post-emergency .btn-call{font-size:1.125rem;padding:.95rem 1.9rem}

/* tickable checklists */
.post-check{list-style:none;padding:0!important;margin:0 0 1.35rem;display:grid;gap:.55rem}
.post-check li{display:flex;align-items:flex-start;gap:.75rem;margin:0!important}
.post-check input{appearance:none;-webkit-appearance:none;flex:none;width:1.35rem;height:1.35rem;margin:.22rem 0 0;border:1.5px solid rgba(240,201,99,.85);border-radius:5px;background:rgba(6,24,16,.6);cursor:pointer;display:grid;place-content:center;transition:background .2s}
.post-check input::before{content:"";width:.8rem;height:.8rem;transform:scale(0);transition:transform .15s;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310180f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
.post-check input:checked{background:linear-gradient(135deg,#f6d878,#c4922a);border-color:#f6d878}
.post-check input:checked::before{transform:scale(1)}
.post-check input:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.post-check label{cursor:pointer;font-size:1.125rem;line-height:1.6;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.post-check input:checked + label{color:#d9e0d6}

/* FAQ accordion: one question per item */
.post-faq{margin:0 0 1.35rem;border-top:1px solid rgba(214,167,60,.4)}
.post-faq details{border-bottom:1px solid rgba(214,167,60,.4)}
.post-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem 0;font-weight:600;font-size:1.125rem;line-height:1.45;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:"+";flex:none;width:1.7rem;height:1.7rem;border:1px solid rgba(240,201,99,.8);border-radius:50%;display:grid;place-content:center;font-weight:400;font-size:1.25rem;line-height:1;color:var(--gold-hi);transition:transform .2s}
.post-faq details[open] summary::after{transform:rotate(45deg)}
.post-faq summary:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.post-body .post-faq p{margin:0 0 1.1rem}

/* tables: real tables on wide screens, stacked label/value cards on phones */
.post-table{margin:0 0 1.35rem;border:1px solid rgba(214,167,60,.5);border-radius:12px;overflow-x:auto;background:rgba(6,24,16,.55)}
.post-table:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.post-table table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.55}
.post-table th{text-align:left;padding:.75rem .95rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi);background:rgba(6,24,16,.7);border-bottom:1px solid rgba(214,167,60,.5)}
.post-table td{padding:.8rem .95rem;vertical-align:top;color:#fff;border-top:1px solid rgba(214,167,60,.22);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.post-table tbody tr:first-child td{border-top:0}

@media (max-width:980px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr}
  .post-body{padding:1.4rem 1.2rem}
  .post-body p,.post-body li{font-size:1.0625rem}
  .post-body .post-lead{font-size:1.1875rem}
  .post-check label,.post-faq summary{font-size:1.0625rem}
  .post-table{overflow:visible}
  .post-table table,.post-table tbody,.post-table tr,.post-table td{display:block;width:100%}
  .post-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .post-table tr{padding:.8rem .95rem;border-top:1px solid rgba(214,167,60,.3)}
  .post-table tbody tr:first-child{border-top:0}
  .post-table td{padding:.15rem 0;border:0}
  .post-table td::before{content:attr(data-label);display:block;margin-top:.35rem;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi)}
  .post-table td:first-child::before{margin-top:0}
}