/*
Theme Name: CSG Child
Template: blocksy
Version: 1.0.0
*/

/* CSG block patterns (Task 5) — section title + services grid, verbatim per spec */
.csg-section-title { color:#222325; font-size:24px; font-weight:700; letter-spacing:1.1px;
  padding-bottom:10px; border-bottom:5px solid var(--wp--preset--color--csg-navy); }
.csg-grid-six { flex-wrap: wrap; gap: 1.5em; }
.csg-grid-six .wp-block-column { flex-basis: calc(16.66% - 1.5em); min-width: 120px; }
@media (max-width: 950px) { .csg-grid-six .wp-block-column { flex-basis: calc(33% - 1.5em); } }
@media (max-width: 600px) { .csg-grid-six .wp-block-column { flex-basis: 100%; } }
.csg-service-icon img { max-height: 100px; max-width: 120px; margin: 0 auto; display: block; }
.csg-service-label a { color:#222325; font-size:16px; font-weight:600; text-decoration:none; }

/* CSG block patterns — supplementary support CSS for the remaining 7 patterns */
/* Core Columns block forces flex-wrap:nowrap + flex-basis:0/flex-grow:1 on
   .wp-block-column at desktop widths (>=782px) with higher specificity than a
   single class selector, which collapsed this 6-item grid onto one row of
   uneven widths instead of wrapping 3-per-row like the source's CSS grid.
   Raise specificity and use !important to win over that core rule. */
.wp-block-columns.csg-grid-three { flex-wrap: wrap !important; gap: 1.5em; }
.wp-block-columns.csg-grid-three > .wp-block-column { flex-basis: calc(33.33% - 1.5em) !important; flex-grow: 0 !important; }
@media (max-width: 950px) { .wp-block-columns.csg-grid-three > .wp-block-column { flex-basis: calc(50% - 1.5em) !important; } }
@media (max-width: 600px) { .wp-block-columns.csg-grid-three > .wp-block-column { flex-basis: 100% !important; } }
/* Industry cards: source shows top-left title + a ghost/outline "Learn More"
   (transparent, thin white border) that fills orange on hover. */
.wp-block-columns.csg-grid-three { gap: 1em; }
.csg-industry-card .wp-block-cover__inner-container {
  padding: 1.4em; justify-content: flex-start; align-items: flex-start;
}
.csg-industry-card h3 {
  text-align: left; margin: 0 0 .8em; font-size: 1.5rem; line-height: 1.15;
  text-shadow: 0 1px 5px rgba(0,0,0,.45);
}
.csg-industry-card .wp-block-buttons { justify-content: flex-start !important; }
.csg-industry-card .wp-block-button__link {
  background: transparent !important; border: 1px solid rgba(255,255,255,.85);
  color: #fff !important; border-radius: 2px; font-weight: 600; padding: .5em 1.5em;
  transition: background .15s ease, border-color .15s ease;
}
.csg-industry-card .wp-block-button__link:hover,
.csg-industry-card .wp-block-button__link:focus {
  background: #f89e30 !important; border-color: #f89e30; color: #fff !important;
}
/* Interior page title: source uses a plain dark, left-aligned title with a
   short rule beneath it (no full-width navy band). */
.csg-interior-header { padding: 1.5em 0 0.5em; text-align: left !important; }
.csg-interior-header-title {
  width: fit-content; max-width: 100%; color: #222325; font-weight: 700; font-size: 34px;
  line-height: 1.15; margin: 0 auto .4em 0 !important; padding-bottom: .35em;
  border-bottom: 3px solid #23272b; text-align: left;
}
.csg-cta-band { padding: 3em 0; text-align: center; }
.csg-cta-band-title { font-size: 26px; margin: 0 0 1em; }
.csg-faq-accordion .wp-block-details { margin-bottom: 0.75em; }
.csg-logo-wall img { max-height: 80px; width: auto; margin: 0 auto; object-fit: contain; }
.csg-contact-layout { gap: 3em; }
.csg-two-col-image img { width: 100%; height: auto; display: block; }

/* =========================================================================
   Phase 2 — design refinement toward source (centralstatesgroup.com)
   ========================================================================= */

/* --- Hero: full-bleed banner slider (source parity) ---
   Slides (slideshow-2.jpg / slideshow_1_1.jpg, 1920x405) are finished banners
   with the tagline + darkening baked in, so show them at natural ratio with no
   overlay or caption. Source shows dots only, no prev/next arrows. */
.csg-hero { position: relative; }
.csg-hero .metaslider { width: 100%; margin: 0; }
.csg-hero .metaslider .slides img { width: 100%; height: auto; display: block; }
.csg-hero .flex-direction-nav { display: none !important; }
.csg-hero .flex-control-nav { z-index: 4; bottom: 14px; margin: 0; }
.csg-hero .flex-control-paging li a { background: rgba(255,255,255,.55); box-shadow: none; width: 11px; height: 11px; }
.csg-hero .flex-control-paging li a.flex-active { background: #fff; }

/* --- Vendor ad row (Goulds / Apollo / Viking) on white band, source parity --- */
.csg-vendor-ads { padding: 2.5em 0 3em; }
.csg-vendor-grid { gap: 1.5em; align-items: center; }
.csg-vendor-grid > .wp-block-column { flex-basis: calc(33.33% - 1em); }
.csg-vendor-ad { margin: 0; }
.csg-vendor-ad a, .csg-vendor-ad img { display: block; width: 100%; height: auto; }
@media (max-width: 782px){ .csg-vendor-grid > .wp-block-column { flex-basis: 100%; } }

/* --- Header: Top Bar (phone + Contact Us) restyled as source's right-side
   cluster — phone stays plain navy text, "Contact Us" becomes an orange pill
   button. Row/placement moves (single compact row: logo | centered Main Nav |
   this cluster) are done via the header_placements theme_mod, not CSS; see
   migration/design/PHASE2-NOTES.md. */
#header-menu-1 .menu { display: flex; align-items: center; gap: 20px; }
#header-menu-1 #menu-item-139 > a { font-weight: 600; }
#header-menu-1 #menu-item-140 > a {
  background: #f89e30 !important;
  color: #ffffff !important;
  padding: 10px 26px;
  border-radius: 999px;
  font-weight: 700;
  transition: background-color .15s ease;
}
#header-menu-1 #menu-item-140 > a:hover,
#header-menu-1 #menu-item-140 > a:focus {
  background: #e08b1c !important;
  color: #ffffff !important;
}
/* Logo vertical alignment: Blocksy constrains the logo <a> to a 50px box while
   our logo image is 100px tall, so the image overflowed downward and sat low
   ("at the bottom of the header"). Let the container wrap the full logo height
   so the header row's align-items:center vertically centers it with the menu. */
.site-logo-container { height: auto !important; display: inline-flex; align-items: center; line-height: 0; }
.site-logo-container img.default-logo,
.site-logo-container img.retina-logo { display: block; }

/* --- Footer: uppercase column headers (source parity) --- */
.ct-footer .widget-title { text-transform: uppercase; letter-spacing: .04em; }

/* --- "Let Us Help" callout: source uses a light-blue gradient w/ navy heading --- */
.csg-callout {
  background: linear-gradient(135deg, #dce9f6 0%, #b9d3ee 100%) !important;
  padding: 1.75em 2em; border-radius: 2px;
}
.csg-callout h2 { color: var(--wp--preset--color--csg-navy); text-transform: uppercase; letter-spacing: .02em; }
.csg-callout p { color: #1b2a3d; }
/* Per-page inline-SVG icon (source's .action-bar--icon FontAwesome glyph,
   reimplemented without a FontAwesome dependency). Only present on the 3
   product pages whose source callout actually used a <i class="fa fa-*">
   icon (pipefittings/truck, pumpsprocessequipment/wrench,
   processinstrumentation/flask); every other product callout stays iconless. */
.csg-callout-icon { display: block; margin-bottom: .4em; color: var(--wp--preset--color--csg-navy); line-height: 0; }
.csg-callout-icon svg { display: block; }

/* --- Product page sidebar (Phase 2 refinement): source's 2-col product
   layout has a left nav of category rows beside the intro/images/callout
   content, instead of a full-width "Categories We Carry" block at the
   bottom. Source rows show only the category name; ours also keeps each
   category's brand/sub-item list (migrated content we don't want to drop),
   shown as a smaller muted line under the bold category name within the
   same row/divider — closest match that preserves all existing copy. */
.csg-product-layout { align-items: flex-start; gap: 3em; }
.csg-product-sidebar { border-top: 3px solid #23272b; }
.csg-sidebar-download { margin-top: 1.5em; }
.csg-product-sidebar .wp-block-buttons,
.csg-product-sidebar .wp-block-button { width: 100%; }
.csg-product-sidebar .wp-block-button__link {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  font-size: 14px; padding: 0.8em 1em;
}
@media (max-width: 782px) { .csg-product-sidebar { margin-bottom: 2em; } }

/* =========================================================================
   Phase 2 refinement v2 — product sidebar collapsible categories
   Source's category list (<li class="has-subnav"><a>Name</a><ul>...</ul></li>)
   is collapsed by default and expands its sub-items on click. Phase-2 had
   reshaped each category as an always-open <p class="csg-sidebar-cat"> row
   (name + a muted sub-item line) so no content was lost, but it was never
   collapsible. Reimplemented on the same markup shape as core's Details
   block (<details class="wp-block-details csg-sidebar-cat"><summary>Name
   </summary>...items paragraph...</details>) — natively collapsible with
   no JS, and a real, editable Gutenberg block (matches the csg-faq-accordion
   pattern already used on /faq/). Replaces the prior always-visible
   .csg-sidebar-cat paragraph rules above. --- */
.csg-sidebar-cat.wp-block-details { margin: 0; border-bottom: 1px solid #e0e0e0; }
.csg-sidebar-cat > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  margin: 0; padding: .85em 0; list-style: none; cursor: pointer;
  color: #222325; font-size: 15px; font-weight: 700; line-height: 1.3;
}
.csg-sidebar-cat > summary::-webkit-details-marker { display: none; }
.csg-sidebar-cat > summary:hover { color: var(--wp--preset--color--csg-navy); }
/* caret/chevron: two rotated borders forming a corner (no icon font/image) */
.csg-sidebar-cat > summary::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 2px solid #23272b; border-bottom: 2px solid #23272b;
  transform: rotate(45deg); transition: transform .18s ease;
}
.csg-sidebar-cat[open] > summary::after { transform: rotate(225deg); }
.csg-sidebar-cat .csg-sidebar-cat-items {
  margin: -.2em 0 .9em; padding-left: 0;
  color: #6b6b6b; font-size: 12.5px; line-height: 1.6; font-weight: 400;
}

/* --- Product sidebar links (Phase 2 refinement v3): categories are now
   editable core Details+List blocks (see migration/gen-product-sidebar.py)
   whose sub-items are either plain text or a real outbound link to the
   vendor/manufacturer's site -- source parity (source sidebar sub-items
   are frequently <a href> links out to the brand's own catalog). The list
   sits indented with small bullets inside the collapsed Details, sized/
   colored like the old .csg-sidebar-cat-items paragraph it replaces;
   linked items pick up source's link blue and underline on hover. */
.csg-sidebar-cat .csg-sidebar-items {
  margin: -.2em 0 .9em; padding-left: 1.1em;
  color: #6b6b6b; font-size: 12.5px; line-height: 1.7; font-weight: 400;
}
.csg-sidebar-items li { margin: 0 0 .2em; }
.csg-sidebar-items a { color: #1895f8; text-decoration: none; }
.csg-sidebar-items a:hover { text-decoration: underline; }

/* --- Product content grid (Phase 2 refinement v2): source interleaves the
   intro text and product images as 2-per-row grid cells (text+img1 in row
   1, img2+img3 in row 2, etc. — see source's grid-container.grid-two-col),
   not a wide text column beside a narrow vertical stack of small images.
   Reimplemented as successive 50/50 wp:columns rows sharing one class, so
   every row (text+image, image+image, or on Sanitary image+image alone)
   gets identical gap/sizing and each image reads at a real, gridded size. */
.csg-product-main .csg-two-col-content { gap: 2em; margin-bottom: 1.75em; }
.csg-product-main .csg-two-col-content > .wp-block-column { flex-basis: 50%; }

/* =========================================================================
   Phase 2b — user refinement pass
   ========================================================================= */

/* 1. Logo: source is 300x100 desktop / 150x50 mobile; keep it on the header line */
.site-logo-container img.default-logo,
.site-logo-container img.retina-logo { max-width: 300px !important; width: auto; height: auto; }
/* keep logo, nav and the contact cluster on one row across desktop (>=1000px).
   Diagnosed live via getComputedStyle at 1920/1440/1366/1280/1024/1000: the
   header's middle row (`[data-row="middle"] > .ct-container`) is CSS GRID,
   not flexbox -- Blocksy core sets `#header [data-column-set="3"] > div {
   display:grid; grid-template-columns:1fr var(--middle-column-width,auto)
   1fr}`, so the previous `flex-wrap:nowrap` rule here was a no-op (flex-wrap
   doesn't apply to a grid container) and never actually held anything.
   The real reason this row can stay single-line with a 300px logo is
   Blocksy's own `#header [data-column="start"],[data-column="end"]
   {min-width:0}` on the outer (logo / phone+CTA) grid columns, which lets
   them shrink instead of forcing the row to wrap, combined with its
   adaptive-nav JS collapsing overflowing Main Nav items into a "More"
   toggle. Verified this already holds with zero wrapping across the full
   1000-1920px range with the current 300px logo -- restated (not hardcoded
   grid-template-columns, so the customizer's middle-column-width still
   works) here only as a defensive guard in case a future Blocksy update
   ever drops that base rule. */
#header [data-column="start"],
#header [data-column="end"] { min-width: 0; }
@media (max-width: 782px) {
  .site-logo-container img.default-logo,
  .site-logo-container img.retina-logo { max-width: 150px !important; }
  .site-branding, .site-logo-container { margin-left: auto !important; margin-right: auto !important; text-align: center; }
}

/* 2. Hero: fixed ~403px band (source parity). Photo slides are 1920x405 so they
   stay crisp; the low-res PowerDyne promo (566x170) is cover-cropped to the same
   height instead of upscaling the whole band to 577px. Shorter band on mobile. */
.csg-hero .metaslider, .csg-hero .flexslider,
.csg-hero .flexslider .slides, .csg-hero .flexslider .slides > li { height: 403px !important; }
.csg-hero .metaslider .slides img { height: 403px !important; object-fit: cover; object-position: center; }
/* On mobile, show whole slides at natural ratio (no crop) so the baked-in banner
   text isn't cut off. MetaSlider's fullWidth JS sizes the img against a wide
   carousel track, so pin the image to the viewport width (100vw) and let height
   follow — full image, no side crop, no zoom. */
@media (max-width: 782px) {
  .csg-hero .metaslider, .csg-hero .flexslider,
  .csg-hero .flexslider .slides, .csg-hero .flexslider .slides > li { height: auto !important; }
  .csg-hero .metaslider .slides img {
    width: 100vw !important; max-width: 100vw !important; height: auto !important;
  }
}

/* 3. Drop the 60px top padding on the full content container */
.ct-container-full { padding-top: 0 !important; }

/* 4. Service icons centered above label; orange underline on hover (source) */
.csg-service-icon { text-align: center; }
.csg-service-label a { text-decoration: none; transition: color .12s ease; }
.csg-service-label a:hover {
  color: var(--wp--preset--color--csg-orange);
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--csg-orange);
  text-underline-offset: 4px;
}

/* 5. Industry cards: center title + Learn More button */
.csg-industry-card .wp-block-cover__inner-container { align-items: center; }
.csg-industry-card h3 { text-align: center; }
.csg-industry-card .wp-block-buttons { justify-content: center !important; }

/* --- Locations store-locator (bh-sl) layout ---
   The plugin's jquery.storelocator.css sets `.bh-sl-container { float:left }`,
   which defeats the constrained layout's auto-centering: the widget got the
   right max-width but pinned flush-left while the page title/content centered.
   Un-float it so margin-inline:auto centers it with the rest of the content;
   clearfix its floated children. On mobile, stack list above map full-width. */
.entry-content .bh-sl-container { float: none; margin-inline: auto; }
.entry-content .bh-sl-container::after { content: ""; display: block; clear: both; }
@media (max-width: 782px) {
  .bh-sl-container .bh-sl-map-container,
  .bh-sl-container .bh-sl-loc-list,
  .bh-sl-container #bh-sl-map,
  .bh-sl-container .bh-sl-form-container { float: none !important; width: 100% !important; }
  .bh-sl-container .bh-sl-loc-list { max-height: none; height: auto !important; margin-bottom: 1em; }
  .bh-sl-container #bh-sl-map { height: 340px !important; min-height: 340px; }
}

/* Search form: the plugin renders a 24px floated input misaligned with a 40px
   button + an empty clear-search span. Rebuild it as a clean flex row (label
   above, input + Submit same height, aligned); stacks full-width on mobile. */
.bh-sl-container .bh-sl-form-container { float: none !important; width: 100%; margin: 0 0 1.5em; }
.bh-sl-container #bh-sl-user-location { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.bh-sl-container .form-input { float: none !important; margin: 0 !important; flex: 1 1 340px; min-width: 0; }
.bh-sl-container .form-input label { display: block; font-weight: 600; margin: 0 0 6px; color: #222325; font-size: 14px; }
.bh-sl-container .form-input input {
  margin: 0 !important; width: 100%; height: 44px !important; box-sizing: border-box;
  padding: 8px 14px !important; border: 1px solid #c8ccd0 !important; border-radius: 3px;
  font-size: 15px; color: #222325;
}
.bh-sl-container .form-input input:focus { outline: none; border-color: var(--wp--preset--color--csg-navy) !important; }
.bh-sl-container .clear-search { display: none; }
.bh-sl-container button#bh-sl-submit {
  float: none !important; margin: 0 !important; flex: 0 0 auto;
  height: 44px; padding: 0 30px; border-radius: 3px; cursor: pointer;
  background: var(--wp--preset--color--csg-navy); border: 1px solid var(--wp--preset--color--csg-navy);
  color: #fff; font-weight: 700; font-size: 14px; line-height: 1;
}
.bh-sl-container button#bh-sl-submit:hover,
.bh-sl-container button#bh-sl-submit:focus { background: #041835; border-color: #041835; }
@media (max-width: 782px) {
  .bh-sl-container #bh-sl-user-location { flex-direction: column; align-items: stretch; }
  .bh-sl-container .form-input { flex: 1 1 auto; }
  .bh-sl-container button#bh-sl-submit { width: 100%; }
}