/* ============================================================
   Don Adán Coffee — Reusable component styles
   ------------------------------------------------------------
   HOW TO USE: add the class name into a Divi module's
   "CSS Class" field (Advanced tab), or paste the matching HTML
   into a Code module. Every value pulls from 01-tokens.css.

   These classes recreate the prototype's bespoke components so
   you don't rebuild their styling by hand for each instance.
   ============================================================ */

/* ---- Section rhythm helpers (add to Divi Section CSS Class) ---- */
.da-section        { padding-block: var(--section-pad-y); }
.da-section--tight { padding-block: var(--section-pad-y-sm); }
.da-section--alt   { background: var(--bg-alt); }
.da-section--dark  { background: var(--bg-inverse); color: var(--on-dark-2); }
.da-container      { max-width: var(--container); margin-inline: auto; }
.da-measure        { max-width: 760px; margin-inline: auto; }

/* ---- Eyebrow / label ---- */
.da-eyebrow {
  display: inline-block;
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--eyebrow);
  font-weight: var(--fw-book);
  margin-bottom: var(--sp-4); /* 16px — matches library Eyebrow spec */
}
/* Sizing aligned to the Divi "Eyebrow" type preset (Library §0.5): 12px / 0.18em */
.da-eyebrow { font-size: 0.75rem; letter-spacing: 0.18em; }
.da-section--dark .da-eyebrow,
.da-eyebrow--on-dark { color: var(--accent-light); }

/* ---- Lead / intro paragraph (hero sub, page ledes) ---- */
.da-lead {
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: var(--text-body);
  max-width: 52ch;
}
.da-section--dark .da-lead,
.da-lead--on-dark { color: var(--on-dark-2); }

/* ---- Buttons (variants mirror the prototype Button component) ---- */
.da-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-weight: var(--fw-book);
  font-size: var(--t-sm); letter-spacing: var(--ls-wide);
  text-transform: uppercase; text-decoration: none;
  padding: var(--sp-3) var(--sp-6); border: 1px solid transparent;
  border-radius: var(--radius-0); cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.da-btn--black    { background: var(--black); color: #fff; }
.da-btn--black:hover { background: var(--gray-800); color:#fff; }
.da-btn--white    { background: #fff; color: var(--black); }
.da-btn--white:hover { background: var(--off-white); }
.da-btn--accent   { background: var(--accent); color: #fff; }
.da-btn--accent:hover { background: var(--accent-dark); color:#fff; }
.da-btn--ghost    { background: transparent; color:#fff; border-color: var(--on-dark-line); }
.da-btn--ghost:hover { border-color:#fff; }
.da-btn--outline  { background: transparent; color: var(--black); border-color: var(--black); }
.da-btn--outline:hover { background: var(--black); color:#fff; }
.da-btn--outline-w{ background: transparent; color:#fff; border-color: rgba(255,255,255,0.4); }
.da-btn--outline-w:hover { border-color:#fff; }
.da-btn__arrow::after { content: "→"; }

/* ============================================================
   LEGACY component classes (from the earlier Code-module approach).
   Superseded by the Divi-native builds in the Component Build Library
   (C4 trust bar, C5 pathways, C7 timeline strip, C17 CTA band, etc.).
   Retained, unused — safe to delete once native builds are confirmed.
   da-split / da-grid-* remain useful as generic layout utilities.
   ============================================================ */

/* ---- Tag / badge ---- */
.da-tag {
  display:inline-block; font-size: var(--t-caption);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--gray-200);
  color: var(--text-body);
}
.da-tag--accent { background: var(--accent); color:#fff; border-color: var(--accent); }
.da-tag--black  { background: var(--black); color:#fff; border-color: var(--black); }

/* ---- Spec grid — table typed inside a Text module (Library C9 variant B) ----
   Put class da-specgrid on the Text module, type a plain 2-col table in the
   WYSIWYG. Client edits it as a normal table; styling comes from here. */
.da-specgrid table { width:100%; border-collapse: collapse; }
.da-specgrid td {
  padding:12px 0; border-bottom:1px solid var(--gray-100);
  font-size:15px; color: var(--black);
}
.da-specgrid td:first-child {
  width:45%; font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--gray-400);
}
.da-section--dark .da-specgrid td { border-color: var(--on-dark-line); color:#fff; }
.da-section--dark .da-specgrid td:first-child { color: var(--on-dark-3); }

/* ---- Trust bar (black strip of credential pills) ---- */
.da-trustbar {
  background: var(--black); color: var(--on-dark-2);
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: var(--sp-6); padding: var(--sp-4) var(--sp-6);
  font-size: var(--t-xs); letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.da-trustbar span { position:relative; }
.da-trustbar span + span::before {
  content:"·"; color: var(--accent-light); margin-right: var(--sp-6);
  position:absolute; left: calc(-1 * var(--sp-6) / 2 - 0.3em);
}

/* ---- Pathway cards (homepage 3-up) ---- */
.da-pathways { display:grid; grid-template-columns: repeat(3,1fr); }
.da-pathway {
  position:relative; min-height: 60vh; overflow:hidden;
  display:flex; align-items:flex-end; color:#fff; cursor:pointer;
}
.da-pathway__bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.da-pathway:hover .da-pathway__bg { transform: scale(1.05); }
.da-pathway__scrim { position:absolute; inset:0; background: var(--scrim-card); }
.da-pathway__body { position:relative; padding: var(--sp-8); }
.da-pathway__sub {
  font-size: var(--t-caption); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--accent-light); margin-bottom: var(--sp-2);
}
.da-pathway h2 { font-size: var(--t-h2); line-height: var(--lh-tight); margin: 0 0 var(--sp-3); }
.da-pathway__desc { color: var(--on-dark-2); font-size: var(--t-sm); margin-bottom: var(--sp-4); }
.da-pathway__link { color:#fff; font-size: var(--t-sm); letter-spacing: var(--ls-wide); text-transform: uppercase; }
@media (max-width: 980px){ .da-pathways{ grid-template-columns:1fr; } .da-pathway{ min-height: 46vh; } }

/* ---- Timeline strip (4-up numbers) ---- */
.da-tl-strip { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-grid); }
.da-tl-strip .tl-label { font-size: var(--t-caption); letter-spacing: var(--ls-label); text-transform:uppercase; color: var(--accent); margin-bottom: var(--sp-2); }
.da-tl-strip .tl-num   { font-size: var(--t-h1); line-height: var(--lh-tight); color: var(--text-strong); margin-bottom: var(--sp-3); }
.da-tl-strip .tl-num strong { font-weight: var(--fw-heavy); }
.da-tl-strip .tl-desc  { font-size: var(--t-sm); color: var(--text-body); line-height: var(--lh-body); }
@media (max-width: 880px){ .da-tl-strip{ grid-template-columns: repeat(2,1fr); } }

/* ---- Editorial vertical timeline (Our Story) ---- */
.da-timeline { position:relative; max-width: 820px; margin-inline:auto; }
.da-timeline::before { content:""; position:absolute; left: 120px; top:0; bottom:0; width:1px; background: var(--gray-200); }
.da-timeline__row { position:relative; display:grid; grid-template-columns: 120px 1fr; gap: var(--sp-8); padding-bottom: var(--sp-10); }
.da-timeline__date { text-align:right; font-size: var(--t-sm); color: var(--accent); letter-spacing: var(--ls-label); text-transform:uppercase; padding-top: 2px; }
.da-timeline__row::before { content:""; position:absolute; left: 115px; top: 6px; width: 11px; height: 11px; border-radius: var(--radius-pill); background: var(--accent); box-shadow: 0 0 0 4px var(--white); }
.da-timeline__body h3 { font-size: var(--t-h3); margin: 0 0 var(--sp-2); }
.da-timeline__body p  { color: var(--text-body); line-height: var(--lh-body); }
@media (max-width: 680px){
  .da-timeline::before{ left: 5px; }
  .da-timeline__row{ grid-template-columns: 1fr; padding-left: var(--sp-6); }
  .da-timeline__row::before{ left:0; }
  .da-timeline__date{ text-align:left; margin-bottom: var(--sp-2); }
}

/* ---- CTA band (dark, reused across pages) ---- */
.da-cta-band { background: var(--black); color:#fff; text-align:center; padding-block: var(--sp-16); }
.da-cta-band h2 { font-size: var(--t-h1); margin: 0 auto var(--sp-4); max-width: 20ch; }
.da-cta-band h2 strong { font-weight: var(--fw-heavy); }
.da-cta-band p { color: var(--on-dark-2); max-width: 52ch; margin: 0 auto var(--sp-6); }
.da-cta-actions { display:flex; flex-wrap:wrap; gap: var(--sp-3); justify-content:center; }
.da-email-row { display:flex; max-width: 420px; margin: 0 auto var(--sp-4); }
.da-email-row input { flex:1; padding: var(--sp-3) var(--sp-4); border:1px solid rgba(255,255,255,0.3); background:transparent; color:#fff; }
.da-email-row button { padding: var(--sp-3) var(--sp-5); background: var(--accent); color:#fff; border:none; cursor:pointer; text-transform:uppercase; letter-spacing: var(--ls-wide); }

/* ---- Section header row (label + "View all" link) ---- */
.da-sh-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: var(--sp-8); gap: var(--sp-4); flex-wrap:wrap; }
.da-sh-row h2 { font-size: var(--t-h2); margin: var(--sp-1) 0 0; }
.da-link-text { color: var(--text-strong); font-size: var(--t-sm); letter-spacing: var(--ls-wide); text-transform:uppercase; text-decoration:none; }
.da-link-text:hover { color: var(--accent); }

/* ---- Hero scrim helper (drop over a Divi fullwidth header bg image) ---- */
.da-hero-scrim::before { content:""; position:absolute; inset:0; background: var(--scrim-hero); z-index:1; }
.da-hero-scrim > .et_pb_fullwidth_header_container,
.da-hero-scrim .header-content-container { position:relative; z-index:2; }

/* ============================================================
   Divi-native component CSS — matches Component Build Library §2.
   These are the ONLY component classes the Divi-native builds need;
   the fuller component classes further down are LEGACY (superseded
   by native Divi builds — see Library). Kept, unused, safe to remove.
   ============================================================ */

/* C5 pathway cards: clip the hover zoom on each column */
.da-clip { overflow: hidden; }

/* C8 editorial timeline: the dot on the content column of each row */
.da-tl-dot { position: relative; }
.da-tl-dot::before {
  content:""; position:absolute; left:-5px; top:8px;
  width:9px; height:9px; background: var(--accent);
}
@media (max-width: 980px){ .da-tl-dot::before { display:none; } }

/* C13 filter bar: active category state */
.da-filterbar .current-menu-item > a,
.da-filterbar .current-cat > a {
  color: var(--accent);
  box-shadow: inset 0 -1px 0 var(--accent);
}

/* ---- Split layout helper (photo one side / text other) ---- */
.da-split { display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: var(--gap-grid-wide); }
.da-split--reverse { direction: rtl; }
.da-split--reverse > * { direction: ltr; }
@media (max-width: 900px){ .da-split{ grid-template-columns:1fr; } }

/* ---- Card grids ---- */
.da-grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--gap-grid); }
.da-grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap-grid); }
.da-grid-4 { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-grid); }
@media (max-width: 980px){ .da-grid-3,.da-grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .da-grid-2,.da-grid-3,.da-grid-4{ grid-template-columns:1fr; } }

/* ============================================================
   Divi / WooCommerce brand overrides
   Keep these light — only where Divi defaults fight the brand.
   ============================================================ */

/* Square corners everywhere (brand is square) */
.et_pb_button, .et_pb_promo_button, .woocommerce a.button,
.woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit { border-radius: var(--radius-0) !important; }

/* Divi buttons -> brand button look when given class da-btn-divi */
.da-btn-divi.et_pb_button {
  background: var(--accent) !important; color:#fff !important;
  border: 1px solid var(--accent) !important; text-transform: uppercase;
  letter-spacing: var(--ls-wide); padding: var(--sp-3) var(--sp-6) !important;
}
.da-btn-divi.et_pb_button:hover { background: var(--accent-dark) !important; }

/* WooCommerce price + add-to-cart in brand accent */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price { color: var(--text-strong); }
.woocommerce a.button.add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
  background: var(--black) !important; color:#fff !important;
  text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover { background: var(--accent) !important; }

/* Body defaults */
body { color: var(--text-body); background: var(--bg-page); line-height: var(--lh-body); }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }