/*
 * GeneratePress shell integration for the heating-oil comparison page.
 *
 * The oil page reuses the electricity comparator's markup and design, so it
 * needs the same theme counter-rules. Those live in comparator-page.css gated
 * on .hp-electricity-comparator-page, which the oil page does not carry, and
 * without them GeneratePress paints the hero heading and the hero CTA in its
 * own colours: dark green text on the dark hero and green text on orange.
 *
 * The phone comparator solved this with its own shell file, and this is the
 * same file for oil. It repeats the locked source values only, and introduces
 * no design value of its own.
 */

.hp-oil-comparator-page #page.grid-container{max-width:none;width:100%}
.hp-oil-comparator-page .site-content{padding:0}
.hp-oil-comparator-page .content-area,.hp-oil-comparator-page .site-main,.hp-oil-comparator-page .inside-article,.hp-oil-comparator-page .entry-content{margin:0;max-width:none;padding:0;width:100%}

/* GeneratePress declares heading typography with !important. These counter-rules
   repeat the locked Claude source values without introducing new design values. */
.hp-oil-comparator-page .hp-claude-comparator h1,
.hp-oil-comparator-page .hp-claude-comparator h2,
.hp-oil-comparator-page .hp-claude-comparator h3,
.hp-oil-comparator-page .hp-claude-comparator h4{font-family:var(--font-head)!important;font-weight:600!important;color:var(--head)!important;letter-spacing:-.015em!important;line-height:1.12!important;margin:0!important;text-wrap:balance}
.hp-oil-comparator-page .hp-claude-comparator .hero h1{color:#fff!important;font-size:clamp(2.375rem,4.5vw,3.75rem)!important;max-width:17ch}
.hp-oil-comparator-page .hp-claude-comparator .faq-item summary h3{font-family:var(--font-body)!important;color:var(--head)!important;font-weight:700!important;letter-spacing:0!important}

/* GeneratePress gives article links and buttons more specific typography and
   color rules. Repeat only locked source values at the comparator boundary. */
.hp-oil-comparator-page .hp-claude-comparator a{color:var(--blue)}
.hp-oil-comparator-page .hp-claude-comparator a:hover{color:var(--teal-dark)}
.hp-oil-comparator-page .hp-claude-comparator a[class~="btn-cta"]{background:#EB6E00;border-color:#EB6E00;color:#fff}
.hp-oil-comparator-page .hp-claude-comparator a[class~="btn-cta"]:hover{background:#D96400;border-color:#D96400;color:#fff}
.hp-oil-comparator-page .hp-claude-comparator a[class~="mini-cta"]{background:#EB6E00;color:#fff}
.hp-oil-comparator-page .hp-claude-comparator a[class~="mini-cta"]:hover{color:#fff}
.hp-oil-comparator-page .hp-claude-comparator a[class~="link-plain"]{color:#AFE9D6}
.hp-oil-comparator-page .hp-claude-comparator a[class~="link-plain"]:hover{color:#fff}
.hp-oil-comparator-page .hp-claude-comparator [class~="btn"]{font-family:var(--font-body)!important;font-size:1.0625rem!important;font-weight:700!important}
.hp-oil-comparator-page .hp-claude-comparator [data-hp-offer-cta]{font-size:1.125rem!important}
.hp-oil-comparator-page .hp-claude-comparator [data-hp-compare-form] [class~="adv-toggle"],
.hp-oil-comparator-page .hp-claude-comparator [data-hp-compare-form] [class~="btn-cta"]{font-size:1rem!important}

/* Keep the source table's 860px minimum inside its own scroll container. */
.hp-oil-comparator-page .hp-claude-comparator :has(> [data-hp-server-results]){min-width:0}
.hp-oil-comparator-page .hp-claude-comparator [data-hp-results="table"]{position:relative}