/* =========================================
   EX Table
   ========================================= */


#ex-compare {
  color: var(--light-1);
}

/* Wrapper: no horizontal scrolling */
#ex-compare .ex-compare-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: visible;
  border: 1px solid var(--dark-4);
  border-radius: 8px;
}

/* Table base: RFID typography + spacing */
#ex-compare .ex-compare-table {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-0);
  white-space: normal;
}

/* Cells control row rhythm */
#ex-compare .ex-compare-table th,
#ex-compare .ex-compare-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--dark-4);
  text-align: left;
  vertical-align: top;
  font-weight: 300;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Header row (RFID style) */
#ex-compare .ex-compare-table thead th {
  background-color: #000;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* Alternating rows + hover */
#ex-compare .ex-compare-table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

#ex-compare .ex-compare-table tbody tr:hover {
  background-color: rgba(192, 181, 164, 0.06);
}

/* Desktop default: 35% / 65% */
#ex-compare .ex-compare-table th:nth-child(1),
#ex-compare .ex-compare-table td:nth-child(1) {
  width: 50%;
}

#ex-compare .ex-compare-table th:nth-child(2),
#ex-compare .ex-compare-table td:nth-child(2) {
  width: 50%;
}

/* Feature title wrapper */
#ex-compare .col1-inner {
  font-weight: 300;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Smoothly move towards 50/50 */
@media (max-width: 1200px) {
  #ex-compare .ex-compare-table th:nth-child(1),
  #ex-compare .ex-compare-table td:nth-child(1) {
    width: 50%;
  }

  #ex-compare .ex-compare-table th:nth-child(2),
  #ex-compare .ex-compare-table td:nth-child(2) {
    width: 50%;
  }
}

@media (max-width: 900px) {
  #ex-compare .ex-compare-table th:nth-child(1),
  #ex-compare .ex-compare-table td:nth-child(1) {
    width: 50%;
    padding-left: 8px;
    padding-right: 8px;
  }

  #ex-compare .ex-compare-table th:nth-child(2),
  #ex-compare .ex-compare-table td:nth-child(2) {
    width: 50%;
  }
}

/* Mobile: 50 / 50 */
@media (max-width: 600px) {
  #ex-compare .ex-compare-table th:nth-child(1),
  #ex-compare .ex-compare-table td:nth-child(1),
  #ex-compare .ex-compare-table th:nth-child(2),
  #ex-compare .ex-compare-table td:nth-child(2) {
    width: 50%;
  }
}

/* Disclaimer sits under the table and matches table width */
#ex-compare .ex-compare-disclaimer {
  max-width: 1200px;          /* same as wrapper */
  margin: 10px auto 0 auto;   /* centered, small gap above */
  padding: 10px 16px 0 16px;  /* light inset */
  text-align: justify;
  opacity: 0.85;
  line-height: 1.6;
}

/* On small screens, justify can look weird — optional */
@media (max-width: 600px) {
  #ex-compare .ex-compare-disclaimer {
    text-align: left;
  }
}

/* Match table disclaimer typography in card view */
#ex-compare .ex-compare-card-footer {
  font-size: var(--fs-1);
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
}



/* =========================================
   EX compare footer — table view (no borders)
   ========================================= */

#ex-compare .ex-compare-footer td {
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent;
}

#ex-compare .ex-compare-footer {
  border-bottom: none !important;
}


/* ==========================================================
   EX mobile cards
   ========================================================== */

/* Cards container (JS toggles display) */
#ex-compare .ex-compare-cards {
  display: none;
  max-width: 900px;
  margin: 0 auto;
  gap: 14px;
}

/* Card */
#ex-compare .ex-card {
  border: 1px solid var(--dark-4);
  border-radius: 10px;
  background: #000;
  padding: 14px 16px;
}

/* EX card title */
#ex-compare .rfid-card-title {
  font-weight: 700 !important;
  font-size: var(--fs-1) !important;
  line-height: 1.25 !important;
  margin-bottom: 10px;
}

/* EX card title — force match */
#ex-compare .ex-card .ex-card-title {
  display: block;
  width: 100%;
  font-weight: 700 !important;
  font-size: var(--fs-1) !important;
  line-height: 1.25 !important;
  margin-bottom: 10px;
}

/* Row in card */
#ex-compare .ex-card-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 10px;
}

#ex-compare .ex-card-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* Label + value */
#ex-compare .ex-card-label {
  font-weight: 600;
  opacity: 0.95;
  color: #c0b5a4;
}

#ex-compare .ex-card-value {
  padding-left: 10px;
  font-weight: 300;
}

#ex-compare .ex-card-value br {
  content: "";
  display: block;
  margin-bottom: 6px;
  padding-left: 10px;
}

/* If col1-inner ever appears inside a card title, don’t let it override typography */
#ex-compare .ex-card-title .col1-inner {
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  width: auto !important;
  max-width: none !important;
}



/* =========================================
   Dropdown styling
   ========================================= */

#ex-compare .ex-view-select {
  width: 355px;
  max-width: calc(100% - 2rem);
  margin: 0 auto 1.25rem auto;
}

#ex-compare .ex-select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--dark-4);
  color: var(--light-1);
  border: 1px solid var(--brown-1);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}


/* =========================================
   Home EX Image Size
   ========================================= */

/* Ensure slide is a positioning context */
#home .slide-wrap {
  position: relative;
}

/* Hero wrapper: span viewport, center content */
#home .ex-hero-image {
  position: relative;
  z-index: 5;
  width: 100vw;                 /* critical for % scaling */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: 20px;
}

/* Image scaling + opacity fix */
#home .ex-hero-image img {
  width: 30%;
  max-width: 600px;
  height: auto;

  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Responsive down-scaling */
@media (max-width: 1600px) {
  #home .ex-hero-image img { width: 50%; }
}

@media (max-width: 1200px) {
  #home .ex-hero-image img { width: 50%; }
}

@media (max-width: 900px) {
  #home .ex-hero-image img { width: 50%; }
}

@media (max-width: 600px) {
  #home .ex-hero-image img { width: 60%; }
}



/* =========================================
   When layout flips (<1200px), shrink image
   ========================================= */

@media (max-width: 1199.98px) {
  .ex-two-col__left img {
    width: 50% !important;   /* reduce image to 50% */
    margin: 0 auto;          /* keep centered */
    display: block;
	transition: width 0.3s ease;
  }
}


/* =========================================
   Contact Form deep-link (footer -> accordion)
   ========================================= */

/* So the accordion header doesn't get hidden under the fixed toolbar */
#contact-form {
  scroll-margin-top: calc(var(--toolbar-h, 80px) + 20px);
}

/* =========================================
   EX: 2-column → stacked layout at 1200px
   ========================================= */

.ex-two-col {
  display: grid;
  grid-template-columns: 1fr 2fr; /* desktop: 2 cols, 1 row */
  gap: 20px;
  align-items: start;
  width: 100%;
  padding-bottom: 20px;
}

/* Left column controls alignment */
.ex-two-col__left {
  display: flex;
  align-items: flex-start;   /* vertical top */
  justify-content: center;   /* horizontal center */
}

/* Image sizing only */
.ex-two-col__left img {
  max-width: 100%;
  height: auto;
}

/* Flip to stacked layout at 1200px */
@media (max-width: 1200px) {
  .ex-two-col {
    grid-template-columns: 1fr;  /* 1 column */
    grid-template-rows: auto auto; /* 2 rows */
    gap: 40px; /* 20px space between stacked rows */
  }
}


/* =========================================
   Section Title - Text Overlay 
   ========================================= */
#ex-mql .text-absolute .fs-10,
#uses .text-absolute .fs-10 {
  display: inline-block;
  margin-top: clamp(20px, 6vw, 80px);
}

/* =========================================
   Center overlay text inside its section
   (without breaking global positioning)
   ========================================= */

#ex-mql .text-absolute,
#uses .text-absolute {
  text-align: center;
}

#ex-mql .text-absolute h3,
#uses .text-absolute h3 {
  margin-left: 0 !important; /* neutralize offset-2 */
}


/* =========================================
   Intro Devices Text
   ========================================= */

#intro .intro-devices,
#ex-easy .intro-devices {
  font-size: var(--fs-2);
  font-weight: 400;
}

@media (max-width: 1200px) {
  #intro .intro-devices,
  #ex-easy .intro-devices {
    font-size: var(--fs-1) !important;
  }
}


/* =========================================
   List styles: tick vs dot
   ========================================= */

#intro ul {
  list-style: none;   /* remove browser bullets */
  padding-left: 0;
}

/* Base list item spacing */
#intro ul li {
  position: relative;
  padding-left: 36px; /* space for icon */
  line-height: 1.5;      /* text line spacing */
  margin-bottom: 12px;   /* space between list items */
}

/* Tick icon list item */
#intro ul li.li-tick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 22px;
  height: 22px;
  background-image: url("../../catmacs/tick-2-gold.png");
  background-size: contain;
  background-repeat: no-repeat;
}

#intro ul li.li-tick-2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 20px;
  height: 20px;
  background-image: url("../../catmacs/tick-3-gold.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Optional: dot-style list item (if you want a custom dot) */
#intro ul li.li-dot::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
  font-size: 1.2em;
  line-height: 1;
}


/* ==============================================
   EX EASY GRID 
   ============================================== */

		#ex-easy .ex-easy-grid {
		  display: grid;
		  grid-template-columns: repeat(6, minmax(0, 1fr));  /* 6 equal columns */
		  gap: 1.5rem;
		  align-items: stretch;
		  justify-items: center;
		}

		#ex-easy .ex-easy-item {
		  text-align: center;
		  /* Optional styling: */
		  /* padding: 1rem; */
		  /* border: 1px solid rgba(255,255,255,0.08); */
		}

		/* < 992px 3 columns (2 rows, 3 cols = 2x3) */
		@media (max-width: 992px) {
		  #ex-easy .ex-easy-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		  }
		}

		/* < 768px 2 columns (3 rows, 2 cols = 3x2) */
		@media (max-width: 768px) {
		  #ex-easy .ex-easy-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		  }
		}

/* =========================================
   EX Features Grid
   Desktop: 4 cols (15/35/15/35) x 3 rows
   Tablet↓: 2 cols (25/75) x 6 rows
   Row gap: 20px
   ========================================= */

#features .ex-features-grid {
  display: grid;
  grid-template-columns: 15% 35% 15% 35%;
  column-gap: 0;        /* only row padding requested */
  row-gap: 40px;        /* padding between rows */
  align-items: center;
}

#features .ex-feat {
  display: block;     /* prevents inherited flex centering */
  align-self: start;  /* top align the cell itself */
}

/* Alignment rules */
#features .ex-feat.sm {
  text-align: center;
}

#features .ex-feat.lg {
  text-align: left;
  font-size: var(--fs-2);
  font-weight: 300;
}

#features .ex-features-grid p {
  margin: 0;
}

/* Features grid — mobile font size adjustment */

@media (max-width: 1200px) {
  #features .ex-features-grid .ex-feat.lg {
    font-size: var(--fs-1) !important;
  }
}

/* Tablet and below: reorder into 2-col / 6-row as specified */
@media (max-width: 1200px) {
  #features .ex-features-grid {
    grid-template-columns: 30% 70%;
  }

  /* Reorder items:
     1/2
     5/6
     9/10
     3/4
     7/8
     11/12
  */

  #features .ex-features-grid > :nth-child(1)  { order: 1; }  /* 1 */
  #features .ex-features-grid > :nth-child(2)  { order: 2; }  /* 2 */

  #features .ex-features-grid > :nth-child(5)  { order: 3; }  /* 5 */
  #features .ex-features-grid > :nth-child(6)  { order: 4; }  /* 6 */

  #features .ex-features-grid > :nth-child(9)  { order: 5; }  /* 9 */
  #features .ex-features-grid > :nth-child(10) { order: 6; }  /* 10 */

  #features .ex-features-grid > :nth-child(3)  { order: 7; }  /* 3 */
  #features .ex-features-grid > :nth-child(4)  { order: 8; }  /* 4 */

  #features .ex-features-grid > :nth-child(7)  { order: 9; }  /* 7 */
  #features .ex-features-grid > :nth-child(8)  { order: 10; } /* 8 */

  #features .ex-features-grid > :nth-child(11) { order: 11; } /* 11 */
  #features .ex-features-grid > :nth-child(12) { order: 12; } /* 12 */
}



/* =========================================
   Remove focus/active outline from Contact Form jump link
   ========================================= */

#contact a.js-open-contact-form,
#contact a.js-open-contact-form:focus,
#contact a.js-open-contact-form:active {
  outline: none;
  box-shadow: none;
}

/* Optional: only remove focus when triggered by mouse */
#contact a.js-open-contact-form:focus:not(:focus-visible) {
  outline: none;
}

#contact a.js-open-contact-form {
  -webkit-tap-highlight-color: transparent;
}