/*
Theme Name: Clearlog Child
Template: Avada
Version: 1.0.0
Text Domain: clearlog
*/

:root {
  --cl-ink: #12231f;
  --cl-muted: #62736e;
  --cl-line: #dce5df;
  --cl-paper: #fbfcfa;
  --cl-mint: #e7f2ec;
  --cl-accent: #176b59;
  --cl-accent-dark: #0f4d41;
}

/* Keep the Freelancer prebuilt's spacious rhythm, but make it unmistakably Clearlog. */
body.home #main.clearlog-home { max-width: 1240px !important; margin: 0 auto !important; padding: 42px 34px 96px !important; background: #fbfcfa !important; color: var(--cl-ink) !important; }
.clearlog-sitebar { display: flex; align-items: center; gap: 28px; margin-bottom: 22px; padding: 4px 0 18px; border-bottom: 1px solid #dce5df; }
.clearlog-sitebar__brand { display: block; text-decoration: none !important; }
.clearlog-sitebar__brand img { display: block; width: 128px; height: auto; mix-blend-mode: multiply; }
.clearlog-sitebar__links { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; margin-left: auto; }
.clearlog-sitebar__links a { display: inline-flex; align-items: center; gap: 5px; color: #375149 !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
.clearlog-sitebar__links a span { display: inline-grid; width: 17px; height: 17px; place-items: center; color: #176b59; font-family: Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1; }
.clearlog-sitebar__links a:hover { color: #176b59 !important; }
body.home #main.clearlog-home .clearlog-hero { position: relative; overflow: hidden; padding: clamp(68px, 10vw, 128px) 7% !important; border: 0 !important; background: #102a25 !important; color: #fff !important; }
body.home #main.clearlog-home .clearlog-hero::after { position: absolute; right: -7%; bottom: -55%; width: min(54vw, 650px); aspect-ratio: 1; border: 1px solid rgba(190,245,215,.38); border-radius: 50%; box-shadow: 0 0 0 46px rgba(121,215,173,.08), 0 0 0 92px rgba(121,215,173,.05); content: ''; }
body.home #main.clearlog-home .clearlog-hero > * { position: relative; z-index: 1; }
body.home #main.clearlog-home .clearlog-hero h1 { color: #fff !important; }
body.home #main.clearlog-home .clearlog-hero p { color: #cfe3d9 !important; }
body.home #main.clearlog-home .clearlog-kicker { color: #8ce1b9 !important; }
body.home #main.clearlog-home .clearlog-category-grid { margin: 22px 0 98px !important; gap: 18px !important; }
body.home #main.clearlog-home .clearlog-category-card { position: relative; min-height: 300px !important; overflow: hidden; border: 0 !important; background: #e8f1ec !important; color: #112821 !important; }
body.home #main.clearlog-home .clearlog-category-card::after { position: absolute; right: -35px; bottom: -45px; width: 155px; height: 155px; border: 1px solid currentColor; border-radius: 50%; content: ''; opacity: .22; }
body.home #main.clearlog-home .clearlog-category-card:nth-child(2) { background: #eaf0f5 !important; color: #173750 !important; }
body.home #main.clearlog-home .clearlog-category-card:nth-child(3) { background: #f4ede2 !important; color: #593f25 !important; }
body.home #main.clearlog-home .clearlog-category-card h2 { color: inherit !important; font-size: 38px !important; }
body.home #main.clearlog-home .clearlog-category-card p { color: inherit !important; opacity: .72; }
body.home #main.clearlog-home .clearlog-category-card__number { color: inherit !important; }
/* The Clearlog site bar is the homepage header; avoid a second Avada header above it. */
body.home .fusion-header-wrapper { display: none !important; }

@media (max-width: 800px) { body.home #main.clearlog-home { padding: 18px 16px 64px !important; } .clearlog-sitebar { align-items: flex-start; flex-direction: column; gap: 14px; } .clearlog-sitebar__brand img { width: 116px; } .clearlog-sitebar__links { flex-wrap: wrap; justify-content: flex-start; gap: 12px 16px; margin-left: 0; } body.home #main.clearlog-home .clearlog-hero { padding: 64px 26px 82px !important; } }

.clearlog-home {
  max-width: 1180px;
  margin: 0 auto;
  padding: 76px 28px 88px;
  color: var(--cl-ink);
}

.clearlog-hero {
  padding: clamp(54px, 10vw, 120px) 0 clamp(68px, 11vw, 132px);
  border-bottom: 1px solid var(--cl-line);
}

.clearlog-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  color: var(--cl-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.clearlog-kicker::before {
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: '';
}

.clearlog-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(54px, 9vw, 118px);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .91;
}

.clearlog-hero p {
  max-width: 560px;
  margin: 30px 0 0;
  color: var(--cl-muted);
  font-size: 19px;
  line-height: 1.75;
}

.clearlog-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 56px 0 104px;
}

.clearlog-category-card {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  border: 1px solid var(--cl-line);
  background: var(--cl-paper);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.clearlog-category-card:hover {
  border-color: var(--cl-accent);
  box-shadow: 0 15px 36px rgba(18, 35, 31, .08);
  color: inherit;
  transform: translateY(-4px);
}

.clearlog-category-card__number {
  color: var(--cl-accent);
  font-size: 13px;
  font-weight: 800;
}

.clearlog-category-card h2 {
  margin: 38px 0 8px;
  font-size: 30px;
  letter-spacing: -.045em;
}

.clearlog-category-card p {
  margin: 0;
  color: var(--cl-muted);
  line-height: 1.6;
}

.clearlog-section {
  margin: 0 0 104px;
}

.clearlog-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.clearlog-section__head h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.06em;
}

.clearlog-section__head a {
  color: var(--cl-accent);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.clearlog-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.clearlog-post-card {
  min-width: 0;
}

.clearlog-post-card__image,
.clearlog-post-card__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 1.45;
  margin-bottom: 18px;
  background: var(--cl-mint);
  object-fit: cover;
}

.clearlog-post-card__placeholder {
  position: relative;
}

.clearlog-post-card__placeholder::after {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--cl-accent);
  content: 'CLEARLOG';
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  transform: translate(-50%, -50%);
}

.clearlog-post-card__meta {
  margin-bottom: 8px;
  color: var(--cl-accent);
  font-size: 12px;
  font-weight: 800;
}

.clearlog-post-card h3 {
  margin: 0 0 8px;
  font-size: 23px;
  letter-spacing: -.035em;
  line-height: 1.26;
}

.clearlog-post-card h3 a { color: inherit; text-decoration: none; }
.clearlog-post-card p { margin: 0; color: var(--cl-muted); font-size: 14px; line-height: 1.65; }

.clearlog-empty {
  padding: 42px;
  border: 1px dashed #b7c9be;
  background: var(--cl-paper);
  color: var(--cl-muted);
}

.clearlog-about {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: 42px;
  padding: 42px;
  background-color: var(--cl-ink);
  background-image: linear-gradient(90deg, rgba(15, 37, 32, .93), rgba(15, 37, 32, .55)), url('assets/clearlog-culture-cover.png');
  background-position: center;
  background-size: cover;
  color: #fff;
}

.clearlog-about h2 { margin: 0; font-size: clamp(32px, 4vw, 50px); letter-spacing: -.06em; line-height: 1.02; }
.clearlog-about p { margin: 0; color: #c7d7d0; font-size: 17px; line-height: 1.75; }
.clearlog-about a { color: #b9f0d9; font-weight: 800; }

@media (max-width: 800px) {
  .clearlog-home { padding: 42px 20px 64px; }
  .clearlog-category-grid, .clearlog-post-grid { grid-template-columns: 1fr; }
  .clearlog-category-grid { margin: 40px 0 72px; }
  .clearlog-section { margin-bottom: 72px; }
  .clearlog-category-card { min-height: 190px; }
  .clearlog-about { grid-template-columns: 1fr; gap: 24px; padding: 30px; }
}