/*
Theme Name: Technical Content Links
Theme URI: https://technicalcontentlinks.com.au
Template: hello-elementor
Author: Technical Content Links
Description: Hello Elementor child theme carrying the Technical Content Links design system. Pages are built in Elementor Pro.
Version: 1.0.0
Text Domain: tcl-child
*/

/* ==========================================================================
   Design tokens — enter these same values into Elementor > Site Settings
   > Global Colors / Global Fonts so anything built in the editor matches.
   ========================================================================== */
:root {
  --color-ink: #12203A;
  --color-ink-soft: #1B2E4F;
  --color-paper: #F7F7F5;
  --color-paper-alt: #EEEDE8;
  --color-line: #DEE1DC;
  --color-accent: #1FB6A7;
  --color-accent-dark: #148377;
  --color-slate: #2C3444;
  --color-slate-soft: #6B7280;

  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Override Elementor's own Kit variables site-wide so every widget
     (headings, buttons, text) automatically uses our brand instead of
     Elementor's factory defaults — no !important battles needed. */
  --e-global-color-primary: var(--color-ink);
  --e-global-color-secondary: var(--color-slate);
  --e-global-color-text: var(--color-slate-soft);
  --e-global-color-accent: var(--color-accent);
  --e-global-typography-primary-font-family: var(--font-display);
  --e-global-typography-secondary-font-family: var(--font-display);
  --e-global-typography-text-font-family: var(--font-body);
  --e-global-typography-accent-font-family: var(--font-body);
}

body { background: #FFFFFF; color: var(--color-slate); font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-ink); letter-spacing: -0.01em; }
h1 a, h2 a, h3 a, h4 a { color: inherit; text-decoration: none; }

/* Eyebrow label — drop class="eyebrow" on a Text widget in Elementor */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--color-accent); }

/* Utility button skin — apply as an extra CSS class on Elementor Button widgets */
.btn-accent { background: var(--color-accent) !important; color: var(--color-ink) !important; }
.btn-accent:hover { background: var(--color-accent-dark) !important; color: #fff !important; }

/* ==========================================================================
   Homepage-specific styling — scoped to the front page only, applies
   automatically to the section structure without needing per-widget classes.
   ========================================================================== */
body.page-id-6 .elementor-top-section {
  padding: 56px 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
body.page-id-6 .elementor-top-section:first-of-type {
  padding-top: 72px;
  padding-bottom: 40px;
}
body.page-id-6 h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
body.page-id-6 h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 10px;
}
body.page-id-6 h3, body.page-id-6 h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 6px;
}
body.page-id-6 p {
  color: #6B7280;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 14px;
}
body.page-id-6 .elementor-column {
  padding: 0 16px;
}

/* Two-column intro text blocks — card treatment with numbered labels,
   matching the service card style, so it doesn't read as a wall of text. */
body.page-id-6 .elementor-top-section:nth-of-type(3) .elementor-column,
body.page-id-6 .elementor-top-section:nth-of-type(4) .elementor-column {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 6px 18px rgba(18, 32, 58, 0.06);
  position: relative;
}
body.page-id-6 .elementor-top-section:nth-of-type(3) .elementor-column::before,
body.page-id-6 .elementor-top-section:nth-of-type(4) .elementor-column::before {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent-dark);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 10px;
}
body.page-id-6 .elementor-top-section:nth-of-type(3) .elementor-column:nth-of-type(1)::before { content: "01"; }
body.page-id-6 .elementor-top-section:nth-of-type(3) .elementor-column:nth-of-type(2)::before { content: "02"; }
body.page-id-6 .elementor-top-section:nth-of-type(4) .elementor-column:nth-of-type(1)::before { content: "03"; }
body.page-id-6 .elementor-top-section:nth-of-type(4) .elementor-column:nth-of-type(2)::before { content: "04"; }
body.page-id-6 .elementor-top-section:nth-of-type(3),
body.page-id-6 .elementor-top-section:nth-of-type(4) {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Main body paragraph (right after the hero) — constrain to a comfortable
   reading width with an accent border, so it doesn't read as a text wall */
body.page-id-6 .elementor-top-section:nth-of-type(2) p {
  max-width: 68ch;
  padding-left: 20px;
  border-left: 3px solid var(--color-accent);
  font-size: 15px;
}

/* Contact section — the last section on the page, styled as a dark CTA band */
body.page-id-6 .elementor-top-section:last-of-type {
  background: var(--color-ink);
  border-radius: 14px;
  padding: 40px;
  margin-top: 24px;
  margin-bottom: 40px;
}
body.page-id-6 .elementor-top-section:last-of-type h2,
body.page-id-6 .elementor-top-section:last-of-type h3 {
  color: #fff;
}

/* Team member section — second-to-last */
body.page-id-6 .elementor-top-section:nth-last-of-type(2) {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ========================================================================== */
.tcl-card {
  background: #fff;
  border: none;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(18, 32, 58, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tcl-card:hover { box-shadow: 0 10px 26px rgba(18, 32, 58, 0.1); transform: translateY(-3px); }

/* Contact/CTA band — apply to a Container widget */
.tcl-cta-band {
  background: var(--color-ink);
  border-radius: 14px;
  padding: 40px;
}

/* Circular initials avatar — apply to a Text widget for team members */
.tcl-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}

/* Stat number style — apply to a Text/Heading widget */
.tcl-stat-num {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-ink);
}

/* Signature link-network graphic wrapper */
.link-network .lnk-line {
  stroke: var(--color-accent);
  stroke-width: 1.4;
  stroke-dasharray: 6 260;
  opacity: 0.55;
  animation: lnk-draw 6s linear infinite;
}
.link-network .lnk-node { fill: var(--color-ink); }
.link-network .lnk-node--accent { fill: var(--color-accent); }
.link-network .lnk-node--pulse { animation: lnk-pulse 3.2s ease-in-out infinite; transform-origin: center; }
@keyframes lnk-draw { to { stroke-dashoffset: -266; } }
@keyframes lnk-pulse { 0%, 100% { r: 5; opacity: 1; } 50% { r: 8; opacity: 0.65; } }

@media (prefers-reduced-motion: reduce) {
  .link-network .lnk-line, .link-network .lnk-node--pulse { animation: none; }
}

/* Hero collage — overlapping color blocks matching the accepted mockup */
.tcl-hero-collage {
  position: relative;
  height: 280px;
  width: 100%;
}
.tcl-hero-collage__block {
  position: absolute;
  border-radius: 12px;
}
.tcl-hero-collage__block--card {
  top: 0; left: 20px;
  width: 200px; height: 140px;
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: 0 12px 30px rgba(18, 32, 58, 0.12);
}
.tcl-hero-collage__block--ink {
  top: 60px; left: 130px;
  width: 170px; height: 160px;
  background: var(--color-ink);
  box-shadow: 0 16px 34px rgba(18, 32, 58, 0.18);
}
.tcl-hero-collage__block--accent {
  top: 150px; left: 0;
  width: 130px; height: 100px;
  background: var(--color-accent);
  box-shadow: 0 10px 24px rgba(31, 182, 167, 0.25);
}

/* Service card styling used elsewhere in Elementor content via .tcl-card */
.tcl-service-features { padding-left: 0; list-style: none; }
.tcl-service-features li { padding-left: 1.5em; position: relative; margin-bottom: 8px; }
.tcl-service-features li::before {
  content: "✓"; position: absolute; left: 0; color: var(--color-accent-dark); font-weight: 600;
}

/* ==========================================================================
   Homepage: newer container-based (.e-con) sections — services card,
   FAQ accordion, contact form. Separate from the .elementor-top-section
   rules above since these widgets use Elementor's newer atomic system.
   (Width constraint removed — Elementor's own Content Width setting on
   each container handles this natively; overriding it was fighting that.)
   ========================================================================== */

/* Service icon-list (features) — card treatment matching the mockup */
body.page-id-6 .e-con:has(.elementor-widget-icon-list) {
  background: var(--color-paper-alt);
  border-radius: 16px;
}
body.page-id-6 .elementor-widget-icon-list {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 6px 18px rgba(18, 32, 58, 0.06);
}
body.page-id-6 .elementor-widget-icon-list .elementor-icon-list-icon svg {
  fill: var(--color-accent-dark);
  width: 16px;
  height: 16px;
}
body.page-id-6 .elementor-icon-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
body.page-id-6 .elementor-widget-icon-list .elementor-icon-list-text {
  font-size: 14px;
  color: var(--color-slate-soft);
}
body.page-id-6 .elementor-icon-list-items {
  padding: 4px 0;
  border-top: none;
  border-bottom: none;
  margin: 0;
}

/* "Learn More" button on the service card */
body.page-id-6 .elementor-widget-button .elementor-button {
  background: var(--color-ink);
  color: #fff;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 13px;
}

/* FAQ accordion */
body.page-id-6 .elementor-accordion-item {
  border: none;
  border-bottom: 1px solid var(--color-line);
}
body.page-id-6 .elementor-tab-title {
  padding: 18px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
}
body.page-id-6 .elementor-tab-title .elementor-accordion-icon svg {
  fill: var(--color-accent-dark);
}
body.page-id-6 .elementor-tab-content {
  padding-bottom: 18px;
}

/* Contact section — the whole section (heading + form) as one dark CTA band,
   matching the mockup. Targets the exact section ID since it's known. */
body.page-id-6 .elementor-element-0f85d0f {
  background: var(--color-ink);
  border-radius: 14px;
  padding: 40px;
}
body.page-id-6 .elementor-element-0f85d0f h2 {
  color: #fff;
}
body.page-id-6 .elementor-widget-form {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-top: 20px;
}
body.page-id-6 .elementor-widget-form .elementor-field-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
}
body.page-id-6 .elementor-widget-form .elementor-field {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
}
body.page-id-6 .elementor-widget-form .elementor-field::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
body.page-id-6 .elementor-widget-form .elementor-button {
  background: var(--color-accent);
  color: #04342C;
  border-radius: 8px;
  font-weight: 600;
}

/* Numbered index label — reused across service "included" cards, homepage content blocks, etc. */
.tcl-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-accent-dark);
  display: block;
  margin-bottom: 8px;
}

.tcl-included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tcl-included-card h4 { font-size: 14px; margin: 0 0 6px; }
.tcl-included-card p { font-size: 13px; margin: 0; }

@media (max-width: 860px) {
  .tcl-included-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .tcl-included-grid { grid-template-columns: 1fr; }
}

.tcl-faq-accordion { border-top: 1px solid var(--color-line); }
.tcl-faq-item { border-bottom: 1px solid var(--color-line); }
.tcl-faq-title {
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.tcl-faq-title::-webkit-details-marker { display: none; }
.tcl-faq-title::after {
  content: "+";
  color: var(--color-accent);
  font-size: 16px;
  font-weight: 600;
  margin-left: 12px;
}
.tcl-faq-item[open] .tcl-faq-title::after { content: "\2212"; }
.tcl-faq-body {
  padding: 0 0 16px;
  font-size: 13px;
  color: var(--color-slate-soft);
  line-height: 1.6;
}
.tcl-faq-body p { margin: 0 0 10px; }
.tcl-faq-body p:last-child { margin-bottom: 0; }

/* Hero collage decorative blocks are absolutely-positioned with fixed pixel
   widths (up to left:130px + width:170px = 300px of required space). On
   narrow viewports the collage's own container shrinks well below that,
   so the blocks overflow past the page edge and cause horizontal scroll.
   Hide the decorative collage below tablet width — it's purely an accent,
   not content. */
@media (max-width: 767px) {
  .tcl-hero-collage { display: none; }
}

/* The hero collage's absolutely-positioned blocks (card/ink/accent) all use
   left:0/20/130px -- every offset is rightward from the collage's own anchor
   point, which itself sits at the horizontal CENTER of the right column. With
   no leftward offsets to balance it, the whole composition skews hard right
   and the ink block overflows past the column's right edge. Shift the whole
   group left so it reads as centered instead of right-heavy. */
.tcl-hero-collage {
  transform: translateX(-140px);
}