/*
 * Guide pages (.sfg) — ported from Code Snippets #52 "SF Guide styles".
 *
 * Captured from production's rendered HTML and kept property-for-property so
 * the seven guide pages and the product-category intro/below blocks render
 * identically after the snippet is switched off. Values are left as literal
 * hex rather than mapped onto the theme tokens: the guide design uses a second
 * navy (#0b3b5e) alongside the theme navy (#005784), and collapsing the two
 * would change the design rather than port it.
 *
 * .sfg-figure (at the end) is not from snippet 52 — see the note there.
 */

.sfg{font-family:'Manrope',Arial,sans-serif;color:#334155;}
.sfg *{box-sizing:border-box;}
.sfg-hero{background:linear-gradient(180deg,#fff,#F7F8FA);padding:28px 24px 54px;}
.sfg-hero-in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
.sfg-badge{display:inline-block;background:#e2edf6;color:#0b3b5e;font-weight:700;font-size:13px;padding:6px 15px;border-radius:999px;margin-bottom:16px;}
.sfg-h1{color:#0b3b5e;font-size:2.7em;line-height:1.08;font-weight:800;margin:0 0 16px;}
.sfg-lead{font-size:1.14em;line-height:1.6;color:#48566a;margin:0 0 24px;max-width:560px;}
.sfg-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.sfg-btn-orange{background:#e8622a;color:#fff !important;padding:14px 26px;border-radius:8px;font-weight:700;text-decoration:none;display:inline-block;}
.sfg-btn-white{background:#fff;color:#0b3b5e !important;padding:14px 26px;border-radius:8px;font-weight:700;text-decoration:none;display:inline-block;border:1px solid #d5e0ea;}
.sfg-trust{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:#334155;font-weight:600;}
.sfg-trust span{display:inline-flex;align-items:center;gap:7px;}
.sfg-hero-img{border-radius:16px;border:1px solid #E4E7EC;box-shadow:0 18px 40px -20px rgba(12,35,61,.35);width:100%;height:auto;display:block;background:#fff;}
.sfg-hero-img{overflow:hidden;}
.sfg-hero-img img{display:block;width:100%;height:auto;}
.sfg-body{max-width:1160px;margin:0 auto;padding:44px 24px 8px;font-size:1.05em;line-height:1.72;}
body:not(.tax-product_cat) .sfg-body>p,body:not(.tax-product_cat) .sfg-body>h2,body:not(.tax-product_cat) .sfg-body>h3,body:not(.tax-product_cat) .sfg-body>ul,body:not(.tax-product_cat) .sfg-body>ol{max-width:800px;}
.sfg-body h2{color:#0b3b5e;font-size:1.7em;font-weight:800;margin:1.7em 0 .5em;}
.sfg-body h3{color:#0b3b5e;font-size:1.18em;font-weight:700;margin:1.4em 0 .4em;}
.sfg-body a{color:#e8622a;font-weight:600;}
.sfg-table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.97em;border-radius:10px;overflow:hidden;box-shadow:0 3px 16px rgba(11,59,94,.09);}
.sfg-table th{background:#0b3b5e;color:#fff;padding:13px 14px;text-align:left;font-size:.98em;}
.sfg-table td{padding:13px 14px;border-bottom:1px solid #e7edf3;vertical-align:top;}
.sfg-table td:first-child{font-weight:700;color:#0b3b5e;width:26%;}
.sfg-table tr:nth-child(even) td{background:#f7fafc;}
.sfg-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:2.2em 0;}
.sfg-split img{width:100%;border-radius:14px;box-shadow:0 12px 32px rgba(11,59,94,.14);background:#fff;}
.sfg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:1.6em 0;}
.sfg-card{background:#fff;border:1px solid #E4E7EC;border-radius:14px;padding:22px;}
.sfg-card b{color:#0b3b5e;display:block;margin-bottom:5px;font-size:1.02em;}
.sfg-faqh{font-size:1.6em;font-weight:800;color:#005784;text-align:center;margin:1.9em 0 1em;}
.sfg-faq>.sfg-faqh{grid-column:1/-1;width:100%;}
.sfg-faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 1.6em;}
.sfg-faqitem{background:#fff;border:1px solid #E4E7EC;border-radius:12px;padding:20px 24px;}
.sfg-faqitem h3{font-size:15px;font-weight:700;color:#005784;margin:0 0 8px;border:0;padding:0;line-height:1.35;}
.sfg-faqitem p{font-size:14px;color:#5B6B82;margin:0;line-height:1.6;}
.sfg-cta{background:#005784;color:#fff;border-radius:18px;padding:44px 40px;text-align:center;margin:2.6em auto 3em;max-width:1112px;}
.sfg-cta h2{color:#fff !important;margin:0 0 10px;font-size:1.6em;}
.sfg-cta p{color:#cfe0ee;max-width:580px;margin:0 auto 22px;}
.sfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px;margin:1em 0 2.5em;}
.sfg-gcard{display:block;background:#fff;border:1px solid #E4E7EC;border-radius:14px;overflow:hidden;text-decoration:none;transition:border-color .15s;}
.sfg-gcard:hover,.sfg-card:hover{border-color:#005784;}
.sfg-gcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(11,59,94,.15);}
.sfg-gcard img{width:100%;height:185px;object-fit:cover;display:block;background:#f5f8fb;}
.sfg-gcard-b{padding:20px;}
.sfg-gtag{display:inline-block;background:#e2edf6;color:#0b3b5e;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;margin-bottom:10px;}
.sfg-gcard h3{color:#0b3b5e;font-size:1.18em;margin:0 0 8px;font-weight:700;}
.sfg-gcard p{color:#5a6a7d;font-size:.95em;margin:0 0 12px;line-height:1.5;}
.sfg-more{color:#e8622a;font-weight:700;font-size:.95em;}
body:not(.tax-product_cat) .sfg-split,body:not(.tax-product_cat) .sfg-faq,body:not(.tax-product_cat) .sfg-grid{background:#fff;border-top:1px solid #E4E7EC;border-bottom:1px solid #E4E7EC;margin-top:2.2em;margin-bottom:2.2em;padding-top:48px;padding-bottom:48px;padding-left:max(24px,calc(50vw - 580px));padding-right:max(24px,calc(50vw - 580px));width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
@media(max-width:1100px){.sfg-hero-in{grid-template-columns:1fr 1fr;gap:32px;}}
@media(max-width:820px){.sfg-hero-in{grid-template-columns:1fr;gap:26px;}.sfg-h1{font-size:2.05em;}.sfg-split{grid-template-columns:1fr;}.sfg-cards{grid-template-columns:1fr;}.sfg-table td:first-child{width:34%;}.sfg-faq{grid-template-columns:1fr;}}
body.tax-product_cat .sfg-body{max-width:none;padding-left:0;padding-right:0;}
@media(min-width:961px){body.tax-product_cat .sfg-body{width:calc(100% - 292px);margin-left:auto;margin-right:0;}}

/*
 * .sfg-figure is the one rule snippet 52 never had. It comes from a second,
 * older .sfg stylesheet that production still prints on
 * /temporary-fencing-hire-vs-buy/ only, after snippet 52, where it also
 * re-declares most of the shared selectors with different values and wins on
 * source order. That page therefore renders the previous guide design.
 *
 * Only .sfg-figure is carried over here, because it is the sole rule unique to
 * that block and it is inert on every page that has no <figure class="sfg-figure">.
 * The conflicting re-declarations are deliberately NOT ported — doing so would
 * push the old design onto all seven guide pages. That page keeps rendering as
 * it does today, since its own inline block still loads after this stylesheet.
 */
.sfg-figure{margin:1.9em 0;}
.sfg-figure img{width:100%;height:auto;border-radius:14px;display:block;box-shadow:0 12px 32px rgba(11,59,94,.14);}
.sfg-figure figcaption{font-size:.85em;color:#8492a6;margin-top:9px;text-align:center;}

/* ------------------------------------------------------------------------
 * Inherited-context corrections.
 *
 * Snippet 52 was authored inside Elementor, so it leaned on the kit's base
 * styles for anything it did not declare itself. Without the kit those gaps
 * fall through to the theme's base instead, which differs. Each rule below
 * restores a value production actually renders, verified against the live
 * CSSOM rather than guessed, and is scoped to .sfg so the rest of the site
 * keeps the theme's own (better) defaults.
 * ------------------------------------------------------------------------ */

/*
 * .elementor-kit-963 sets a flat `line-height: 22px` on the body, so every
 * .sfg element that does not declare its own inherits 22px on production. The
 * theme's base is 1.6 (24px at the 15px base), which made the hero badge and
 * both buttons ~2px taller. Scoped here rather than changed globally: the
 * theme's 1.6 is deliberate and the homepage and category pages were already
 * matched against it.
 */
.sfg{line-height:22px;}

/*
 * The guide H1 renders at 50px on production — not the 2.7em this stylesheet
 * asks for. `.elementor-kit-963 h1{font-size:50px}` (0,2,0) outranks
 * `.sfg-h1` (0,1,0) and carries no media query, so it wins at every width and
 * the 2.7em / 2.05em rules above have never once applied on the live site.
 * Reproduced at 0,2,0 so it beats both, including inside the 820px block.
 *
 * NOTE: because this matches production exactly, it is also 50px on a phone,
 * which is almost certainly a live bug rather than a decision. Replacing the
 * declaration below with
 *     .sfg .sfg-h1{font-size:clamp(30px,6vw,50px);}
 * keeps the desktop rendering identical and only improves small screens.
 */
.sfg .sfg-h1{font-size:50px;}

/* ------------------------------------------------------------------------
 * Heading corrections inside .sfg-body — the kit again.
 *
 * `.elementor-kit-963 h2 { font-size:20px; font-weight:500 }` (0,2,0)
 * outranks `.sfg-faqh` (0,1,0) and `.sfg-body h2` (0,1,1) on production, so
 * EVERY h2 in a .sfg block renders at 20px/500 there — not the 1.7em/800 this
 * stylesheet asks for. The 2.7em/2.05em `.sfg-h1` case was the same trick.
 *
 * Measured on production, guide page and category archive alike:
 *   .sfg-body h2 / .sfg-faqh   20px, 500, line-height 34.4px, margin 34/10
 *   .sfg-body h3               18.585px, 700, line-height 31.97px
 * The margins already fall out of `.sfg-body h2{margin:1.7em 0 .5em}` once the
 * font-size is 20px, so only size, weight and line-height need restating.
 *
 * Line-height is restored to inherited because the theme's global
 * `h1..h6{line-height:1.25}` beats inheritance and was tightening every
 * heading. Scoped with the child combinator so `.sfg-faqitem h3`
 * (line-height 1.35) and `.sfg-h1` (1.08) keep their own values — a plain
 * `.sfg h3` would have the same specificity as `.sfg-faqitem h3` and, coming
 * later, would silently override it.
 * ------------------------------------------------------------------------ */
.sfg-body > h2{font-size:20px;font-weight:500;line-height:inherit;}
.sfg-body > h3,.sfg-body > h4,.sfg-body > h5,.sfg-body > h6{line-height:inherit;}

/*
 * Category archives: production emits the FAQ wrapper with an inline
 * `padding-top:14px`, overriding the 44px above. Same rendered result, without
 * putting a style attribute in the markup.
 */
body.tax-product_cat .sfg-body{padding-top:14px;}

/*
 * The FAQ closing line on a category archive. Production styles it apart from
 * ordinary .sfg-body copy — #5a6a7d and a 1.4em top margin against the
 * inherited #334155 / 1em. Verified category-specific: on a guide page the
 * same selector computes #334155 with a 15.75px top margin, so this is scoped
 * rather than applied to every .sfg-body paragraph.
 */
body.tax-product_cat .sfg-body > p{color:#5a6a7d;margin-top:1.4em;}
/* Hub cards (/guides/, /delivery-areas/): their h3 also inherits .sfg-body's
   1.72 on production (31.97px), not the theme's global 1.25. */
.sfg-gcard h3{line-height:inherit;}