/* ======================================================================
   WordPress-side styles that are NOT Elementor: the blog templates and the
   two carried-over pages. Everything Elementor lives in elementor-map.css.

   Nothing here may use the design's section class names (.sh-hero, .sh-tag,
   .shed-card ...): those are now Elementor widget classes, and a stray rule
   here would style the widget wrapper instead of the element inside it.
   ====================================================================== */

/* section grounds, shared by Elementor sections and the templates */
.bg-off{background:var(--off)}
.bg-white{background:var(--white)}

/* the two carried-over pages ship their own markup and use site.css untouched */
.sv-static{display:contents}

/* ------------------------------------------------ blog listing */
.blog-hero{background:var(--ink);padding:150px 0 56px;text-align:center}
.blog-hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.4vw,44px);
  color:#fff;letter-spacing:-.02em}
.blog-hero p{color:rgba(255,255,255,.75);margin-top:12px;font-size:16px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
@media(max-width:1000px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.post-grid{grid-template-columns:1fr}}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:block;transition:.3s var(--ease)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-card .pc-img{aspect-ratio:16/10;overflow:hidden;background:var(--off);display:block}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover;display:block}
.post-card .pc-body{padding:20px 22px 24px;display:block}
.post-card h3{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.3;
  color:var(--ink)}
.post-card .pc-meta{margin-top:10px;font-size:13px;color:var(--ink-soft)}

/* ------------------------------------------------ blog listing with real posts (18 Sep)
   The client's articles arrive with 55-word auto-excerpts and run to three pages of ten;
   the static blog.html cards carry one short line each and no pagination. The excerpt is
   clamped to four lines (the longest of the six starter cards on a phone) so the rows stay level, and WordPress's pagination is the
   design's pill row. */
body.blog .guide-card .post-ex{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.guides .pagination{margin-top:34px}
.guides .pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.guides .pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 16px;border-radius:100px;background:var(--white);border:1px solid var(--line);font-family:var(--head);font-weight:700;font-size:13.5px;color:var(--ink);text-decoration:none;transition:.25s var(--ease)}
.guides .pagination a.page-numbers:hover{border-color:var(--ochre);color:var(--ochre-deep);transform:translateY(-2px)}
.guides .pagination .page-numbers.current{background:var(--brand-gradient);border-color:transparent;color:#fff}
.guides .pagination .page-numbers.dots{border:0;background:none;min-width:24px;padding:0}

/* ------------------------------------------------ single post
   Head as the listing's (.svc-hero crumb + .sec-head), then the article on an 820px
   measure: the featured photo in the card frame, the body copy at the page's 16.5/1.8,
   headings in the display face, lists and tables in the design's pieces. */
.post-head{padding-bottom:14px}
.post-head-inner{max-width:820px}
.post-head-inner h1{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.4vw,42px);line-height:1.15;letter-spacing:-.02em;margin:18px 0 0;color:var(--ink)}
.post-head-inner .eyebrow{margin-top:20px}
.svc-hero .post-head-inner p.post-meta{margin:14px 0 0;font-family:var(--head);font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ochre-deep)}
.single-article{max-width:820px;margin:0 auto;padding:8px 20px 80px}
.single-article .post-photo{margin:0 0 30px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--white)}
.single-article .post-photo img{display:block;width:100%;height:auto}
/* the client's older articles wrap their paragraphs in a <div class="container">, so the
   rhythm is set on the pieces at any depth, not on the direct children */
.single-article .content :is(p,h2,h3,h4,ul,ol,figure,table,blockquote,.wp-block-image,.refer-blog-wrapper){margin-top:18px}
.single-article .content :is(p,h2,h3,h4,ul,ol,figure,table,blockquote):first-child{margin-top:0}
.single-article .content p,.single-article .content li{font-size:16.5px;line-height:1.8;color:var(--ink-soft)}
.single-article .content h2{font-family:var(--disp);font-weight:700;font-size:26px;line-height:1.2;color:var(--ink);margin-top:36px}
.single-article .content h3{font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.25;color:var(--ink);margin-top:28px}
.single-article .content h4{font-family:var(--head);font-weight:700;font-size:16.5px;color:var(--ink);margin-top:24px}
.single-article .content ul,.single-article .content ol{padding-left:24px;list-style:disc} /* site.css resets lists */
.single-article .content ol{list-style:decimal}
.single-article .content li{margin-top:8px}
.single-article .content li::marker{color:var(--ochre-deep);font-weight:700}
/* the imported articles carry the old site's crimson as an inline style on every link;
   the theme owns the palette */
.single-article .content a{color:var(--ochre-deep)!important;font-weight:600!important;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.single-article .content a:hover{color:var(--ochre)!important}
/* the old site's "related blog" strip: thumbnail beside one line */
.single-article .content .refer-blog-wrapper{display:flex;gap:18px;align-items:center;padding:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.single-article .content .refer-blog-wrapper img{width:120px;height:80px;object-fit:cover;border-radius:var(--radius-sm);margin:0}
.single-article .content .refer-blog-wrapper p{margin:0;font-size:15px}
.single-article .content img{display:block;max-width:100%;height:auto;border-radius:var(--radius)}
.single-article .content figure{margin:24px 0}
.single-article .content figcaption{font-size:13px;color:var(--ink-soft);margin-top:8px;text-align:center}
.single-article .content blockquote{margin:24px 0;padding:18px 24px;border-left:4px solid var(--ochre);background:var(--white);border-radius:var(--radius-sm);font-size:17px;color:var(--ink)}
.single-article .content table{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.single-article .content th,.single-article .content td{padding:12px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.single-article .content th{font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ochre-deep);background:var(--ochre-tint);border-top:0}
.single-article .content style{display:none}
.single-article .post-back{margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.single-article .post-back a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font-family:var(--head);font-weight:700;font-size:14px;color:var(--ink);text-decoration:none}
.single-article .post-back a:hover{color:var(--ochre-deep)}
@media(max-width:640px){.single-article{padding:28px 16px 60px}.single-article .content h2{font-size:22px}}

/* ------------------------------------------------ editor comfort */
.editor-styles-wrapper{background:#fff}

/* ------------------------------------------------ the WPForms enquiry form
   [svco_contact_form] on the contact page and in the homepage card. The design
   supplies the inputs' skin (.contact-form input ...); these are the WPForms
   structure only (both classes in the selector: WPForms' own sheet loads after this one and ties on a single class): half-width pairs, hidden labels, the 132px textarea, the
   button 23px under it with its ::after arrow, one column under 620. */
.sv-form.sv-form-wpforms .wpforms-field-container{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.sv-form.sv-form-wpforms .wpforms-form input,.sv-form.sv-form-wpforms .wpforms-form select,.sv-form.sv-form-wpforms .wpforms-form textarea{width:100%!important;max-width:100%!important;font-family:var(--body);font-size:15px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--off);color:var(--ink)}
.sv-form.sv-form-wpforms .wpforms-form input:focus,.sv-form.sv-form-wpforms .wpforms-form select:focus,.sv-form.sv-form-wpforms .wpforms-form textarea:focus{outline:none;border-color:var(--ochre);background:#fff;box-shadow:0 0 0 3px var(--ochre-tint)}
.sv-form.sv-form-wpforms .wpforms-field{grid-column:1 / -1;padding:0 0 12px}
/* WPForms pads every field 1px each side under 600px (div.wpforms-container .wpforms-form .wpforms-field), 2px off the static input width */
.sv-form.sv-form-wpforms div.wpforms-container .wpforms-form .wpforms-field{padding-left:0;padding-right:0}
.sv-form.sv-form-wpforms .wpforms-field.sv-half{grid-column:auto}
.sv-form.sv-form-wpforms .wpforms-submit-container{padding:0}
.sv-form.sv-form-wpforms button.wpforms-submit{width:100%}
.sv-form.sv-form-wpforms .wpforms-error{font-size:12.5px;color:var(--ochre-deep);margin:-6px 0 10px;display:block}
.sv-form.sv-form-wpforms .wpforms-confirmation-container-full{background:var(--off);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px;font-size:14.5px;color:var(--ink)}
.sv-form.sv-form-wpforms .wpforms-form textarea{height:132px;min-height:132px}
.sv-form.sv-form-wpforms .wpforms-submit-container{padding-top:11px}
.sv-form.sv-form-wpforms button.wpforms-submit::after{content:"\2192";display:inline-block;margin-left:10px;transition:transform .35s var(--ease)}
.sv-form.sv-form-wpforms button.wpforms-submit:hover::after{transform:translateX(5px)}
@media(max-width:620px){.sv-form.sv-form-wpforms .wpforms-field-container{grid-template-columns:1fr}
.sv-form.sv-form-wpforms .wpforms-field.sv-half:has(+ .sv-half){padding-bottom:24px}}
.sv-form.sv-form-wpforms .wpforms-container{margin-bottom:0}