/*** Design system */
:root {
  /* Colours (see resources/design/homepage/DESIGN-ANALYSIS.md) */
  --skin-white:      #FFFFFF;
  --skin-dark:       #342F2D;   /* body text */
  --skin-dark-60:    #151312;   /* headings */
  --skin-teal:       #01A99D;   /* accent / links / tags */
  --skin-teal-40:    #99DDD8;   /* form input borders */
  --skin-teal-20:    #CCEEEB;   /* inactive swatch/thumbnail borders */
  --skin-teal-10:    #E6F6F5;   /* tinted bg */
  --skin-grey-20:    #D6D5D5;   /* dividers */
  --skin-grey-5:     #F5F5F4;   /* muted bg */
  --skin-gradient:   linear-gradient(15deg, #01A99D 0%, #0746BD 100%);

  /* Type — Stack Sans Headline via Typekit (kit ID pending from client);
     Plus Jakarta Sans is the temporary Google Fonts stand-in (closest
     humanist-geometric proportions at Light/Regular/Medium weights). */
  --font-heading: 'stack-sans-headline', 'Plus Jakarta Sans', Arial, sans-serif;
  --font-body:    'stack-sans-headline', 'Plus Jakarta Sans', Arial, sans-serif;
  --font-size:    16px;

  /* Layout — design is 1920 wide, 72px side gutter (1776 content),
     a narrower 1414 centred measure is used for some headings */
  --skin-content-max: 1776px;
  --skin-narrow-max:  1414px;
  --skin-gutter:       72px;
  --gap-xl:       100px;
  --gap-l:       80px;
  --gap-m:       60px;
  --gap-s:       40px;	
	

  /* Generic (non-slice) page tokens — used only by index.php/page.php/
     single.php fallback templates, not by any branded module. */
  --shadow-sm:0 2px 8px rgba(0,0,0,0.06); --shadow-md:0 6px 24px rgba(0,0,0,0.10);
  --radius:10px; --radius-lg:18px;
}

/* ───── Page reset ───── */
* { box-sizing: border-box; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.32px;
  color: var(--skin-dark);
  background: var(--skin-white);
  margin: 0;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--skin-dark-60); color:var(--skin-white); padding:12px 20px; z-index:9999; }
.skip-link:focus { left:0; }

/* ───── Typography ───── */
h1, .h1 { font-family: var(--font-heading); font-weight: 500; font-size: 52px; line-height: 70px; margin: 0; color: var(--skin-dark-60); }
h2, .h2 { font-family: var(--font-heading); font-weight: 500; font-size: 40px; line-height: 58px; margin: 0; color: var(--skin-dark-60); }
h3, .h3 { font-family: var(--font-heading); font-weight: 500; font-size: 28px; line-height: 44px; margin: 0; color: var(--skin-dark-60); }
h4, .h4 { font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 31px; margin: 0; color: var(--skin-dark-60); }
h5 { font-family: var(--font-heading); font-weight: 500; margin: 0; color: var(--skin-dark-60); }
h6, .h6 { font-family: var(--font-heading); font-weight: 500; font-size: 18px; line-height: 28px; margin: 0; }

.text-intro  { font-weight: 300; font-size: 18px; line-height: 30px; letter-spacing: 0.54px; }
.text-body   { font-weight: 300; font-size: 16px; line-height: 26px; letter-spacing: 0.32px; }
p { margin: 0; }


.rte h2,
.rte h3,
.rte h4,
.rte h5,
.rte h6,
.rte p,
.rte ul,
.rte table {
 margin: 30px 0; 	
}

.rte h4,
.rte h5 {
	color: var(--skin-teal);
}



/* ───── Layout helpers ───── */
.skin-inner {
  max-width: var(--skin-content-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--skin-gutter);
}
.skin-inner-narrow {
  max-width: var(--skin-narrow-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--skin-gutter);
}

/* ───── skin-wrapper — company-signature section class, every module's outer <section> carries this first ───── */
.skin-wrapper { position: relative; padding-block: var(--skin-wrapper-padding-block, 0); }

/* ───── Buttons — pill / glass / gradient system (this brand has no angled tail) ───── */
.skin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 20px 28px;
  border-radius: 1000px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--font-size);
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--skin-white);
  white-space: nowrap;
  transition: filter 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 -2px 15px rgba(0,0,0,0.2), inset 0 2px 15px rgba(1,169,157,0.4);
}
.skin-btn-teal {
  background: var(--skin-gradient);
  border-color: rgba(1,169,157,0.05);
}
.skin-btn-teal:hover { filter: brightness(1.08); box-shadow: inset 0 -2px 15px rgba(0,0,0,0.2), inset 0 2px 15px rgba(1,169,157,0.65), 0 0 17px rgba(1,169,157,0.34); }

.skin-btn-glass {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.05);
  box-shadow: inset 0 -2px 15px rgba(0,0,0,0.2), inset 0 2px 15px rgba(255,255,255,0.4);
}
.skin-btn-glass:hover { background: rgba(255,255,255,0.32); }

.skin-btn-white {
  background: var(--skin-white);
  color: var(--skin-teal);
  box-shadow: none;
  border-color: transparent;
}
.skin-btn-white:hover { background: var(--skin-teal-10); }

/* Teal-text glass outline — for light-background pages (no dark hero underneath).
   .skin-btn-glass is white-text and assumes a dark backdrop; this is the light-page equivalent. */
.skin-btn-outline {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--skin-teal);
  color: var(--skin-teal);
  box-shadow: inset 0 -2px 15px rgba(0,0,0,0.2), inset 0 2px 15px rgba(255,255,255,0.4);
}
.skin-btn-outline:hover { background: rgba(255,255,255,0.4); }

/* Small variant — used on news cards / office tabs CTA */
.skin-btn-sm {
  padding: 14px 18px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.skin-btn:disabled,
.skin-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ───── Accordion (shared: pillars + office tabs + product tabs) ───── */
.skin-accordion-item { transition: max-height 0.4s ease, border-radius 0.4s ease; overflow: hidden; }

/* ───── Breadcrumbs (marcoeco_render_breadcrumbs(), inc/breadcrumbs.php) ───── */
.site-breadcrumbs { display:block; font-size:.9em; margin:20px 0; }
.breadcrumb-list { display:flex; align-items:center; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.breadcrumb-item { display:inline-flex; align-items:center; gap:8px; }
.breadcrumb-item:not(:first-child)::before { content:"/"; opacity:.5; }
.breadcrumb-item a:hover { text-decoration:underline; }

/* ───── Generic (non-slice) page furniture — index.php/page.php/single.php
   fallback templates only. Not part of the Macro Eco branded module set. ───── */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

.content-section { padding:64px 0; }
.content-section.cream { background:var(--skin-teal-10); }
.content-section.pale { background:var(--skin-grey-5); }
.section-label { color:var(--skin-teal); text-transform:uppercase; letter-spacing:1px; font-weight:600; font-size:0.9em; text-align:center; margin-bottom:8px; }
.section-heading { text-align:center; font-size:2em; margin-bottom:16px; }
.section-text { text-align:center; max-width:720px; margin:0 auto 40px; color:var(--skin-dark); }

.btn { display:inline-block; padding:12px 26px; border-radius:var(--radius); font-weight:600; text-decoration:none; text-align:center; border:2px solid transparent; transition:transform .2s ease, box-shadow .2s ease; font-family: var(--font-body); }
.btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-primary { background:var(--skin-teal); color:var(--skin-white); }
.btn-accent { background:var(--skin-gradient); color:var(--skin-white); }
.btn-outline { background:transparent; border-color:var(--skin-teal); color:var(--skin-teal); }

.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.post-card { display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--skin-white); border:1px solid var(--skin-grey-20); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.post-card-img-wrap img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.post-card-body { padding:20px; }
.post-card-meta { color:var(--skin-dark); font-size:.85em; }
.post-card-body h3 { margin:8px 0; font-size:1.15em; }
.marcoeco-pagination { margin-top:40px; text-align:center; }

.single-post-header { text-align:center; margin-bottom:32px; }
.single-post-thumb { margin-bottom:32px; }
.single-post-thumb img { border-radius:var(--radius); }
.single-post-content { max-width:760px; margin:0 auto; }

/* ───── Responsive heading scale (base tier; per-breakpoint overrides in responsive.css) ───── */
@media (max-width: 1024px) {
  .post-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 767.98px) {
  h1, .h1 { font-size: 40px; line-height: 46px; }
  h2, .h2 { font-size: 32px; line-height: 40px; }
  h3, .h3 { font-size: 28px; line-height: 36px; }
  .post-grid { grid-template-columns:1fr; }
  .section-heading { font-size:1.5em; }
}
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 30px; line-height: 36px; }
  h2, .h2 { font-size: 24px; line-height: 32px; }
}