/*
Theme Name: Blockbase Child
Theme URI: https://example.com
Description: A lightweight child theme for the Blockbase block theme.
Author: Tim Brocklehurst
Author URI: https://example.com
Template: blockbase
Version: 1.0.1
Text Domain: blockbase-child
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
This is a child theme. Blockbase (the parent) must be installed.
*/

/* =========================================================
   Variables
   ========================================================= */
:root{
  --primary: #2F6F6D;
  --secondary: #A9D6CF;
  --backwash: #E6F4F1;
  --text: #1F2933;
  --accent: #3FA9A5;

  --content-width: 740px;
  --content-wide: 1100px;

  /* Layout */
  --gutter: 24px;

  /* UI */
  --radius: 16px;
  --radius-sm: 12px;
  --border: 1px solid rgba(31, 41, 51, 0.12);
  --shadow: 0 10px 30px rgba(31, 41, 51, 0.08);
  --shadow-sm: 0 6px 16px rgba(31, 41, 51, 0.08);

  /* Type */
  --h2: 28px;
  --h3: 20px;

  /* Surfaces */
  --surface: #fff;
  --surface-soft: color-mix(in srgb, var(--backwash) 75%, #fff 25%);

  /* Table sizing */
  --model-col-min: 320px;
  --attr-col-min: 160px;
  --mobile-model-col-min: 190px;
  --mobile-model-col-max: 210px;
}

/* =========================================================
   Header / Footer polish
   ========================================================= */
.site-header,
footer{
  background: var(--backwash);
  border-bottom: 1px solid var(--secondary);
}

footer{
  margin-top: 5vw;
  border-top: 1px solid var(--secondary);
  padding: 5vw;
}

.wp-block-site-logo img{
  max-width: 100%;
  height: auto;
}

.footer-left{
  max-width: 40%;
}

/* =========================================================
   Comparison template layout
   - centered rail (max 1100px)
   - intro aligns to same left edge but is narrower (740px)
   ========================================================= */
body.single-comparison .can-shell{
  max-width: var(--content-wide);
  margin-left: auto;
  margin-right: auto;

  padding-left: var(--wp--style--root--padding-left, var(--gutter));
  padding-right: var(--wp--style--root--padding-right, var(--gutter));
}

body.single-comparison .can-intro{
  max-width: var(--content-width);
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.single-comparison .can-wide{
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Stop block theme inner max-width rules from clamping children */
body.single-comparison .can-intro > *,
body.single-comparison .can-wide > *{
  max-width: 100% !important;
}

/* =========================================================
   Core UI helpers (used by shortcode output)
   ========================================================= */
.can-section{
  margin: 28px 0;
  color: var(--text);
}

.can-muted{
  color: rgba(31, 41, 51, 0.72);
  font-size: 0.95em;
}

.can-section h2{
  font-size: var(--h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--text);
}

.can-section h3{
  font-size: var(--h3);
  margin: 0 0 10px;
  color: var(--text);
}

.can-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--secondary) 35%, #fff 65%);
  color: color-mix(in srgb, var(--primary) 75%, #000 25%);
  border: 1px solid color-mix(in srgb, var(--secondary) 55%, #fff 45%);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
}

.can-card{
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

.can-card strong{
   /* color: var(--primary); */
}

.can-card:hover{
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--primary) 22%, rgba(31,41,51,0.12) 78%);
}

.can-card img{
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(31,41,51,0.10);
}

.can-card h3{
    font-weight:bold;
}

/* Grid used by Top Picks */
.can-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.can-grid .span-4{ grid-column: span 4; }
.can-grid .span-6{ grid-column: span 6; }
.can-grid .span-12{ grid-column: span 12; }

@media (max-width: 980px){
  .can-grid .span-4,
  .can-grid .span-6{ grid-column: span 12; }
}

/* Generic pill link */
.can-icon-link{
  border: 1px solid color-mix(in srgb, var(--primary) 20%, #fff 80%);
  background: color-mix(in srgb, var(--backwash) 55%, #fff 45%);
  color: var(--primary);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.can-icon-link:hover{
  background: color-mix(in srgb, var(--secondary) 40%, #fff 60%);
}

/* Keep general links sane (but don’t clobber buttons) */
a:where(:not(.wp-element-button)){
  color: var(--accent);
}

/* =========================================================
   Comparison table
   - IMPORTANT: only .can-table-scroll scrolls
   - sticky first column inside the scroll container
   ========================================================= */

/* Do NOT make every table scroll — only non-comparison Gutenberg tables if needed */
.wp-block-table:not(.comparison){
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
}

/* Outer scroller becomes the “card” */
.can-table-scroll{
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;

  width: 100%;
  max-width: 100%;
  position: relative;

  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: #fff;

  /* remove any theme masking/fade tricks that can make rows look “cut off” */
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-image: none !important;
}

.can-table-scroll::before,
.can-table-scroll::after{
  content: none !important;
  display: none !important;
}

/* Figure is just a wrapper here (no overflow, no “card” styling) */
.can-table-scroll figure.wp-block-table.comparison{
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible !important;
  max-width: none !important;
}

/* Table must be allowed to exceed viewport width to enable horizontal scroll */
.can-table-scroll figure.wp-block-table.comparison table{
  width: max-content;
  min-width: 100%;
  max-width: none;

  border-collapse: separate;
  border-spacing: 0;

  background: #fff; /* base paint */
}

/* Cells */
.can-table-scroll figure.wp-block-table.comparison td{
  padding: 14px;
  border-bottom: 1px solid rgba(31,41,51,0.10);
  border-right: 1px solid rgba(31,41,51,0.08);
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  position: relative;

  /* IMPORTANT: avoid “row ends early” illusion by always painting backgrounds */
  background: #fff;
}

.can-table-scroll figure.wp-block-table.comparison tr td:last-child{ border-right: 0; }
.can-table-scroll figure.wp-block-table.comparison tr:last-child td{ border-bottom: 0; }

/* Header row */
.can-table-scroll figure.wp-block-table.comparison tr.transposed-header td{
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Zebra */
.can-table-scroll figure.wp-block-table.comparison tbody tr:not(.transposed-header):nth-child(even) td{
  background: color-mix(in srgb, var(--backwash) 45%, #fff 55%);
}

/* Give columns minimum widths so the table *actually* becomes scrollable */
.can-table-scroll figure.wp-block-table.comparison td.can-model{
  min-width: var(--model-col-min);
}

.can-table-scroll figure.wp-block-table.comparison td:not(:first-child){
  min-width: var(--attr-col-min);
  text-align: center;
}

/* Sticky first column */
.can-table-scroll figure.wp-block-table.comparison tr > td:first-child{
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 20;
  background: #fff;
  background-clip: padding-box;
}

/* Sticky header cell sits above */
.can-table-scroll figure.wp-block-table.comparison tr.transposed-header > td:first-child{
  z-index: 30;
  background: var(--primary);
  color: #fff;
}

/* Subtle edge shadow to show stickiness */
.can-table-scroll figure.wp-block-table.comparison tr > td:first-child::after{
  content: "";
  position: absolute;
  top: 0; right: -10px; bottom: 0;
  width: 10px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0.14), transparent);
}

/* Sup for m² etc */
.wp-block-table sup{
  font-size: 0.6em;
}

/* =========================================================
   Model cell (name + actions)
   ========================================================= */
.can-model-name{
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 10px;
}

/* The “Read review / Check price” buttons container */
.can-model-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1;
}

/* Buttons in the model cell */
.can-action{
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid var(--secondary);
  background: var(--backwash);
  text-decoration: none;
  font-weight: 600;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* height control (prevents “giant pills”) */
  padding: 16px 12px;
  line-height: 1;
  white-space: nowrap;
}

.can-action.buy{
  border-color: var(--primary);
}

a.can-action:hover{
  background: var(--accent);
  color: var(--backwash);
}

/* =========================================================
   Price bars
   ========================================================= */
.can-price-bars{
  display: inline-flex;
  gap: 7px;
  vertical-align: middle;
}

.can-price-bars .can-bar{
  width: 12px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid var(--primary);
  background: transparent;
}

.can-price-1 .can-price-bars .can-bar:nth-child(1){ background: var(--primary); }
.can-price-2 .can-price-bars .can-bar:nth-child(-n+2){ background: var(--primary); }
.can-price-3 .can-price-bars .can-bar:nth-child(-n+3){ background: var(--primary); }

/* A11y helper */
.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.mobile .can-table-scroll figure.wp-block-table.comparison td.can-model {
    min-width: var(--mobile-model-col-min);
    max-width: var(--mobile-model-col-max);
}
.mobile .can-table-scroll figure.wp-block-table.comparison td.can-model .can-model-name{
    font-size: 0.8em;
}

body.single-comparison.mobile .can-shell{
    padding-left: 0;
    padding-right:0;
}

@media (max-width: 768px){
    body.single-comparison .can-shell{
        padding-left: 0;
        padding-right:0;
    }

    .can-table-scroll figure.wp-block-table.comparison td.can-model {
        min-width: var(--mobile-model-col-min);
        max-width: var(--mobile-model-col-max);
    }
    .can-table-scroll figure.wp-block-table.comparison td.can-model .can-model-name{
        font-size: 0.8em;
    }
    .can-model-actions{
        gap:5px;
    }
    .can-action{
        padding: 8px 3px;
    }
}

/* =========================================================
   Footer: mobile-only alignment fixes
   ========================================================= */

/* Target real mobile devices AND small screens */
@media (max-width: 768px) {

  footer .wp-block-group.alignfull{
    align-items: flex-start !important; /* stop vertical centering */
  }

  footer .footer-right{
    align-self: flex-start;              /* pin to top */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: right;
  }

  footer .footer-right nav{
    margin-top: 0;                       /* remove any auto-centering offset */
  }

  footer .footer-right
  .wp-block-navigation__container{
    align-items: flex-end;               /* right-align items */
    justify-content: flex-start;
    text-align: right;
    gap: 10px;
    flex-direction: column;
  }

  footer .footer-right
  .wp-block-navigation-item__content{
    justify-content: flex-end;
    text-align: right;
  }
}

/*--- PRODUCT REVIEW PAGES --- */
/* Product featured image: full-width only on mobile */
@media (max-width: 768px){
  body.single-product .can-feature-mobile-full{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0 !important;
  }
  body.single-product .can-feature-mobile-full{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0 !important;
  }
}

/* Product review: hero card layout */
.can-product-hero-card{
  width: 100%;
}

/* If your hero card contains image + meta + verdict, make it a clean two-column layout on desktop */
@media (min-width: 900px){
  .can-product-hero-card{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    align-items: start;
  }
}

/* Image: keep it neat and centered inside its cell */
.can-product-hero-card .can-product-media{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.can-product-hero-card .can-product-media img{
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Text area should actually use the remaining width */
.can-product-hero-card .can-product-hero-body{
  width: 100%;
  min-width: 0;
}

/* Quick verdict heading + paragraph spacing */
.can-product-hero-card .can-quick-verdict-title{
  margin: 10px 0 6px;
}

.can-product-hero-card .can-quick-verdict-text{
  margin: 0;
}


/* =========================
   PRODUCT HERO CARD LAYOUT
   ========================= */

/* The hero row: image + text */
.can-pr-hero{
  display: grid;
  grid-template-columns: 160px 1fr;  /* desktop-ish default */
  gap: 18px;
  align-items: start;
}

/* Make sure the "text" column can actually expand */
.can-pr-hero > div{
  min-width: 0;
}

/* Thumbnail behaves like a block and doesn't leave odd inline gaps */
.can-pr-thumb{
  display: block;
  width: 100%;
  max-width: 160px;        /* match the column */
  height: auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

/* If there's no image, don't leave an empty first column */
.can-pr-hero:not(:has(img.can-pr-thumb)){
  grid-template-columns: 1fr;
}

/* Mobile: stack image above text */
@media (max-width: 820px){
  .can-pr-hero{
    grid-template-columns: 1fr;
  }

  .can-pr-thumb{
    max-width: 100%;
  }
}

/* Your "mobile full width" request:
   on small screens make the featured image span full width of the card */
@media (max-width: 820px){
  .can-feature-mobile-full{
    width: 100%;
    max-width: 100%;
  }
}


.can-pr-verdict-title{
  font-weight: 800;
  margin: 0 0 8px;
}

.can-pr-verdict-text p:first-child{ margin-top: 0; }
.can-pr-verdict-text p:last-child{ margin-bottom: 0; }


/* Force HERO to be a true 2-column grid on desktop */
.can-pr-card .can-pr-hero{
  display: grid !important;
  grid-template-columns: 200px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

/* Explicitly place the two children into the grid */
.can-pr-card .can-pr-hero > img.can-pr-thumb{
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 200px !important;
  height: auto !important;
}

.can-pr-card .can-pr-hero > div{
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  clear: none !important;
}

/* Mobile: stack */
@media (max-width: 820px){
  .can-pr-card .can-pr-hero{
    grid-template-columns: 1fr !important;
  }
  .can-pr-card .can-pr-hero > img.can-pr-thumb{
    grid-column: 1 !important;
    max-width: 100% !important;
  }
  .can-pr-card .can-pr-hero > div{
    grid-column: 1 !important;
  }
}

/*fix product image thumb buttons */
.can-gallery-thumbs{ gap: 6px; } /* tighter */

.can-gallery-thumbbtn{
  display: block;
  padding: 0 !important;
  line-height: 0 !important;  /* prevents vertical “text line” spacing */
  height: 64px;               /* slightly tighter */
}

.can-gallery-thumbimg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Product page: make the 2-col spec table feel like a neat panel */
.can-pr-specs table{
  color: var(--text);
  width: 100%;
  min-width: 0;
  border-spacing: 0;
  border: 1px solid var(--primary);
  border-radius:10px;
  overflow:hidden;
}
.can-pr-specs td{
    padding: 5px;
    vertical-align:middle;
    border: 1px solid var(--primary);
}
.can-pr-specs tr td:nth-child(2){
    text-align:center;
    color: var(--primary);
    background: var(--backwash);
}

.can-pr-specs td.can-model{
  background: var(--primary);
  color: var(--backwash);
  font-weight: bold;
  width: 60%;
  max-width: 65%;
  min-width: 50%;
  text-align:left;
}

.can-breadcrumbs{
  font-size: 0.92rem;
  color: rgba(31,41,51,0.70);
  margin: 10px 0 16px;
}
.can-breadcrumbs ol{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.can-breadcrumbs li{
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.can-breadcrumbs li + li:before{
  content: "/";
  opacity: 0.55;
}
.can-breadcrumbs a{
  color: var(--accent);
  text-decoration: none;
}
.can-breadcrumbs a:hover{
  text-decoration: underline;
}

    /* Clean Air Nest - Product review layout */
    .can-pr-wrap{ color: var(--text, #1F2933); }
    .can-pr-section{ margin: 28px 0; }
    .can-pr-grid{ display:grid; grid-template-columns: 1.25fr 0.75fr; gap: 18px; align-items:start; }
    @media (max-width: 900px){ .can-pr-grid{ grid-template-columns: 1fr; } }

    .can-pr-card{
      background: var(--surface, #fff);
      border: var(--border, 1px solid rgba(31,41,51,0.12));
      border-radius: var(--radius, 16px);
      box-shadow: var(--shadow-sm, 0 6px 16px rgba(31,41,51,0.08));
      padding: 16px;
    }

    .can-pr-h2{ font-size: var(--h2, 28px); line-height:1.2; margin: 0 0 14px; }
    .can-pr-h3{ font-size: var(--h3, 20px); margin: 0 0 10px; }

    .can-pr-muted{ color: rgba(31,41,51,0.72); font-size: 0.95em; }

    .can-pr-cta{
      display:flex; gap: 10px; flex-wrap: wrap; align-items:center;
    }
    .can-pr-btn{
      display:inline-flex; align-items:center; justify-content:center;
      border-radius: 999px;
      padding: 12px 14px;
      border: 1px solid color-mix(in srgb, var(--primary, #2F6F6D) 20%, #fff 80%);
      background: color-mix(in srgb, var(--backwash, #E6F4F1) 55%, #fff 45%);
      color: var(--primary, #2F6F6D);
      font-weight: 700;
      text-decoration:none;
      line-height: 1;
      white-space: nowrap;
    }
    .can-pr-btn:hover{
        background: color-mix(in srgb, var(--secondary, #A9D6CF) 40%, #fff 60%);
    }
    .can-pr-btn-primary{
      border-color: var(--primary);
      background: var(--primary);
      color: #fff;
    }
    .can-pr-btn-primary:hover{
        text-decoration: none;
        background: var(--backwash);
        color: var(--primary);
    }

    .can-pr-hero{
      display:grid; grid-template-columns: 88px 1fr; gap: 14px; align-items:center;
    }
    @media (max-width: 900px){ .can-pr-hero{ grid-template-columns: 1fr; } }

    .can-pr-thumb{ width: 88px; height: 88px; border-radius: 14px; object-fit: cover; border: 1px solid rgba(31,41,51,0.10); background: var(--surface-soft, #f6faf9); }
    @media (max-width: 900px){ .can-pr-thumb{ width: 100%; height: auto; aspect-ratio: 16/10; } }

    .can-gallery{
      display:grid;
      grid-template-columns: 92px 1fr;
      gap: 14px;
      align-items:start;
    }
    @media (max-width: 900px){ .can-gallery{ grid-template-columns: 1fr; } }

    .can-gallery-thumbs{
      display:flex;
      flex-direction: column;
      gap: 10px;
    }
    @media (max-width: 900px){
      .can-gallery-thumbs{ flex-direction: row; overflow-x:auto; padding-bottom: 4px; }
    }

    .can-gallery-thumbbtn{
      border: 1px solid rgba(31,41,51,0.12);
      border-radius: 12px;
      padding: 0;
      background: #fff;
      cursor: pointer;
      width: 92px;
      height: 72px;
      overflow: hidden;
    }
    .can-gallery-thumbbtn[aria-current="true"]{ outline: 2px solid var(--accent, #3FA9A5); outline-offset: 1px; }
    .can-gallery-thumbimg{ width:100%; height:100%; object-fit: cover; display:block; }

    .can-gallery-mainimg{
      width:100%;
      height:auto;
      border-radius: 16px;
      border: 1px solid rgba(31,41,51,0.12);
      background: #fff;
    }

    .can-kv{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    @media (max-width: 900px){ .can-kv{ grid-template-columns: 1fr; } }
    .can-kv div{ padding: 10px 12px; border: 1px solid rgba(31,41,51,0.10); border-radius: 12px; background: color-mix(in srgb, var(--backwash, #E6F4F1) 35%, #fff 65%); }
    .can-kv strong{ display:block; margin-bottom: 4px; }

    .can-pc{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @media (max-width: 900px){ .can-pc{ grid-template-columns: 1fr; } }

    .can-faq details{ border: 1px solid rgba(31,41,51,0.12); border-radius: 12px; padding: 10px 12px; background:#fff; margin: 10px 0; }
    .can-faq summary{ font-weight: 800; cursor: pointer; }