/* 
Theme Name: Storefront Child 
Version: 1.3
Description: Child theme for Storefront. 
Template: storefront
Author: Clark
*/

/* --------------- Theme customization starts here ----------------- */

@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
      text-shadow:
        0 0 4px #fff,
        0 0 11px #fff,
        0 0 19px #fff,
        0 0 40px #0fa,
        0 0 80px #0fa,
        0 0 90px #0fa,
        0 0 100px #0fa,
        0 0 150px #0fa;
    }
    20%, 24%, 55% {       
      text-shadow: none;
    }
  }

@keyframes flicker2 {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
      text-shadow:
        0 0 4px #fff,
        0 0 11px #fff,
        0 0 19px #fff,
        0 0 40px #0fa,
        0 0 80px #0fa,
        0 0 90px #0fa,
        0 0 100px #0fa,
        0 0 150px #0fa;
    }
    20%, 24%, 55% {       
      text-shadow: none;
    }
  }

.branding1 {
    text-align: center;
    margin: 20px 0 20px 0;
     
    text-decoration: none;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;

/*  flicker — disabled
    -webkit-animation: flicker 1.5s ease-in-out infinite alternate;
    -moz-animation: flicker 1.5s ease-in-out infinite alternate;
    animation: flicker 1.5s infinite alternate;
*/
}

.branding2 {
    text-align: center;
    margin: 20px 0 20px 0;
      
    text-decoration: none;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;

/*  flicker — disabled
    -webkit-animation: flicker 1.5s ease-in-out infinite alternate;
    -moz-animation: flicker 1.5s ease-in-out infinite alternate;
    animation: flicker 1.5s infinite alternate;
*/
}

/*Get rid of that purple button outline*/
a:focus,input:focus,textarea:focus,button:focus {
    outline:none !important;
}

.site-header {
    background-position: unset !important;
}

/* --- Hard code header background image  ---
   Was two comma-separated URLs: the gwl-bucket Spaces bucket first, then
   griswoldlights.com. Comma-separated background-image values are LAYERS, not
   fallbacks — the browser fetches both and paints the first on top. The bucket
   was decommissioned and answers 403, so every page load spent a request on an
   image that could never paint, and the header was always coming from the
   second URL anyway.
   Now one relative URL, resolved against this stylesheet, so it also stops
   hardcoding the production domain into the dev containers. */
#masthead {
    background-image: url('images/header.jpg') !important;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 16px;
}

.site-branding p { 
    color: white;
}

.beta .site-title {
    font-weight: 700;
    color: white !important;
}

p.site-description {
    font-weight: bold;
}

/* --- Set the header nav font white  --- */
.main-navigation ul li a, .site-title a, ul.menu li a, .site-branding h1 a, button.menu-toggle, button.menu-toggle:hover, .handheld-navigation .dropdown-toggle {
    color: white !important;
}

/* shop  header */
h1 {
    font-size: revert !important;
}

/* #secondary column category widget */
#secondary {
    background-color: #fbfbfb;
    padding: 20px;
    border-radius: 10px;
}

.gamma.widget-title {
    font-weight: 575 !important;
}

.widget_categories ul li::before {
    content: none !important;
}

/* --- set the background of the mini cart to gray  --- */
.widget .widget-title, .widget .widgettitle {
    font-weight: bold;
}

.site-footer .storefront-handheld-footer-bar a:not(.button):not(.components-button) {
    color: black; 
}

.storefront-handheld-footer-bar ul li.cart .count {
    background-color:green !important;
    color: black !important;
    border-color: gray !important;
}

button.menu-toggle {
    background-color: #74747474;
    border-radius: 10px;
}

button.menu-toggle:hover {
    background-color: #80808000;
}

.woocommerce-store-notice {
    background-color: #2ad03c !important;
}

.attachment-woocommerce_thumbnail size-woocommerce_thumbnail {
    border-radius: 10px;
}

.contact-form {
    border-radius: 10px;
}

.site-search .widget_product_search form input[type="search"], .site-search .widget_product_search form input[type="text"] {
    padding-left: 2.617924em;
    border-radius: 5px;
}

.widget_product_categories ul li::before {
    content: none !important;
}

.added_to_cart.wc-forward {
    white-space: nowrap;
}

a.remove::before {
    color:green !important;
}

.widget_shopping_cart_content {
    background-color: #8a8888;
}

.site-header-cart .woocommerce-mini-cart__total total {
    background-color: #8a8888;	
}

.site-header .widget_shopping_cart p.total {
    background-color: #8a8888 !important;
}

.col-full {
    padding-top: 15px;
}

.page-numbers {
    border-radius: 10px;
    margin: 7px !important;
}

#payment .payment_methods li img {
    max-height: 18px;
    max-width: 18px;
}

.onsale {
    background-color: #b6e18b;
}

.wc-block-grid__product-onsale, .onsale {
    border: none;
}

#woocommerce_product_categories-2 {
    background-color: #fbfbfb;
    border-radius: 10px;	
}

.storefront-breadcrumb {
    padding: 10px !important;
    margin: 0px 0px 0px 0px !important;
}

.widget-area .widget {
    text-decoration: none !important;
}

.wc-block-components-pagination__page--active[disabled] {
    color: #fff !important;
}

.wc-block-components-pagination__page--active[disabled]:focus,
.wc-block-components-pagination__page--active[disabled]:hover {
    color: #fff !important;
}

.wc-block-components-pagination__page {
    color: #fff !important;
}

/* inline style */

.added_to_cart.wc-forward {
    white-space: nowrap;
}

a.remove::before {
    color: green !important;
}

.widget_shopping_cart_content {
    background-color: #8a8888;
}

.site-header-cart .woocommerce-mini-cart__total total {
    background-color: #8a8888;
}

.site-header-cart, .widget_shopping_cart {
    border-radius: 0px 0px 10px 10px;
}

.site-header-cart .widget_shopping_cart .buttons, .site-header-cart .widget_shopping_cart .total
 {
    background-color: #8a8888;
    color:black;
 }

.woocommerce-mini-cart__total total {
    color:black;
}

.site-header-cart .widget_shopping_cart {
    border-radius: 0px 0px 10px 10px;
}

.col-full {
    padding-top: 1px;
}

.griswoldlights-page-intro {
    max-width: 780px;
    margin: 0 0 2.5em;
    padding: 1.5em;
    border-left: 4px solid #2f7d32;
    background: #f6fbf4;
}

.griswoldlights-page-intro h1 {
    margin: 0 0 0.45em;
}

.griswoldlights-page-intro p:last-child {
    margin-bottom: 0;
}

.griswoldlights-related-guides {
    margin: 2.5em 0;
    padding: 1.25em 1.5em;
    border: 1px solid #d7d7d7;
    background: #fbfbfb;
}

.griswoldlights-related-guides h2 {
    margin: 0 0 0.65em;
}

.griswoldlights-related-guides ul {
    margin: 0;
    padding-left: 1.25em;
}

@media (max-width: 480px) {
    .griswoldlights-page-intro,
    .griswoldlights-related-guides {
        padding: 1em;
    }
}

.single-product div.product .woocommerce-product-rating {
    margin-top: 0.125em !important;
}

.star-rating span:before, .quantity .plus, .quantity .minus, p.stars a:hover:after, p.stars a:after, .star-rating span:before, #payment .payment_methods li input[type=radio]:first-child:checked+label:before {
    color: #f29b65;
}

#calc_shipping_country_field {
    display: none !important;
}

/*#calc_shipping_state_field {
    display: none !important;
}

#calc_shipping_city_field {
    display: none !important;
}*/

::selection {
    background: yellow;
}

.site-header-cart .widget_shopping_cart a.button, .wc-block-grid__products .wc-block-grid__product .wp-block-button__link {
    color:black !important;
}

.button.wc-forward {
    padding: 5px;
}




/* from additional.css */
/* ############################################################################## */
.button {
    border-radius: 15px;
    white-space: nowrap !important;
    background-color: #eee !important;
    color: black !important;
    margin-bottom: .236em;
}

.woocommerce-pagination .page-numbers li .page-numbers.current {
    background-color: #e6e6e6;
    color: #636363;
}

.main-navigation ul.menu, .main-navigation ul.nav-menu {
    font-weight: bold;
}

.page-numbers.current {
    background-color: #cecece !important;
}

.home.post-type-archive-product .site-header {
    margin-bottom: 2em;
}

#jp-relatedposts {
    display: none !important;
}

.main-navigation ul.menu,
.main-navigation ul.nav-menu {
    font-weight: 575;
}

button#site-navigation-menu-toggle {
    background: gray;
}

/* uh, people definitely want this newsletter */
.form-row.form-row-wide.mailchimp-newsletter {
    display: none;
}

.paypal-logo {
    float: right;
}

.woocommerce-info {
    background-color: #0f834d;
}

/* theme woo-usps-shipping */
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: #0f834d !important;
}

input.wpcf7-text {
    width: 100%;
}

p.woocommerce-shipping-destination {
    text-transform: capitalize;
}

/* Keep a product thumbnail whose file is missing from wp-content/uploads from
   blowing the grid open. WordPress 6.7+ prepends `auto,` to the sizes attribute of
   lazy-loaded images and core ships
       img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }
   as its CLS placeholder. That fallback size only applies to an element with no
   intrinsic size — which is exactly a broken image — so a 404ing thumbnail took the
   1500px height, opening its cell to ~1700px. Five of those in one row was the
   ~1400px hole on the shop page. Dropping the fallback collapses the cell back;
   woocommerce_thumbnail is hard-cropped square, so the ratio keeps it the right
   shape. Both declarations are no-ops for an image that loads. */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
    contain-intrinsic-size: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}


/* Colour contrast: the Sale badge and the was-price both fail WCAG 2.1 AA (todo.md A-2).
 *
 * Measured with axe-core against the live shop grid, not eyeballed:
 *
 *   .onsale        #6d6d6d on #b6e18b   3.48:1   (needs 4.5:1 -- 12.25px, normal weight)
 *   .price del     #a0a0a0 on #ffffff   2.61:1   (needs 4.5:1 -- 14px, normal weight)
 *
 * Both come from stock Storefront, so this is an override rather than an edit -- a parent-theme
 * update will not undo it, and it does not fork another parent template the way header.php did.
 *
 * Only the FOREGROUND changes. The green badge and the muted grey of the struck-through original
 * price are the design; they just were not dark enough to read. New ratios: 8.5:1 and 5.3:1.
 *
 * The active selling price already passed and is untouched -- it is the `del` element, the price
 * a shopper is being told they are NOT paying, that was failing. Worth knowing before "fixing"
 * the wrong selector.
 */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
    color: #333333;
}

/* `opacity` is the load-bearing half here, and setting the colour alone does nothing useful.
 * Storefront mutes the was-price with `opacity: .65`, not with a grey, so a declared #6b6b6b
 * still composites to #9f9f9f against white -- 2.64:1, which is what the first attempt at this
 * fix measured. Opacity goes to 1 and the muting becomes the colour itself, so the rendered
 * result is the same grey it always looked like and axe can now read it: 5.3:1. */
.woocommerce .price del,
.woocommerce .price del .amount,
.woocommerce .price del bdi,
.woocommerce-page .price del,
.woocommerce-page .price del .amount,
.woocommerce-page .price del bdi {
    color: #6b6b6b;
    opacity: 1;
}

/* Amazon picks teaser -- the seasonal four-up block on the shop grid (homepage) and the blog
 * index, 2026-09-17 (todo.md BIZ-1). Its own bordered panel so it reads as a labelled aside,
 * not as part of the store's own product grid below it. Text colour is inherited on purpose:
 * this theme has already had one contrast fix (above), so nothing here introduces a new grey. */
.amazon-picks-teaser {
    margin: 0 0 2.5em;
    padding: 1.25em 1.25em 0.25em;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fafafa;
}
.amazon-picks-teaser h2 {
    font-size: 1.4em;
    margin: 0 0 0.35em;
}
.amazon-picks-teaser__intro {
    margin-bottom: 1.25em;
}
.amazon-picks-teaser ul.products {
    margin-bottom: 0.5em;
}
.amazon-picks-teaser__more {
    text-align: center;
    margin-bottom: 0.75em;
}
.amazon-picks-teaser .amazon-affiliate-disclosure {
    font-size: 0.85em;
    text-align: center;
    margin-bottom: 0.75em;
}
/* Storefront stacks every product tile full-width below 768px. Four full-width tiles put
 * ~2,000px of Amazon between a phone visitor and the store's own products (measured on a
 * 414px full-page screenshot), so the teaser -- and only the teaser -- goes two-up there. */
@media (max-width: 767px) {
    .amazon-picks-teaser ul.products li.product {
        width: 47.8%;
        float: left;
        margin-right: 4.4%;
    }
    .amazon-picks-teaser ul.products li.product:nth-child(2n) {
        margin-right: 0;
    }
    .amazon-picks-teaser ul.products li.product:nth-child(2n+1) {
        clear: both;
    }
}

/* [griswoldlights_product_card] — pros/cons product block for best-of and comparison articles
   (2026-09-23). Stacks on phones; image beside the text from 600px. */
.gl-product-card {
	display: grid;
	gap: 1em;
	margin: 1.5em 0;
	padding: 1em;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
}
.gl-product-card__image img {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
	margin: 0 auto;
}
.gl-product-card__title {
	margin: 0 0 .4em;
	font-size: 1.15em;
}
.gl-product-card__verdict {
	margin: 0 0 .8em;
	font-weight: 600;
}
.gl-product-card__proscons {
	display: grid;
	gap: .5em 1.5em;
	margin-bottom: .8em;
}
.gl-product-card__proscons ul {
	margin: 0 0 0 1.2em;
}
.gl-proscons__label {
	margin: 0 0 .2em;
	font-weight: 700;
}
.gl-pros .gl-proscons__label { color: #1b6e2c; }
.gl-cons .gl-proscons__label { color: #a32020; }
.gl-product-card__cta {
	display: block;
	width: 100%;
	text-align: center;
}
@media (min-width: 600px) {
	.gl-product-card { grid-template-columns: 200px 1fr; }
	.gl-product-card__proscons { grid-template-columns: 1fr 1fr; }
	.gl-product-card__cta { display: inline-block; width: auto; }
}

/* Content tables scroll inside their own box on narrow screens instead of being clipped by
   Storefront's .hfeed overflow-x:hidden (2026-09-23). The wrapper is added in functions.php. */
.gl-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 1.5em;
}
.gl-table-scroll > table {
	margin-bottom: 0;
}
.gl-table-scroll:focus-visible {
	outline: 2px solid #b02028;
	outline-offset: 2px;
}

/* oEmbed iframes: never wider than the content column. */
.entry-content iframe,
.entry-content .wp-embedded-content {
	max-width: 100%;
}
/* A WordPress embed's iframe starts visually hidden (inline position:absolute + clip) and only gets
   its style cleared once the embedded site answers. Hagerty's never does, so on the Family Truckster
   post that hidden 100%-wide absolute iframe escaped the column and made the page scroll 23px
   sideways on phones. Shrink it only while it is in that hidden state. */
.entry-content iframe.wp-embedded-content[style*="clip"] {
	width: 1px !important;
	height: 1px !important;
}

/* --- Phase 0 (docs/affiliate/PLAN.md, 2026-09-24): homepage hub, picks catalog, disclosures --- */
.gl-home__hero {
    margin: 0 0 2.5em;
    padding: 1.75em 1.5em;
    border-left: 4px solid #2f7d32;
    background: #f6fbf4;
}

.gl-home__hero h1 {
    margin: 0 0 0.45em;
}

.gl-home__hero p:last-child {
    margin-bottom: 0;
}

.gl-home section {
    margin-bottom: 2.5em;
}

.gl-home__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1em;
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

.gl-home__card a {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    height: 100%;
    padding: 1em 1.1em;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    background: #fff;
    color: #333;
    text-decoration: none;
}

.gl-home__card a:hover,
.gl-home__card a:focus {
    border-color: #2f7d32;
}

.gl-home__card strong {
    color: #2f7d32;
}

.gl-home__card span {
    font-size: 0.9em;
}

/* Two product tiles per row on phones, as the old blog teaser did: one-up is ~2,000px of scroll. */
@media (max-width: 767px) {
    .gl-home__picks ul.products,
    .gl-picks-section ul.products {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75em;
    }

    .gl-home__picks ul.products li.product,
    .gl-picks-section ul.products li.product {
        width: auto;
        margin: 0;
    }
}

.gl-picks-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1.25em;
    margin: 0 0 2em;
    padding: 0;
    list-style: none;
}

.gl-picks-section {
    margin-bottom: 2.5em;
    scroll-margin-top: 1em;
}

.gl-inline-disclosure {
    padding: 0.6em 0.9em;
    border-left: 3px solid #d7d7d7;
    background: #fbfbfb;
    font-size: 0.875em;
}

.gl-footer-associates {
    font-size: 0.875em;
}

/* Phase 2 synced blocks: symptom navigator (top of troubleshooting posts) and safety callout. */
.gl-symptoms {
    margin: 0 0 2em;
    padding: 1em 1.25em;
    border: 1px solid #d7d7d7;
    background: #fbfbfb;
}

.gl-symptoms h2 {
    margin-top: 0;
    font-size: 1.2em;
}

.gl-symptoms ul {
    margin: 0 0 0 1.1em;
}

.gl-safety-callout {
    margin: 2em 0;
    padding: 1em 1.25em;
    border-left: 4px solid #b3261e;
    background: #fdf1f0;
}

.gl-safety-callout h2 {
    margin-top: 0;
    font-size: 1.2em;
}