/*
Theme Name: Hello Elementor Child
Description: Child theme for Hello Elementor
Author: Tom Bluemink
Template: hello-elementor
Version: 20260822.1750
Text Domain: hello-elementor-child
*/

/* =========================================================
   TANKS & VESSELS — TYPOGRAPHY SYSTEM
   ========================================================= */

:root {
    --tv-font-main: "Overpass", sans-serif;

    --tv-color-heading: #003C73;
    --tv-color-body: #131A28;
    --tv-color-muted: #5F6B7A;
    --tv-color-link: #008FD6;
    --tv-color-link-hover: #003C73;

    --tv-font-size-body: 16px;
    --tv-line-height-body: 1.6;
    --tv-line-height-copy: 1.6;
}

/* =========================================================
   GLOBAL BASE
   ========================================================= */

body {
    font-family: var(--tv-font-main);
    -webkit-font-smoothing: antialiased;
}

.site-main,
.elementor,
.elementor-location-single,
.elementor-location-archive,
.elementor-widget-theme-post-content,
.woocommerce,
.woocommerce-page {
    color: var(--tv-color-body);
    font-size: var(--tv-font-size-body);
    line-height: var(--tv-line-height-body);
    font-weight: 300;
}

button,
input,
select,
textarea,
.elementor-button,
.ct-button {
    font-family: inherit;
}

/* =========================================================
   BODY TEXT
   ========================================================= */

p,
li,
blockquote,
figcaption {
    font-size: var(--tv-font-size-body);
    line-height: var(--tv-line-height-copy);
    color: inherit;
}

small,
.text-small,
.entry-meta,
.product_meta,
.woocommerce-breadcrumb {
    font-size: 14px;
    color: var(--tv-color-muted);
}

/* =========================================================
   LINKS
   ========================================================= */

a {
    color: var(--tv-color-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--tv-color-link-hover);
}

/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.5em;
    font-family: var(--tv-font-main);
    letter-spacing: -0.02em;
    color: var(--tv-color-heading);
}

h1 {
    font-size: 40px;
    line-height: 1.05;
    font-weight: 600;
}

h2 {
    font-size: 38px;
    line-height: 1.12;
    font-weight: 700;
}

h3 {
    font-size: 26px;
    font-weight: 600;
}

h4 {
    font-size: 20px;
    font-weight: 600;
}

h5 {
    font-size: 17px;
    font-weight: 600;
    color: var(--tv-color-body);
}

h6 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tv-color-muted);
}

/* =========================================================
   MENU / NAVIGATION
   NOTE: remove or replace this selector if unused
   ========================================================= */

.ct-header .menu-item > a {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tv-color-heading);
}

/* =========================================================
   BUTTONS
   ========================================================= */

button,
.elementor-button,
.ct-button {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

/* =========================================================
   WOOCOMMERCE
   ========================================================= */

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tv-color-heading);
}

.single-product .product_title {
    font-size: 36px;
    font-weight: 700;
}

.woocommerce div.product .product_meta,
.woocommerce div.product p {
    font-size: 15px;
}

/* =========================================================
   BLOG / NEWS
   ========================================================= */

.entry-title {
    font-size: 22px;
    font-weight: 600;
}

.entry-excerpt {
    font-size: 16px;
    color: var(--tv-color-body);
}

/* =========================================================
   ELEMENTOR TEXT CONTENT
   ========================================================= */

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor blockquote,
.elementor-widget-text-editor figcaption {
    color: inherit;
}

/* =========================================================
   DARK / IMAGE SECTIONS
   USE CLASS: section-dark
   ========================================================= */

.section-dark,
.dark-section,
.dark-image-section {
    color: #e8e8e8;
}

.section-dark p,
.section-dark li,
.section-dark blockquote,
.section-dark figcaption,
.section-dark .elementor-widget-text-editor,
.section-dark .elementor-widget-text-editor p,
.section-dark .elementor-widget-text-editor li,
.section-dark .elementor-button,
.section-dark .elementor-button-text {
    color: inherit !important;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
    color: #ffffff !important;
}

/* =========================================================
   JETSMARTFILTERS
   ========================================================= */

.jet-search-filter__input,
.jet-search-filter__input::placeholder,
.jet-search-filter__submit,
.jet-search-filter__submit-text {
    font-size: 14px;
    font-family: inherit;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {
    .site-main,
    .elementor,
    .elementor-location-single,
    .elementor-location-archive,
    .elementor-widget-theme-post-content,
    .woocommerce,
    .woocommerce-page {
        font-size: 16px;
    }

    h1 { font-size: 34px; }
    h2 { font-size: 30px; }
    h3 { font-size: 22px; }
    h4 { font-size: 19px; }

    .ct-header .menu-item > a {
        font-size: 14px;
    }

    .woocommerce ul.products li.product h2,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 17px;
    }

    .single-product .product_title {
        font-size: 30px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
    .site-main,
    .elementor,
    .elementor-location-single,
    .elementor-location-archive,
    .elementor-widget-theme-post-content,
    .woocommerce,
    .woocommerce-page {
        font-size: 15px;
        line-height: 1.7;
    }

    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    h3 { font-size: 21px; }
    h4 { font-size: 18px; }

    .ct-header .menu-item > a {
        font-size: 14px;
    }

    .woocommerce ul.products li.product h2,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 16px;
    }

    .single-product .product_title {
        font-size: 26px;
    }

    .entry-title {
        font-size: 18px;
    }

    small {
        font-size: 13px;
    }
}

/* ==========================================================================
   HEADER TYPOGRAPHY - INTERSTATE (Adobe Fonts kit nyx4krh)
   The live site sets the whole header in 'interstate'. The kit is enqueued in
   functions.php; the Elementor header widgets (template 3964) carry the family
   explicitly. This rule is set on the header ROOT only and relies on normal
   inheritance, so anything without its own font-family (cart counter, labels)
   picks it up, while icon fonts - eicons, Font Awesome - keep theirs and are
   NOT broken by a blanket descendant selector.
   ========================================================================== */
.elementor-location-header{
  font-family:"interstate",sans-serif;
}

/* Live weights the current page 600 against 400 for the rest. Elementor's
   nav-menu widget has no 'active item weight' control, so it is set here.
   Elementor's generated rule for this widget has identical specificity (0,5,0)
   and loads after the theme stylesheet, so it wins on source order. A single
   !important is clearer and more durable here than chaining repeated classes. */
.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active{
  font-weight:600 !important;
}

/* The child theme sets a global p{font-size:16px} which beats the inherited
   size from Elementor text widgets, shrinking the ENQUIRY LIST label in the
   header and the phone/address/copyright lines in the footer. Let each
   widget's own typography flow through in these two template areas. */
.elementor-location-header .elementor-widget-text-editor p,
.elementor-location-footer .elementor-widget-text-editor p{
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  margin:0;
}

/* ==========================================================================
   CONTACT ICON ALIGNMENT (product templates)
   Elementor wraps the icon in an inline-block .elementor-icon-wrapper, whose
   line box adds ~9px of phantom descender space (widget 33.6px vs a 24px
   glyph). The glyph therefore rides ~5px above the label beside it.
   Making the wrapper a flex box collapses that space so the glyph centres on
   the text. Replaces an earlier position:absolute/translate attempt which
   over-corrected (12px out) and stretched the envelope box to 40px wide.
   ========================================================================== */
[data-elementor-type="product"] .elementor-widget-icon .elementor-icon-wrapper{
  display:flex;
  align-items:center;
  line-height:0;
}

/* =============================================================
   SEARCH RESULTS
   No Elementor template exists for search, so WordPress falls back
   to Hello Elementor default markup. Restyled as a card grid.
   Structure: main.site-main > .page-header + .page-content + nav.pagination
              .page-content > article.post*
              article.post > h2.entry-title, a>img, p
   Scoped to body.search-results so nothing else is affected.
   ============================================================= */
.search-results .site-main{
  max-width:1200px; margin:0 auto; padding:44px 20px 72px;
}

/* page heading */
.search-results .page-header{
  margin:0 0 30px; padding-bottom:18px; border-bottom:1px solid rgba(0,60,115,.15);
}
.search-results .page-header h1,
.search-results .page-header .entry-title{
  margin:0; color:#003C73; font-size:32px; line-height:1.15; letter-spacing:.01em;
}

/* the results grid - only when there are results, so the
   no-results message is not forced into a grid cell */
.search-results .page-content:has(article.post){
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px 24px;
}

/* result card */
.search-results article.post{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid rgba(0,60,115,.12); border-radius:4px; overflow:hidden;
  margin:0;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.search-results article.post:hover{
  box-shadow:0 6px 18px rgba(0,60,115,.14); transform:translateY(-2px);
  border-color:rgba(0,143,214,.45);
}

/* reorder: image, title, excerpt */
.search-results article.post > a{ order:1; }
.search-results article.post > h2.entry-title{ order:2; }
.search-results article.post > p{ order:3; }

/* image box - fixed ratio evens the cards; source is 768px so a
   ~350px cell downscales and stays sharp */
.search-results article.post > a{
  display:block; aspect-ratio:4 / 3; background:#EDF2F7; overflow:hidden; line-height:0;
}
.search-results article.post > a img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.search-results article.post:hover > a img{ transform:scale(1.03); }

/* title */
.search-results article.post > h2.entry-title{
  margin:16px 16px 8px; font-size:15px; line-height:1.4; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.search-results article.post > h2.entry-title a{ color:#003C73; text-decoration:none; }
.search-results article.post > h2.entry-title a:hover,
.search-results article.post > h2.entry-title a:focus{ color:#008FD6; }

/* excerpt - clamped so cards stay even */
.search-results article.post > p{
  margin:0 16px 18px; font-size:13.5px; line-height:1.55; color:#41556B; margin-top:auto;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* pagination */
.search-results .pagination{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-top:38px; padding-top:26px; border-top:1px solid rgba(0,60,115,.12);
}
.search-results .pagination a{
  color:#008FD6; font-weight:600; text-decoration:none; font-size:15px;
}
.search-results .pagination a:hover{ color:#003C73; }

@media (max-width:1000px){
  .search-results .site-main{ padding:32px 18px 56px; }
  .search-results .page-content:has(article.post){ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  .search-results .page-header h1,
  .search-results .page-header .entry-title{ font-size:26px; }
}
@media (max-width:600px){
  .search-results .page-content:has(article.post){ grid-template-columns:1fr; gap:22px; }
}
/* Enquiry list: stop the page jumping after "Add to Enquiry".
   WooCommerce injects a "View basket" link beside the button, which grows the
   layout and pushes content down. The header Enquiry List counter already
   confirms the add, so the link is redundant here. */
a.added_to_cart,
.woocommerce a.added_to_cart {
	display: none;
}

/* Keep visible confirmation on the button itself. */
a.add_to_cart_button.added .elementor-button-text::after {
	content: " \2713";
}