/*
Theme Name: Best Puppies Food (Hello Elementor child)
Theme URI: https://www.bestpuppiesfood.com/
Description: Child theme of Hello Elementor. Carries the Best Puppies Food design tokens, the article layout for posts, and the scripts for the calculators, finder, recall tracker and search. Pages are built with Elementor free; header and footer come from Ultimate Addons for Elementor (Header Footer Builder).
Author: Best Puppies Food
Template: hello-elementor
Version: 1.0.0
Text Domain: bpf-child
*/

/* Design tokens follow the Elementor Global Colors and Global Fonts (Site Settings), so a rebrand there flows through every class below. */
:root {
  --color-text-primary: var(--e-global-color-primary, #192c58);
  --color-text-secondary: var(--e-global-color-bpfwhite, #ffffff);
  --color-text-tertiary: var(--e-global-color-bpfdark, #121212);
  --color-text-inverse: var(--e-global-color-accent, #ff4e84);
  --color-surface-base: var(--e-global-color-bpfblack, #000000);
  --color-surface-raised: var(--e-global-color-bpfplum, #792f68);
  --color-surface-strong: var(--e-global-color-secondary, #cdeee9);
  --color-surface-tint: var(--e-global-color-bpftint, #f2fbfa);
  --color-text-muted: var(--e-global-color-text, #44506e);
  --color-border-subtle: var(--e-global-color-bpfborder, #c8d0df);
  --color-border-control: var(--e-global-color-bpfcontrol, #5a6788);
  --color-status-danger: var(--e-global-color-bpfdanger, #a3151a);
  --color-status-danger-surface: var(--e-global-color-bpfdangersurf, #fdecec);
  --font-family-stack: var(--e-global-typography-text-font-family, "Figtree"), "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Elementor pages: containers carry the layout classes from the static design */
.elementor-page .elementor-widget-container, .bpf-main .elementor-widget-container { min-width: 0; }
.e-con.wrap, .e-con.bpf-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.e-con.band-mint, .e-con.band-tint, .e-con.band-plum, .e-con.band-black { max-width: none; width: 100%; }
.e-con > .e-con-inner { max-width: var(--wrap); }
.elementor-widget-heading .elementor-heading-title { letter-spacing: -.015em; text-wrap: balance; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor .answer p, .elementor-widget-text-editor .notice p { max-width: none; }
.e-con.article { display: grid; gap: var(--space-block); padding-bottom: var(--space-section); }
.e-con.article > .elementor-element { min-width: 0; }
.e-con.prose-col, .elementor-widget.prose-col { max-width: var(--measure); }
.elementor-widget.prose-col .elementor-widget-container { max-width: var(--measure); }
.elementor-widget.table-wide .elementor-widget-container { max-width: none; }
.elementor-widget-accordion.faq .elementor-accordion-item { border: 0; border-bottom: var(--space-1) solid var(--color-border-subtle); }
.elementor-widget-accordion.faq .elementor-tab-title { padding: var(--space-5) 0; display: flex; align-items: center; justify-content: space-between; }
.elementor-widget-accordion.faq .elementor-tab-title a { font-size: var(--font-size-lg); font-weight: var(--font-weight-heavy); text-decoration: none; }
.elementor-widget-accordion.faq .elementor-tab-content { padding: 0 0 var(--space-7); border: 0; }
.elementor-widget-accordion.faq .elementor-accordion-icon { order: 2; }

/* Posts (single.php) */
.bpf-main { display: block; }
.bpf-main .article-hero img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }
.bpf-main .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Header and footer built with Ultimate Addons for Elementor */
.bpf-header { position: sticky; top: 0; z-index: 40; background: var(--color-surface-page, #fff); border-bottom: var(--space-1) solid var(--color-border-subtle); }
.bpf-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li > a { font-weight: var(--font-weight-strong); }
.bpf-header .hfe-nav-menu li.current-menu-item > a, .bpf-header .hfe-nav-menu li.current-menu-ancestor > a { box-shadow: inset 0 -3px 0 var(--color-text-inverse); }
.bpf-header .sub-menu { border: var(--space-1) solid var(--color-border-subtle); border-radius: var(--radius-xs); }
.bpf-footer .footer-menu a { text-decoration: none; }
.bpf-footer .footer-menu a:hover { text-decoration: underline; }

/* ===== Elementor compatibility for the static layout classes ===== */
.e-con.hero-grid, .e-con.grid-3, .e-con.promo, .e-con.feature-row, .e-con.article { display: grid; }
.e-con.picks-banner, .e-con.section-head, .e-con.footer-top, .e-con.bpf-brand { display: flex; }
.e-con.article, .e-con.hero-grid, .e-con.grid-3, .e-con.promo, .e-con.feature-row { align-content: start; }
.e-con.bpf-page > .e-con-inner, .e-con.section > .e-con-inner, .e-con.home-intro > .e-con-inner, .e-con.bpf-header > .e-con-inner, .e-con.bpf-footer > .e-con-inner, .e-con[id] > .e-con-inner { max-width: var(--wrap); padding-inline: var(--gutter); margin-inline: auto; width: 100%; }
.e-con.band-mint, .e-con.band-tint, .e-con.band-plum, .e-con.band-black { --padding-block-start: var(--space-section); --padding-block-end: var(--space-section); }
.e-con.bpf-page { --padding-block-start: 0px; }
.breadcrumb { padding-inline: 0; }
.article-head { padding-inline: 0; }

/* cards built from the Image Box widget */
.elementor-widget-image-box.card .elementor-image-box-wrapper { display: flex; flex-direction: column; gap: var(--space-7); text-align: left; }
.elementor-widget-image-box.card .elementor-image-box-img { margin: 0 !important; width: 100% !important; }
.elementor-widget-image-box.card .elementor-image-box-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.elementor-widget-image-box.card .elementor-image-box-content { width: 100%; }
.elementor-widget-image-box.card .elementor-image-box-title { margin: 0 0 var(--space-4); font-size: var(--font-size-xl); font-weight: var(--font-weight-heavy); }
.elementor-widget-image-box.card .elementor-image-box-title a { text-decoration: none; }
.elementor-widget-image-box.card .elementor-image-box-title a::after { content: ""; position: absolute; inset: 0; }
.elementor-widget-image-box.card { position: relative; }
.elementor-widget-image-box.card .elementor-image-box-description { margin: 0; color: var(--color-text-muted); }
.elementor-widget-image-box.card--tile .elementor-image-box-img img { aspect-ratio: 4 / 3; }
.e-con.promo .elementor-widget-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }
.e-con.promo--flip .elementor-widget-image { order: -1; }

/* buttons: the kit sets magenta pill with near-black text; secondary buttons use an outline */
.elementor-widget-button .elementor-button { font-weight: var(--font-weight-heavy); }
.elementor-widget-button .elementor-button.elementor-button-info { background: transparent; border: 2px solid var(--color-text-primary); color: var(--color-text-primary); }
.elementor-widget-button .elementor-button.elementor-button-info:hover { background: var(--color-text-primary); color: var(--color-text-secondary); }

/* header and footer */
.bpf-header .e-con-inner { flex-wrap: nowrap; }
.bpf-header .hfe-nav-menu { flex-wrap: nowrap; }
.bpf-header .bpf-brand-name .elementor-heading-title { font-size: 20px; font-weight: 800; white-space: nowrap; }
.bpf-header .bpf-brand-name a { text-decoration: none; }
.bpf-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu li.menu-item:last-child > a.hfe-menu-item { background: var(--color-text-inverse); color: var(--color-text-tertiary); border-radius: var(--radius-md); padding: 8px 18px; }
.bpf-header .bpf-search .hfe-search-button-wrapper { margin: 0; }
.bpf-footer, .bpf-footer a { color: var(--color-text-secondary); }
.bpf-footer .footer-h .elementor-heading-title { font-size: var(--font-size-lg); }
.bpf-footer .hfe-nav-menu li a { padding: 4px 0; font-weight: 400; }
.bpf-footer .footer-disclosure, .bpf-footer .footer-copy { font-size: var(--font-size-sm); max-width: 70ch; }
.bpf-footer .e-con.footer-bottom { border-top: var(--space-1) solid var(--color-surface-raised); padding-top: var(--space-8); }
@media (max-width: 767px) {
  .e-con.footer-top { flex-direction: column; }
  .e-con.footer-top > .e-con { width: 100%; }
}

/* ===== The Elementor kit styles every <button>; restore the design's own button variants ===== */
.elementor-kit-10 button.chip { background: var(--color-surface-page); color: var(--color-text-primary); padding: var(--space-3) var(--space-7); border: 2px solid var(--color-border-control); border-radius: var(--radius-md); font-size: var(--font-size-md); font-weight: var(--font-weight-strong); min-height: 44px; }
.elementor-kit-10 button.chip:hover { border-color: var(--color-text-primary); background: var(--color-surface-page); color: var(--color-text-primary); }
.elementor-kit-10 button.chip[aria-pressed="true"] { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-text-secondary); }
.elementor-kit-10 button.btn--text, .elementor-kit-10 .btn.btn--text { background: transparent; color: var(--color-text-primary); padding: var(--space-4) var(--space-5); border-radius: 0; text-decoration: underline; border: 0; }
.elementor-kit-10 button.btn--secondary, .elementor-kit-10 .btn.btn--secondary { background: transparent; color: var(--color-text-primary); border: 2px solid var(--color-text-primary); }
.elementor-kit-10 button.btn--secondary:hover, .elementor-kit-10 .btn.btn--secondary:hover { background: var(--color-text-primary); color: var(--color-text-secondary); }
.elementor-kit-10 button.btn--sm, .elementor-kit-10 .btn.btn--sm { padding: var(--space-4) var(--space-7); font-size: var(--font-size-sm); }
.elementor-kit-10 button.btn--primary { background: var(--color-text-inverse); color: var(--color-text-tertiary); padding: var(--space-5) var(--space-9, 24px); }
.elementor-kit-10 button.btn--primary:hover { background: var(--color-text-primary); color: var(--color-text-secondary); }
.elementor-kit-10 button.btn--on-dark { background: var(--color-text-secondary); color: var(--color-text-primary); }
.elementor-kit-10 .icon-btn, .elementor-kit-10 .selector-option button { background: transparent; padding: 0; }
.elementor-widget-button.btn-secondary .elementor-button { background: transparent; color: var(--color-text-primary); border: 2px solid var(--color-text-primary); }
.elementor-widget-button.btn-secondary .elementor-button:hover { background: var(--color-text-primary); color: var(--color-text-secondary); }

/* header: brand keeps its width, the menu takes the rest on one line */
.bpf-header .e-con.bpf-brand { flex: 0 0 auto; }
.bpf-header .bpf-nav { flex: 1 1 auto; min-width: 0; }
.bpf-header .hfe-nav-menu { flex-wrap: nowrap; justify-content: flex-end; }
.bpf-header .hfe-nav-menu li a, .bpf-header .hfe-nav-menu li a.hfe-menu-item { white-space: nowrap; }
.bpf-header .bpf-search { flex: 0 0 auto; }
.bpf-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item:last-child { margin-left: var(--space-4); }

/* hidden sub-menus must not widen the page */
html, body { overflow-x: clip; }
.bpf-header .bpf-brand .elementor-widget-site-logo { width: 44px; flex: 0 0 44px; }
.bpf-header .bpf-brand .bpf-brand-name { flex: 0 0 auto; }
.bpf-header .e-con.bpf-brand { width: auto; --width: auto; max-width: 340px; }
.bpf-header .e-con.bpf-brand > .elementor-widget { width: auto; --container-widget-width: auto; }
.bpf-header .elementor-widget.bpf-nav { width: auto; --container-widget-width: auto; }
.bpf-header .elementor-widget.bpf-search { width: auto; --container-widget-width: auto; }

.elementor-widget-image.article-hero { margin-bottom: var(--space-block); }
.elementor-widget-image.article-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.e-con.bpf-page > .e-con-inner > .elementor-widget-image.article-hero { max-width: 100%; }

/* newsletter band lives once, in the footer template; the home page has its own band higher up */
body.home .bpf-newsletter-global { display: none; }
.e-con.card.card--text { border: 2px solid var(--color-text-primary); border-radius: var(--radius-sm); padding: var(--space-8); min-height: 7rem; }
.e-con.card.card--text .card-title .elementor-heading-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-heavy); }
.e-con.card.card--text .card-title a { text-decoration: none; }
.e-con.card.card--text:hover { background: var(--color-surface-tint); }
.e-con.related { padding-block: var(--space-block); }
.elementor-widget-text-editor .breadcrumb ol { margin: 0; }

/* responsive type: the kit sizes are the desktop sizes */
.elementor-widget-heading h1.elementor-heading-title { font-size: clamp(32px, 1.6rem + 2vw, 52px) !important; line-height: 1.12 !important; }
.elementor-widget-heading h2.elementor-heading-title { font-size: clamp(24px, 1.2rem + 1.1vw, 32px) !important; line-height: 1.15 !important; }
@media (max-width: 1024px) {
  .bpf-header .bpf-search { margin-left: var(--space-5); }
  .bpf-header .hfe-nav-menu__toggle { margin-right: var(--space-4); }
  .bpf-header .e-con.bpf-brand { max-width: 62%; }
}
@media (max-width: 767px) {
  .e-con.picks-banner { flex-direction: column; align-items: flex-start; }
  .e-con.section-head { flex-direction: column; align-items: flex-start; }
  .e-con.grid-3 { grid-template-columns: 1fr; }
  .e-con.hero-grid, .e-con.promo, .e-con.feature-row { grid-template-columns: 1fr; }
  .e-con.card.card--text { min-height: 0; }
}

/* contrast: the kit link color must not override button text */
.elementor-kit-10 a.btn, .elementor-kit-10 a.btn--primary, .elementor-kit-10 a.btn--primary:visited { color: var(--color-text-tertiary); }
.elementor-kit-10 a.btn--primary:hover { color: var(--color-text-secondary); background: var(--color-text-primary); }
.elementor-kit-10 a.btn--secondary { color: var(--color-text-primary); }
.elementor-kit-10 a.btn--secondary:hover { color: var(--color-text-secondary); }
.elementor-kit-10 a.btn--on-dark { color: var(--color-text-primary); }
.band-plum .elementor-button, .band-black .elementor-button, .e-con.band-plum .elementor-button .elementor-button-text { color: var(--color-text-tertiary); }
.bpf-header .hfe-nav-menu li.menu-item:last-child > a.hfe-menu-item, .bpf-header .hfe-nav-menu li.menu-item:last-child > a.hfe-menu-item:hover { color: var(--color-text-tertiary) !important; }
.bpf-header .hfe-site-logo-img { width: 44px; height: 43px; aspect-ratio: 540 / 528; }
.bpf-footer .hfe-site-logo-img { width: 44px; height: 43px; }

/* Header and footer are the design's own markup: undo the Elementor kit button styling on its controls */
.elementor-kit-10 .site-header button { box-shadow: none; text-transform: none; letter-spacing: normal; }
.elementor-kit-10 .site-header button.nav-trigger { background: none; color: var(--color-text-primary); padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-xs); min-height: 44px; font: var(--font-weight-strong) var(--font-size-md)/1 var(--font-family-stack); }
.elementor-kit-10 .site-header button.nav-trigger:hover, .elementor-kit-10 .site-header button.nav-trigger[aria-expanded="true"] { background: var(--color-surface-strong); color: var(--color-text-primary); }
.elementor-kit-10 .site-header button.icon-btn { background: none; color: var(--color-text-primary); padding: 0; width: 44px; height: 44px; border: 0; border-radius: var(--radius-md); }
.elementor-kit-10 .site-header button.icon-btn:hover { background: var(--color-surface-strong); color: var(--color-text-primary); }
.elementor-kit-10 .site-header .search-field button { background: none; color: var(--color-text-primary); border: 0; padding: 0; }
.elementor-kit-10 .site-header summary { background: none; color: var(--color-text-primary); }
.elementor-kit-10 .site-header a.btn--primary { background: var(--color-text-inverse); color: var(--color-text-tertiary); }
.elementor-kit-10 .site-header a { text-decoration: none; }
.elementor-kit-10 .site-header .mega a.mega-link { color: var(--color-text-primary); }
.elementor-kit-10 .site-footer a { color: var(--color-text-secondary); }
.bpf-hf-header, .bpf-hf-footer { padding: 0 !important; }

/* Home sections are the design's own markup (each its own .section / .wrap): no extra container box */
.e-con.bpf-home-sec > .e-con-inner, .e-con.bpf-hf-header > .e-con-inner, .e-con.bpf-hf-footer > .e-con-inner { max-width: none; padding: 0; margin: 0; width: 100%; }
.e-con.bpf-home-sec { --padding-block-start: 0px; --padding-block-end: 0px; --gap: 0px; }
.bpf-home-sec .elementor-widget-html, .bpf-home-sec .elementor-widget-html > .elementor-widget-container { width: 100%; margin: 0; padding: 0; }
.elementor-kit-10 .bpf-home-sec a.btn--text { background: transparent; color: var(--color-text-primary); padding: var(--space-4) var(--space-5); border: 0; border-radius: 0; text-decoration: underline; }

/* The fixed header needs the same top space as the design, and card titles keep the design's sizes (the kit sets heading sizes on h2 and h3) */
body.elementor-kit-10 { padding-top: var(--header-full); }
.elementor-kit-10 .card-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-heavy); line-height: var(--line-height-heading); }
.elementor-kit-10 .card--feature .card-title { font-size: clamp(var(--font-size-2xl), 1.1rem + 1.4vw, var(--font-size-3xl)); }
.elementor-kit-10 .card--h .card-title { font-size: var(--font-size-lg); }
.elementor-kit-10 a.btn--text { font-size: var(--font-size-md); font-weight: var(--font-weight-strong); }

/* Match the design's links, fonts and spacing where Elementor's frontend and kit override them */
.elementor a:not(.btn, .brand, .nav-trigger, .nav-link, .mega-link, .m-link, .skip-link):not(.card-title a, .footer-menu a, .m-sub a, .hub-card h3 a, .elementor-button, .elementor-heading-title a) { text-decoration: underline; text-decoration-thickness: var(--space-2); text-underline-offset: .2em; }
.elementor a.btn--text { text-decoration: underline; text-decoration-thickness: var(--space-2); text-underline-offset: .2em; }
.elementor a.btn, .elementor a.card-title, .elementor .card-title a, .elementor .elementor-heading-title a { text-decoration: none; }
body.elementor-kit-10 a { font-family: inherit; }
.elementor .skip-link { top: -300px; }
.elementor .skip-link:focus { top: var(--space-4); }
.e-con { --padding-block-start: 0px; --padding-block-end: 0px; --padding-inline-start: 0px; --padding-inline-end: 0px; }
.elementor-kit-10 .card--text .card-title .elementor-heading-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-heavy); line-height: var(--line-height-heading); }
.elementor-kit-10 .takeaways .elementor-heading-title { font-size: var(--font-size-xl); margin-bottom: var(--space-5); }
.elementor-kit-10 .eyebrow .elementor-heading-title, .elementor-kit-10 .eyebrow { font-size: var(--font-size-sm); font-weight: var(--font-weight-heavy); letter-spacing: .08em; text-transform: uppercase; }
.elementor-kit-10 .takeaways .elementor-heading-title { font-size: var(--font-size-xl) !important; line-height: var(--line-height-heading) !important; }
.elementor-kit-10 .eyebrow .elementor-heading-title, .elementor-kit-10 span.eyebrow, .elementor-kit-10 .eyebrow.elementor-widget .elementor-heading-title { font-size: var(--font-size-sm) !important; font-weight: var(--font-weight-heavy) !important; letter-spacing: .08em !important; text-transform: uppercase; }

/* Article header spacing: same values as the design */
.e-con.article-head { padding: var(--space-4) 0 var(--space-block) !important; }
.elementor-kit-10 .article-head h1.elementor-heading-title { margin: 0 0 var(--space-7); max-width: 20ch; }
.elementor-kit-10 .article-head .byline { margin-top: var(--space-5); }

/* Headings on dark bands keep the design's light colour (the kit colours every h1 to h3 navy) */
.elementor-kit-10 .on-dark :is(h1, h2, h3, h4) { color: var(--color-text-secondary); }