/*
Theme Name: World Cargo
Theme URI: https://goworldcargo.com
Author: World Cargo
Author URI: https://goworldcargo.com
Description: The World Cargo block theme. Templates, header, footer and global styles live in this theme's files; leads are handled by the World Cargo Quote Forms plugin.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: worldcargo
*/


/* Basic */
.footer-fix {
	margin-block-start: 0rem !important;
}

.header-fix {
	margin-block-start: 0rem !important;
}

.icon-center { 
	display: flex;
	justify-content: center;
}

.make-flex {
	display: flex;
	flex-direction: column;
}

.word-break {
	word-break: normal;
}

.no-word-break a,
.no-word-break a span {
    white-space: nowrap;
}

.two-column-fix ul {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.gap-fix h2{
	gap: 0px !important;
	flex-basis: min(0em, 0em) !important;
}

.remove-outline:focus {
	outline: none !important;
}

.basic-link a{
	text-decoration: none;
	/* Phone and email lines are small text: give each link a 24px-tall tap target. */
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

.basic-link a:hover {
	text-decoration: underline;
}

.basic-link-block {
	display: block;
	text-decoration: none;
}

.adjusted-line-height {
	line-height: 1;
}

.no-margin {
	margin: 0;
	margin-block-start: 0rem !important;
	margin-block-end: 0rem !important;
}

/* Site Logo */
.site-logo img{
	width: 25vw;
	padding: 0;
	margin: 0;
	transition: transform 0.15s ease;
}

.site-logo img:hover {
  transform: scale(1.04);
  transition: transform 0.15s ease;
}

@media screen and (max-width: 781px) { 
	.site-logo img {
	width: 70vw;
	padding: 0;
	margin: 0;
	transition: transform 0.15s ease;
    }
}

/* Tags */

.tag-pills a{
  display: inline-block;
  padding: 5px 15px; /* Adjust for size */
  font-size: 0.75em;
  font-weight: 500; /* Semi-bold for better visibility */
  color: #000000; /* Text color */
  background-color: #ffffff; /* Background color */
  border-radius: 25px; /* Full rounding for pill shape */
  margin:0 0 5px 0; /* Space between pills */
  text-align: center;
  white-space: nowrap; /* Prevents text from breaking */
  text-decoration: none;
}

.tag-pills a:hover {
  background-color: #0075c9; /* Darker shade for hover effect */
  color: #ffffff; /* Maintain white text */
}

/* Nav Menu */
@media screen and (max-width: 1000px) {
    nav > button {
        display: block !important;
    }
}

@media screen and (max-width: 1000px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }
}

.nav-bts a:hover {
	color: #0075c9 !important;
/* 	text-decoration: none; */	
}

a:focus {
	outline: none !important;
}

/* Outline Buttons */

.bt-outline-blue > a {
  color: #0075c9;
  border-color: #0075c9 !important;
  background-color: #ffffff;
  transition: transform 0.15s ease;
}

.bt-outline-blue:hover > a {
  color: #ffffff !important;
  border-color: #0075c9 !important;
  background-color: #0075c9 !important;
  transform: scale(1.05);
  transition: transform 0.15s ease;
}

.bt-outline-blue:active > a {
  transform: scale(1.02);
  transition: transform 0.1s ease;
  background-color: #0066b0 !important;
}

.bt-outline-blue:focus > a {
  background-color: #0075c9 !important;
}

/* Solid Blue Button */
.bt-solid-blue > a {
  transition: transform 0.15s ease;
  background-color: #0075c9 !important;
}

.bt-solid-blue:hover > a {
  transform: scale(1.05);
  transition: transform 0.15s ease;
  background-color: #0075c9 !important;
}

.bt-solid-blue:active > a {
  transform: scale(1.02);
  transition: transform 0.1s ease;
  background-color: #0066b0 !important;
}

.bt-solid-blue:focus > a {
  background-color: #0075c9 !important;
}

/* Solid White Button */
.bt-solid-white > a {
  transition: transform 0.15s ease;
}

.bt-solid-white:hover > a {
  transform: scale(1.05);
  transition: transform 0.15s ease;
}

.bt-solid-white:active > a {
  transform: scale(1.02);
  transition: transform 0.1s ease;
  background-color: #ececec !important;
}

/* Regular Blue Button */

.bt-blue:hover {
	background-color: #0066b0 !important;
}

.bt-blue:active {
	background-color: #005796 !important;
}

.bt-blue:focus {
	outline: none !important;
	background-color: #0075c9 !important;
}

.reg-search button:hover {
	background-color: #0066b0 !important;
}

.reg-search button:active {
	background-color: #005796 !important;
}

.reg-search button:focus {
	outline: none !important;
}

.reg-search div {
	border: none;
}

/* Hide Recaptcha */
.grecaptcha-badge { visibility: hidden; }

/* Columns on Mobile */
@media screen and (max-width: 781px) {
	.reverse-container {
    	flex-wrap: wrap-reverse !important;
	}
	
	.image-ratio {
		aspect-ratio: 18 / 6;
 		width: 100%; 
  		overflow: hidden;
 		object-fit: cover;
	}
	
	.col-flex {
		display: flex;
		gap: 1em;
	}
}

/* Visibility */

@media screen and (max-width: 781px) {
	.only-desktop {
		display: none !important;
	}
}

@media screen and (min-width: 782px) {
	.only-mobile {
		display: none !important;
	}
}

/* Customs Anchor */

.div-anchor {
  text-decoration: none; /* Remove underline */
  cursor: pointer; /* Show click cursor on hover */
}

.div-anchor > div {
	transition: transform 0.15s ease;
}

.div-anchor div:hover {
  cursor: pointer; /* Ensure the cursor changes when hovering over the div */
}

.div-hover:hover > div {
  transform: scale(1.05); /* Scale up the content */
  transition: transform 0.15s ease; /* Smooth transition */
}

/* Circular Background */

.circular-background {
  width: 5em; /* Set the width of the circle */
  height: 5em; /* Set the height equal to the width */
  border-radius: 50%; /* Make it a circle */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2em;
  box-sizing: border-box; /* Include padding in the width and height */
}

.wp-block-image figcaption {
    display: none !important;
}

.wp-caption-text {
    display: none !important;
}

figcaption {
    display: none !important;
}

/* Rank Math FAQ (FAQ Schema block) - base styling */
#rank-math-faq {
  margin: 3rem 0;
}

/* Each FAQ item */
.rank-math-list-item {

  border-radius: 1em;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
  background: #fff;
}

/* Question */
.rank-math-question {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

/* Answer */
.rank-math-answer {
  margin-top: 0.75rem;
  line-height: 1.65;
  color: #333;
}

.rank-math-answer p {
  margin: 0.5rem 0 0;
}
/* Services grid layout */
/* =========================================
   NEW: SERVICES GRID LAYOUT
   ========================================= */

/* --- CONTAINER SETUP --- */
.services-grid-container {
  display: grid !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  grid-template-columns: 1fr 1fr; /* phones: first card full width, the rest two across */
}
.services-grid-container > .wp-block-group:first-child { grid-column: 1 / -1 !important; }

/* --- ITEM STRUCTURE --- */
.services-grid-container > .wp-block-group {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

/* BASE COVER STYLES */
.services-grid-container .wp-block-cover {
  width: 100% !important;
  object-fit: cover;
  transition: height 0.3s ease;
}

/* --- MOBILE (Default) --- */
/* Reduced from 250px to 200px */
.services-grid-container .wp-block-cover {
  min-height: 180px;
  height: 180px;
}

/* --- TABLET (600px - 1024px) --- */
@media (min-width: 600px) {
  .services-grid-container {
    grid-template-columns: 1fr 1fr; 
  }

  /* 1. Full Width Item */
  .services-grid-container > .wp-block-group:first-child {
    grid-column: 1 / -1 !important;
    max-width: 100% !important; 
    width: 100% !important;
  }

  /* 2. Force inner container width */
  .services-grid-container > .wp-block-group:first-child > * {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Tablet Height: Reduced from 350px to 280px */
  .services-grid-container .wp-block-cover {
    min-height: 280px; 
    height: 280px;
  }
}

/* --- DESKTOP (1024px +) --- */
@media (min-width: 1024px) {
  .services-grid-container {
    grid-template-columns: repeat(5, 1fr); 
    align-items: stretch; 
  }

  /* Reset Item 1 */
  .services-grid-container > .wp-block-group:first-child {
    grid-column: auto !important;
  }
  .services-grid-container > .wp-block-group:first-child > * {
     max-width: initial !important; 
  }

  /* Desktop Height: Reduced from 600px to 450px */
  /* Adjust this number if you want it even shorter */
  .services-grid-container .wp-block-cover {
    min-height: 450px; 
    height: 100%;      
  }
  
  .services-grid-container > .wp-block-group {
    height: 100%;
  }
}

/* --- DESKTOP AUTOMATIC COUNTING (1024px+) --- */
@media (min-width: 1024px) {
  
  /* IF the container has exactly 3 children, make it 3 columns */
  .services-grid-container:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* IF the container has exactly 4 children, make it 4 columns */
  .services-grid-container:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(4, 1fr) !important;
  }

}

/* =========================================
   ITEMS GRID (8 Items) - Vertically Centered
   ========================================= */

/* --- CONTAINER --- */
.items-grid-container {
  display: grid !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important; 
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
	
  align-items: center !important; 
  
  /* DEFAULT: 2 Columns (Mobile & Tablet) */
  grid-template-columns: 1fr 1fr;
  
  /* DEFAULT: 2 Columns (Covers Mobile & Tablet) */
  grid-template-columns: 1fr 1fr;
}


/* --- DESKTOP ONLY (1024px+) --- */
@media (min-width: 1024px) {
  .items-grid-container {
    /* Switch to 4 Columns */
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Keep the optional tall height if you still want it */
  .items-grid-container .wp-block-cover {
    min-height: 300px; 
  }
}
/* Tap targets: at least 24px tall with room between them (Lighthouse / WCAG 2.5.8). */
footer .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { min-height: 24px; min-width: 24px; display: inline-flex; align-items: center; }
footer .wp-block-navigation__container { row-gap: 8px; }
.cmplz-manage-consent { min-height: 24px; }
/* Footer cookie notice: plain text beside the Manage preferences button. */
.wc-consent-note { opacity: .85; }
/* The preferences panel only ever opens from a "Manage" link (the banner itself is pre-dismissed).
   Two choices only: Accept and Continue, and a smaller Deny, which Complianz's opt-out stylesheet
   would hide. No switches, no Save. */
.cmplz-cookiebanner.optout .cmplz-categories,
.cmplz-cookiebanner.optout .cmplz-buttons .cmplz-btn.cmplz-save-preferences,
.cmplz-cookiebanner.optout .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner.optout .cmplz-buttons .cmplz-btn.cmplz-manage-options { display: none; }
.cmplz-cookiebanner.optout .cmplz-buttons .cmplz-btn.cmplz-deny { display: block; font-size: .85em; min-height: 32px; padding: 4px 10px; background: #e9ecef; border: 1px solid #d5d9de; border-radius: 6px; color: #222; }
.cmplz-cookiebanner.optout .cmplz-buttons .cmplz-btn.cmplz-deny:hover { background: #dde1e6; }
/* The "accept to load the map" notice: Complianz's half-transparent black over the grey map
   placeholder leaves white text at 3.9:1; a darker overlay clears 4.5:1. */
body .cmplz-blocked-content-container .cmplz-blocked-content-notice,
body .cmplz-wp-video .cmplz-blocked-content-notice { background-color: rgba(0, 0, 0, .72); }

/* Complianz slides its banner in by animating "bottom", which Lighthouse
   counts as layout shift. Fade it in at its final position instead. */
body .cmplz-cookiebanner { bottom: 0 !important; -webkit-animation: wc-banner-in .4s ease-out both !important; animation: wc-banner-in .4s ease-out both !important; }
@keyframes wc-banner-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body .cmplz-cookiebanner { animation: none !important; } }

/* One set of logo files: on dark backgrounds the colour logo is shown white. */
footer .wp-block-site-logo img,
.wc-white img { filter: brightness(0) invert(1); }

/* =========================================
   Cover block styles (pick them in the editor: Cover > Styles).
   "Card": photo card with a dark fade behind text at the bottom.
   "Tile": photo tile with an even shade behind a centred title.
   Both use the theme's card radius and lift a little on hover. The
   overlay colour set on each block is replaced so every card matches.
   ========================================= */
.wp-block-cover:is(.is-style-card, .is-style-tile) {
  border-radius: var(--wp--custom--radius--card);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-cover:is(.is-style-card, .is-style-tile) .wp-block-cover__background { opacity: 1 !important; }
.wp-block-cover.is-style-card .wp-block-cover__background {
  background: linear-gradient(180deg, rgb(8 24 40 / .28) 0%, rgb(8 24 40 / .45) 45%, rgb(8 24 40 / .88) 100%) !important; /* light tint all over so the icon reads on bright photos, darker at the foot for the title */
}
.wp-block-cover.is-style-tile .wp-block-cover__background {
  background: linear-gradient(180deg, rgb(8 24 40 / .1) 0%, rgb(8 24 40 / .55) 100%) !important;
}
.wp-block-cover.is-style-tile :is(h2, h3, h4, p) { text-shadow: 0 2px 12px rgb(0 0 0 / .35); }
.wp-block-cover:is(.is-style-card, .is-style-tile) .wp-block-cover__image-background { transition: transform .4s ease; }
:is(a:hover > .wp-block-cover, .wp-block-cover:hover):is(.is-style-card, .is-style-tile) {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgb(8 24 40 / .18);
}
:is(a:hover > .wp-block-cover, .wp-block-cover:hover):is(.is-style-card, .is-style-tile) .wp-block-cover__image-background { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .wp-block-cover:is(.is-style-card, .is-style-tile),
  .wp-block-cover:is(.is-style-card, .is-style-tile) .wp-block-cover__image-background { transform: none !important; transition: none; }
}

/* Plugins: the quote form and Google reviews follow the theme's corners and weights. */
.wcqf { --wcqf-radius: 10px; } /* The form's panel is radius + 4px = the card radius. */
.wcqf .wcqf-title { font-weight: 500; }
.wcqf :is(.wcqf-card__label, .is-current .wcqf-progress__label, .wcqf-label, .wcqf-btn) { font-weight: 500; }
.ti-widget .ti-review-item > .ti-inner { border-radius: var(--wp--custom--radius--card) !important; }

/* Icons in a row with text (any flex group): an inline image sits on the text
   baseline and looks low; as a block the row centres it like the text. */
.is-layout-flex > .wp-block-image img { display: block; }

/* Paragraph block style "Eyebrow": the small label above a section title.
   Add an icon with one of the wc-icon-* classes (Advanced > Additional CSS
   class); the icon takes the label's text colour. */
.is-style-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
/* Eyebrows are small text, and the brand blue only reaches 4.2:1 on the grey sections (4.5:1 is
   required). A deeper blue for this one text style keeps it readable everywhere it is used. */
.is-style-eyebrow { --wp--preset--color--custom-primary: #0068b3; }
[class*="wc-icon-"]::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: .5em;
  vertical-align: -.25em;
  background-color: currentColor;
  -webkit-mask: var(--wc-icon) center / contain no-repeat;
  mask: var(--wc-icon) center / contain no-repeat;
}
.wc-icon-ship { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1M19.4 18 21 12.4a1 1 0 0 0-.6-1.2L12 8l-8.4 3.2a1 1 0 0 0-.6 1.2L4.6 18M12 2v6M8 4h8'/></svg>"); }
.wc-icon-plane { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/></svg>"); }
.wc-icon-truck { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 17h4V5H2v12h3M14 9h4l4 4v4h-3M7 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM17 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/></svg>"); }
.wc-icon-car { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 17H3v-5l2-5h14l2 5v5h-2M3 12h18M7 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM17 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/></svg>"); }
.wc-icon-train { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12a2 2 0 0 1 2 2v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V5a2 2 0 0 1 2-2zM4 11h16M12 3v8M8 21l2-3M16 21l-2-3'/></svg>"); }
.wc-icon-globe { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM2 12h20M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10A15 15 0 0 1 12 2z'/></svg>"); }
.wc-icon-route { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM9 18h7.5a3.5 3.5 0 0 0 0-7h-9a3.5 3.5 0 0 1 0-7H15'/></svg>"); }
.wc-icon-pin { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/></svg>"); }
.wc-icon-building { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18zM6 12H4a2 2 0 0 0-2 2v8h4M18 9h2a2 2 0 0 1 2 2v11h-4M10 6h4M10 10h4M10 14h4M10 18h4'/></svg>"); }
.wc-icon-chat { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>"); }
.wc-icon-steps { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6l1.5 1.5L7 5M3 12l1.5 1.5L7 11M3 18l1.5 1.5L7 17M11 6h10M11 12h10M11 18h10'/></svg>"); }
.wc-icon-question { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/></svg>"); }
.wc-icon-star { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/></svg>"); }
.wc-icon-news { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2M18 14h-8M15 18h-5M10 6h8v4h-8z'/></svg>"); }
.wc-icon-box { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8 12 3 3 8v8l9 5 9-5zM3 8l9 5 9-5M12 13v8'/></svg>"); }
.wc-icon-doc { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M8 13h8M8 17h8'/></svg>"); }
.wc-icon-tag { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4zM7.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z'/></svg>"); }
.wc-icon-container { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 7h20v12H2zM6 7v12M10 7v12M14 7v12M18 7v12M2 4h20'/></svg>"); }
.wc-icon-check { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12l3 3 5-6'/></svg>"); }
.wc-icon-phone { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }
.wc-icon-mail { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 7L2 7'/></svg>"); }
/* Icon beside a multi-line paragraph: hanging indent, so wrapped lines line up beside the glyph and inline links stay inline. */
.wc-icon-row { position: relative; padding-left: 1.5em; overflow-wrap: normal; }
.wc-icon-row::before { position: absolute; left: 0; top: .22em; margin: 0 !important; }

/* Icon modifier: draw a wc-icon-* glyph in the brand colour while the text keeps its own. */
.wc-icon-primary::before { background-color: var(--wp--preset--color--custom-primary); }

/* Rank Math FAQ block (rendered as .rank-math-block > .rank-math-list): question cards in a two-column grid. */
.rank-math-block .rank-math-list { display: grid; gap: var(--wp--preset--spacing--20); }
@media (min-width: 782px) { .rank-math-block .rank-math-list { grid-template-columns: 1fr 1fr; } }
.rank-math-block .rank-math-list-item { margin: 0; padding: var(--wp--preset--spacing--20); background: var(--wp--preset--color--base-2); border-radius: var(--wp--custom--radius--card); box-shadow: var(--wp--preset--shadow--card); }
.rank-math-block .rank-math-question { margin: 0 0 .5em; font-size: var(--wp--preset--font-size--medium-large); font-weight: 400; }
.rank-math-block .rank-math-answer, .rank-math-block .rank-math-answer p { margin: 0; color: var(--wp--preset--color--contrast-2); font-size: var(--wp--preset--font-size--small); }

/* List block style "Checklist": a wc-icon-* class on the list picks the glyph (usually wc-icon-check),
   drawn in the brand colour with a hanging indent so wrapped lines line up with the text. */
ul.is-style-checklist { list-style: none; padding-left: 0; }
.is-style-checklist::before { content: none; }
.is-style-checklist > li { position: relative; padding-left: 1.9em; }
.is-style-checklist > li + li { margin-top: .6em; }
.is-style-checklist > li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.25em; height: 1.25em; background-color: var(--wp--preset--color--custom-primary); -webkit-mask: var(--wc-icon) center / contain no-repeat; mask: var(--wc-icon) center / contain no-repeat; }

/* Details block as an accordion row: question with a plus that turns into a cross when open. */
.wp-block-details { margin: 0; padding: var(--wp--preset--spacing--10) 0; border-bottom: 1px solid rgb(8 24 40 / .12); }
.wp-block-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: var(--wp--preset--font-size--medium-large); font-weight: 400; line-height: 1.3; }
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after { content: ""; flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; color: var(--wp--preset--color--custom-primary); background: linear-gradient(currentColor, currentColor) center / 42% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 42% no-repeat, #0075c914; transition: transform .2s ease; }
.wp-block-details[open] > summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: .6em; color: var(--wp--preset--color--contrast-2); }
.wp-block-details > p + p { margin-top: .5em; }

/* Details open/close animates where the browser supports ::details-content (Chrome 131+, Safari 18.4+, Firefox 138+); elsewhere it simply toggles. */
.wp-block-details { interpolate-size: allow-keywords; }
.wp-block-details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .3s ease, opacity .3s ease, content-visibility .3s allow-discrete; }
.wp-block-details[open]::details-content { block-size: auto; opacity: 1; }
/* With js/details.js the whole block's height animates instead (works in Safari too); the icon turns back as soon as closing starts. */
.wc-details-js .wp-block-details::details-content { transition: none; }
.wp-block-details.is-closing > summary::after { transform: none; }

/* Line clamps for grids of cards: add wc-clamp-2 / wc-clamp-3 to a title, paragraph or excerpt block
   so every card's text takes the same number of lines (longer text ends with an ellipsis). */
.wc-clamp-2:not(:has(> p)), .wc-clamp-2 > p, .wc-clamp-3:not(:has(> p)), .wc-clamp-3 > p { display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; } /* !important: core sets display on title blocks */
.wc-clamp-2:not(:has(> p)), .wc-clamp-2 > p { -webkit-line-clamp: 2; }
.wc-clamp-3:not(:has(> p)), .wc-clamp-3 > p { -webkit-line-clamp: 3; }
.wc-clamp-2 > a, .wc-clamp-3 > a { display: inline; } /* theme links are inline-block, which would count as one line */

/* Flex-row helper: keep an item (an icon tile, a badge) at its set size while its neighbours shrink and wrap. */
.wc-no-shrink { flex-shrink: 0; }

/* Paragraph block style "Icon tile": an empty paragraph with a wc-icon-* class becomes a tinted square
   showing that icon large (size follows the block's font size). Add wc-icon-primary for a blue glyph. */
p.is-style-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 3.4em; height: 3.4em; margin: 0; border-radius: var(--wp--custom--radius--card); background: #0075c914; }
p.is-style-icon-tile::before { width: 1.7em; height: 1.7em; margin: 0; vertical-align: 0; }

/* The sticky top bar paints above the header (whose z-index 99999 keeps its dropdowns over the hero),
   and steps aside while the mobile menu overlay is open. */
.wp-site-blocks > .is-position-sticky { z-index: 100001; }
body:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-site-blocks > .is-position-sticky { visibility: hidden; }

/* Phone layout (user review 2026-10-23). Classes mark blocks whose phone layout differs; desktop keeps the block settings. */
@media (max-width: 781px) {
  .site-logo img { width: 180px !important; }
  /* First screen on phones: the hero fills the visible area (svh = above Safari's bars) down to one row of
     stats; header ~91px + stats row ~103px. Only the first two stats show on phones. */
  .wc-hero { min-height: calc(100svh - 194px) !important; }
  .wc-stats .is-layout-grid > :nth-child(n+3) { display: none; }
  .wc-hero .wp-block-buttons { flex-wrap: nowrap; align-items: stretch; width: 100%; }
  .wc-hero .wp-block-button { flex: 1 1 0; display: flex; }
  .wc-hero .wp-block-button__link { width: 100%; display: flex; align-items: center; justify-content: center; padding-left: .5rem; padding-right: .5rem; font-size: .9rem; white-space: nowrap; }
  .wc-stats { padding-top: var(--wp--preset--spacing--10) !important; padding-bottom: var(--wp--preset--spacing--10) !important; }
  .wc-stats .has-x-large-font-size { font-size: 1.5rem !important; }
  .wc-stats .has-small-font-size { font-size: .8rem !important; }
  .wc-cta .wp-block-buttons, .wc-cta .wp-block-button, .wc-cta .wp-block-button__link { width: 100%; }
  .wc-ship-grid { gap: var(--wp--preset--spacing--10) !important; }
  .wc-ship-grid .service-card-icon { flex-basis: 52px !important; }
  .wc-ship-grid .service-card-icon figure { margin: .6rem !important; }
  .wc-ship-grid .service-card-icon img { width: 32px !important; }
  .wc-ship-grid h3 { font-size: .8rem !important; }
  .wc-ship-grid > .wp-block-group { gap: .5rem; }
  .wc-step { display: flex; align-items: stretch; }
  .wc-step > .wp-block-image { flex: 0 0 34%; margin: 0; display: flex; align-items: center; background: #eaf3fb; border-radius: var(--wp--custom--radius--card) 0 0 var(--wp--custom--radius--card); }
  .wc-step > .wp-block-image img { height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 0 !important; }
  .wc-step > .wp-block-group { padding: var(--wp--preset--spacing--10) !important; }
  .wc-step > .wp-block-group { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4rem; row-gap: .35rem; }
  .wc-step .has-x-large-font-size { font-size: var(--wp--preset--font-size--medium-large) !important; line-height: 1.3 !important; }
  .wc-step .has-x-large-font-size::after { content: "."; }
  .wc-step h3 { flex: 1 1 0; }
  .wc-step .has-small-font-size { flex-basis: 100%; }
  .wc-posts > li:nth-child(n+7) { display: none; }
}

/* Phone menu overlay: left-aligned rows with dividers, sub-pages as two-column pills, search on top. */
@media (max-width: 781px) {
  .wp-block-navigation__responsive-container.is-menu-open { padding: 1rem 1.25rem 2rem; background: var(--wp--preset--color--base-2); }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: 1rem; right: 1rem; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3rem; align-items: stretch; gap: 0; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: flex; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; gap: 0; width: 100%; text-align: left; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { display: block; width: 100%; padding: .85rem 0; border-bottom: 1px solid rgb(8 24 40 / .1); }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:has(.wp-block-search, .wp-block-buttons) { border: 0; padding: .5rem 0; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: 1.15rem; display: block; padding: 0; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { pointer-events: none; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem !important; padding: .9rem 0 .25rem !important; margin: 0; width: 100%; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { display: flex; flex-direction: row !important; align-items: center !important; justify-content: flex-start; gap: .55rem; padding: .7rem .9rem; border-radius: var(--wp--custom--radius--small); background: #0075c914 !important; color: var(--wp--preset--color--custom-primary) !important; font-size: .95rem; } /* !important: core's overlay rules set column/transparent */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item::before { margin: 0 !important; flex: none; width: 1.25em; height: 1.25em; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; flex: 1 1 0; min-width: 0; padding: 0 !important; margin: 0 !important; color: inherit; line-height: 1.25; white-space: normal; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-search { width: 100%; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__inside-wrapper { border-radius: var(--wp--custom--radius--small); overflow: hidden; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons, .wp-block-navigation__responsive-container.is-menu-open .wp-block-button, .wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link { width: 100%; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons { margin: 0 0 .5rem; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-search { margin-top: 1.25rem; }
}

/* Menu link icons (wc-icon-* on the link block) show only in the phone overlay. */
@media (min-width: 782px) { .wp-block-navigation-item[class*="wc-icon-"]::before { content: none; } }

/* Footer: blurb measure, bottom bar centred on phones, hero text centred with buttons at the foot on phones. */
.wc-footer-blurb { max-width: 34ch; }
@media (max-width: 781px) {
  .wc-footer-bottom { flex-direction: column-reverse; align-items: center; justify-content: center; text-align: center; row-gap: 1.1rem; }
  .wc-footer-bottom > .wp-block-group, .wc-footer-bottom .wp-block-navigation__container { justify-content: center; }
  /* Legal links and the cookie line sit close together; the larger gap is above the copyright. */
  .wc-footer-bottom > .wp-block-group.has-small-font-size { row-gap: .3rem; }
  .wc-hero .wp-block-cover__inner-container { align-self: stretch; display: flex; flex-direction: column; }
  .wc-hero .wp-block-cover__inner-container > .wp-block-group { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-bottom: 0 !important; }
  .wc-hero .wp-block-cover__inner-container > .wp-block-group > .wp-block-group { margin: auto 0; } /* title sits a third of the way down */
  .wc-hero .wp-block-buttons { margin-top: auto; padding-top: 1.5rem; padding-bottom: .75rem; }
}

/* Manage Consent in the footer: a real button (Complianz listens for button.cmplz-manage-consent) dressed as a menu item. */
.wc-consent-item ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: baseline; column-gap: .5em; }
.wc-consent-item button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; text-align: inherit; }
.wc-consent-item button:hover { text-decoration: underline; }
.wc-consent-item button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Utilities: no wrapping (emails, phone numbers); a light icon tile for dark backgrounds. */
.wc-nowrap { white-space: nowrap; }
p.is-style-icon-tile.wc-tile-light { background: rgb(255 255 255 / .12); }
/* Footer on phones: one column block after another, each heading followed by its links in a two-column grid. */
@media (max-width: 781px) {
  .wc-footer-grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: var(--wp--preset--spacing--30) !important; }
  .wc-footer-grid .wp-block-navigation__container { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center; gap: .5rem !important; width: 100%; }
  .wc-footer-grid .wp-block-navigation-item { width: auto !important; }
  .wc-footer-grid .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0 .8rem; border-radius: 999px; background: rgb(255 255 255 / .1); font-size: .85rem; line-height: 1; white-space: nowrap; }
  .wc-footer-contact > .wp-block-group { display: flex; flex-direction: column; gap: .8rem; }
}
/* "What we ship": label beside the icon on desktop, under it on phones. */
@media (min-width: 782px) {
  .wc-ship-grid > .wp-block-group { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; }
  .wc-ship-grid h3 { text-align: left !important; }
}

/* Inner-page hero: shorter than the home hero, same centred layout. */
.wc-hero--page .is-style-eyebrow { letter-spacing: .12em; opacity: .9; }
@media (max-width: 781px) {
  .wc-hero--page { min-height: 56svh !important; }
}
/* Simple HTML table inside cards (container specs): tidy rows, no outer border. */
.wc-spec-table table { border-collapse: collapse; width: 100%; font-size: var(--wp--preset--font-size--small); }
.wc-spec-table td, .wc-spec-table th { border: 0; border-bottom: 1px solid rgb(8 24 40 / .1); padding: .5rem .25rem; }
.wc-spec-table thead th, .wc-spec-table tr:first-child td { font-weight: 500; color: var(--wp--preset--color--custom-primary); }

/* Contact page map card: the iframe fills the card beside the form. */
.wc-map { height: 100%; min-height: 360px; border-radius: var(--wp--custom--radius--card); overflow: hidden; }
.wc-map iframe { display: block; width: 100%; height: 100%; min-height: 360px; }
@media (max-width: 781px) {
  .wc-hero--page .is-style-eyebrow { font-size: .72rem; }
  .wc-hero--page .has-x-large-font-size { font-size: 1.9rem; }
}

/* Quote form sitting on a hero photo: the form panel is the only box, with a little more lift. */
.wp-block-cover .wcqf-form { box-shadow: 0 12px 32px rgba(16, 24, 40, .22); }

/* Card grids on phones: an odd last card stretches across the row instead of sitting alone on the left. */
@media (max-width: 781px) {
  .wc-cards > :nth-child(odd):last-child:not(:first-child) { grid-column: 1 / -1; }
}

/* Article cards (wc-post-card: Query Loop cards on the blog, landing pages and archives; user review 2026-10-26).
   The title link stretches over the whole card, so a click anywhere opens the article. The "Read more"
   paragraph (wc-card-more) sits bottom right with an arrow; on hover the arrow slides and the words fade in. */
.wc-post-card { position: relative; display: flex; flex-direction: column; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.wc-post-card .wp-block-post-featured-image { flex: none; overflow: hidden; }
.wc-post-card .wp-block-post-featured-image img { transition: transform .5s ease; }
.wc-post-card__body, .wc-slide__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.wc-post-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wc-post-card .wp-block-post-title a { text-decoration: none; }
.wc-post-card .wc-card-cat { position: relative; z-index: 2; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-post-card .wc-card-cat a { text-decoration: none; }
.wc-post-card .wc-card-cat a:hover { text-decoration: underline; }
.wc-post-card .wp-block-post-date { font-size: .8rem; }
.wc-card-more { position: relative; margin-top: auto !important; padding-top: var(--wp--preset--spacing--10); padding-right: 1.5em; text-align: right; font-weight: 500; color: transparent; transition: color .25s ease, padding-right .25s ease; }
.wc-card-more::after {
  content: ""; position: absolute; right: 0; bottom: .15em; width: 1.15em; height: 1.15em; background: var(--wp--preset--color--custom-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s ease;
}
.wc-post-card:is(:hover, :focus-within) { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(8 24 40 / .16); }
.wc-post-card:is(:hover, :focus-within) .wp-block-post-featured-image img { transform: scale(1.04); }
.wc-post-card:is(:hover, :focus-within) .wc-card-more { color: var(--wp--preset--color--custom-primary); padding-right: 1.9em; }
.wc-post-card:is(:hover, :focus-within) .wc-card-more::after { transform: translateX(5px); }
.wc-post-card:focus-within { outline: 2px solid var(--wp--preset--color--custom-primary); outline-offset: 2px; }
.wc-post-card:has(a:focus-visible) { outline-style: solid; }
.wc-post-card:not(:has(a:focus-visible)) { outline: none; }
@media (hover: none) { .wc-card-more { color: var(--wp--preset--color--custom-primary); } }
@media (prefers-reduced-motion: reduce) {
  .wc-post-card, .wc-post-card .wp-block-post-featured-image img, .wc-card-more, .wc-card-more::after { transition: none; transform: none !important; }
}
/* The blog page lists every article; the phone cap of six (wc-posts) does not apply there. */
@media (max-width: 781px) {
  .wc-posts--all > li:nth-child(n+7) { display: list-item; }
  .wc-posts .wc-card-cat { display: none; } /* two-up phone cards have no room for the category line */
}

/* Small article rows (single post sidebar): the whole row is the link. */
.wc-post-row { position: relative; transition: background-color .2s ease; }
.wc-post-row .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.wc-post-row:hover { background-color: var(--wp--preset--color--base-2) !important; }

/* Topic cards whose heading is a link: the link covers the card. */
.wc-link-card { position: relative; }
.wc-link-card h3 a::after { content: ""; position: absolute; inset: 0; }
.wc-link-card:hover { box-shadow: 0 14px 30px rgb(8 24 40 / .16) !important; }

/* Featured-article slider (Query Loop with class wc-slider; js/slider.js adds the arrows, dots and autoplay).
   One card per slide, photo beside the text on desktop and above it on phones. */
.wc-slider .wc-slider__track { display: flex; gap: var(--wp--preset--spacing--20); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px; margin: -6px; scroll-padding: 6px; }
.wc-slider .wc-slider__track::-webkit-scrollbar { display: none; }
.wc-slider .wc-slider__track > li { flex: 0 0 100%; min-width: 0; margin: 0 !important; scroll-snap-align: start; scroll-snap-stop: always; }
.wc-slide { align-items: stretch; }
.wc-slide .wc-slide__img { height: 100%; margin: 0; }
.wc-slide .wc-slide__img img { height: 100%; width: 100%; object-fit: cover; }
.wc-slide .wc-slide__body { justify-content: center; }
.wc-slide .wc-card-more { margin-top: 0 !important; }
.wc-slide .wp-block-post-title { font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.2; }
.wc-slide .wp-block-post-excerpt { -webkit-line-clamp: 4; }
.wc-slide .wp-block-post-excerpt p { font-size: 1rem; }
.wc-slide:is(:hover, :focus-within) { transform: none; }
.wc-slider__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: var(--wp--preset--spacing--20); }
.wc-slider__btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1.5px solid rgb(8 24 40 / .15); border-radius: 50%; background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--custom-primary); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.wc-slider__btn:hover, .wc-slider__btn:focus-visible { background: var(--wp--preset--color--custom-primary); border-color: var(--wp--preset--color--custom-primary); color: #fff; }
.wc-slider__dots { display: flex; align-items: center; gap: .5rem; }
/* Each dot is a 24px tap target; the visible dot is drawn inside it. */
.wc-slider__dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: width .25s ease; }
.wc-slider__dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: rgb(8 24 40 / .2); transition: width .25s ease, background-color .25s ease; }
.wc-slider__dot[aria-current="true"] { width: 42px; }
.wc-slider__dot[aria-current="true"]::before { width: 26px; background: var(--wp--preset--color--custom-primary); }
@media (max-width: 781px) {
  .wc-slide .wc-slide__img img { height: auto; }
  .wc-slide .wc-slide__body { padding: var(--wp--preset--spacing--20) !important; }
  .wc-slide .wp-block-post-excerpt { -webkit-line-clamp: 3; }
  .wc-slide .wp-block-post-excerpt p { font-size: .9rem; }
}

/* Query pagination (blog page and archives): numbers as round pills, the current one filled,
   previous/next as outline buttons with their arrows. */
.wp-block-query-pagination { gap: .5rem; align-items: center; margin-top: var(--wp--preset--spacing--30); font-size: .95rem; }
.wp-block-query-pagination .page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.5rem; height: 2.5rem; padding: 0 .9rem;
  border: 1.5px solid rgb(8 24 40 / .15); border-radius: 999px; background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--contrast);
  text-decoration: none; font-weight: 500; transition: background-color .2s, color .2s, border-color .2s;
}
.wp-block-query-pagination-numbers { display: inline-flex; gap: .5rem; }
.wp-block-query-pagination .page-numbers { padding: 0; }
.wp-block-query-pagination .page-numbers.dots { border: 0; background: none; min-width: 1.5rem; }
.wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--custom-primary); border-color: var(--wp--preset--color--custom-primary); color: #fff; }
.wp-block-query-pagination :is(a.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover { border-color: var(--wp--preset--color--custom-primary); color: var(--wp--preset--color--custom-primary); }
.wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow { margin: 0; }
@media (max-width: 781px) {
  .wp-block-query-pagination-previous, .wp-block-query-pagination-next { padding: 0; min-width: 2.5rem; }
  .wp-block-query-pagination-previous > :not(.wp-block-query-pagination-previous-arrow), .wp-block-query-pagination-next > :not(.wp-block-query-pagination-next-arrow) { display: none; }
}

/* Button with an icon: add wc-icon-btn and a wc-icon-* class to the button block; the glyph sits inside the link. */
.wp-block-button.wc-icon-btn[class*="wc-icon-"]::before { content: none; }
.wp-block-button.wc-icon-btn[class*="wc-icon-"] .wp-block-button__link::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .5em; vertical-align: -.2em; background-color: currentColor;
  -webkit-mask: var(--wc-icon) center / contain no-repeat; mask: var(--wc-icon) center / contain no-repeat;
}

/* Topic bar (blog page): a label beside outline pills, each with its wc-icon-* glyph inside the pill. */
.wc-topic-bar .is-style-eyebrow { margin: 0; }
.wc-topic-bar .wp-block-buttons { gap: .5rem; }
.wc-topic-bar .wp-block-button__link { padding: .45rem 1rem; font-size: .85rem; border-radius: 999px; }
.wc-topic-bar .wp-block-button[class*="wc-icon-"]::before { content: none; }
.wc-topic-bar .wp-block-button[class*="wc-icon-"] .wp-block-button__link::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .45em; vertical-align: -.2em; background-color: currentColor;
  -webkit-mask: var(--wc-icon) center / contain no-repeat; mask: var(--wc-icon) center / contain no-repeat;
}

/* Password prompt on a protected page (the staff phone-inquiry page): the page's own top bar and cover photo
   (functions.php renders them from the page's blocks) with a centred card: lock, one line, password, a way back. */
.wc-icon-lock { --wc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); }
.wc-pass { display: flex; align-items: center; justify-content: center; min-height: 80vh; margin-top: 0 !important; margin-bottom: 0 !important; padding: clamp(1.5rem, 5vh, 4rem) 1rem; background: #eef2f7; }
.wc-pass__card { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 100%; max-width: 440px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid #dde3ea; border-radius: var(--wp--custom--radius--card); background: #fff; color: #14181f; box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 12px 32px rgb(16 24 40 / .18); text-align: center; }
.wc-pass__head { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0 0 .9rem; }
.wc-pass__title { font-size: 1.35rem; font-weight: 500; line-height: 1.2; color: #14181f; }
.wc-pass__card p.wc-pass__icon { font-size: 1.1rem; margin: 0; }
.wc-pass__card p.wc-pass__icon::before { margin: 0; }
.wc-pass__card > p:empty { display: none; }
.wc-pass__text { margin: 0 0 1.5rem; color: var(--wp--preset--color--custom-tertiary); font-size: .95rem; line-height: 1.5; }
.wc-pass__row { display: flex; width: 100%; gap: .5rem; }
.wc-pass__row input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 .9rem; border: 1.5px solid #d9dee5; border-radius: 10px; font: inherit; font-size: 1rem; color: #14181f; background: #fff; }
.wc-pass__row input:focus { outline: none; border-color: var(--wp--preset--color--custom-primary); box-shadow: 0 0 0 3px #0075c926; }
.wc-pass__row .wp-block-button__link { flex: none; height: 48px; padding: 0 1.4rem; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 1rem; font-weight: 500; }
.wc-pass__err { margin: .75rem 0 0; color: #b42318; font-size: .9rem; }
.wc-pass__foot { width: 100%; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid #e3e7ed; }
.wc-pass__card a.wc-pass__back { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 44px; margin: 0; padding: 0 1rem; border: 1.5px solid #d9dee5; border-radius: 10px; color: var(--wp--preset--color--custom-tertiary); font-size: .95rem; font-weight: 500; text-decoration: none; transition: border-color .15s, color .15s; }
.wc-pass__card a.wc-pass__back:hover { border-color: var(--wp--preset--color--custom-primary); color: var(--wp--preset--color--custom-primary); }
@media (max-width: 480px) { .wc-pass__row { flex-direction: column; } .wc-pass__row .wp-block-button__link { width: 100%; } }