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

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

/* Hero wrapper: span viewport, center content */
#home .rfid-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 .rfid-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 .rfid-hero-image img { width: 50%; }
}

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

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

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



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

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

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

.rfid-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 */
.rfid-two-col__left {
  display: flex;
  align-items: flex-start;   /* vertical top */
  justify-content: center;   /* horizontal center */
}

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

/* Flip to stacked layout at 1200px */
@media (max-width: 1200px) {
  .rfid-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 
   ========================================= */
#rfid-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)
   ========================================= */

#rfid-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,
#rfid-easy .intro-devices {
  font-size: var(--fs-2);
  font-weight: 400;
}

@media (max-width: 1200px) {
  #intro .intro-devices,
  #rfid-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 .tick-features {
  font-size: var(--fs-2);
  font-weight: 400;
}

@media (max-width: 1200px) {
  #intro .tick-features {
    font-size: var(--fs-1) !important;
  }
}

/* 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 Features Grid
   Desktop: 4 cols (15/35/15/35) x 3 rows
   Tablet↓: 2 cols (25/75) x 6 rows
   Row gap: 20px
   ========================================= */

#features .rfid-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 .rfid-feat {
  display: block;     /* prevents inherited flex centering */
  align-self: start;  /* top align the cell itself */
}

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

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

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

/* Features grid — mobile font size adjustment */

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

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

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

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

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

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

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

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

  #features .rfid-features-grid > :nth-child(11) { order: 11; } /* 11 */
  #features .rfid-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;
}


/* =========================================
   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);
}