/* ============================================================
   Depression Can Be Fun — site redesign 2026
   One stylesheet for the whole legacy markup:
   #holder > #topinfo (#toplinks, #bluequote, #globalnav)
   > #content (.lefthome/.righthome | #leftnav + #mainthreecol +
   #threecolrightcol | #maintwocol) > #footer
   ============================================================ */

:root {
  --ink: #24303c;
  --ink-soft: #52616e;
  --ink-faint: #7d8a96;
  --paper: #faf8f4;
  --card: #ffffff;
  --line: #e6e0d6;
  --brand: #e46a12;            /* logo orange */
  --brand-dark: #b9530c;
  --brand-tint: #fdf1e6;
  --care: #2d80c5;             /* section accents (original palette) */
  --depress: #d93a02;
  --interact: #699a16;
  --media: #9a5fc9;
  --news: #e88b00;
  --helen: #db1e70;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(36, 48, 60, .06), 0 4px 14px rgba(36, 48, 60, .06);
}

/* ---------- reset-ish ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}
img { max-width: 100%; height: auto; border: 0; }
table { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

a { color: var(--brand-dark); text-decoration: none; }
a:hover, a:active, a:focus { color: var(--brand); text-decoration: underline; }
a:visited { color: var(--brand-dark); }

p.skip { position: absolute; left: -9999px; height: 1px; overflow: hidden; }

/* ---------- page shell ---------- */
#holder { width: 100%; margin: 0; padding: 0; background: none; text-align: left; }

/* ---------- header ---------- */
#topinfo {
  width: auto;
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 20px 0;
  text-align: left;
  position: relative;
}
#topinfo > a > img,
#topinfo > img {
  float: left;
  margin: 0 22px 14px 0;
  padding: 0;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

#toplinks { height: auto; margin: 0 0 6px; padding: 4px 0; text-align: right; }
#toplinks ul { margin: 0; padding: 0; list-style: none; }
#toplinks li { display: inline-block; margin: 0 0 0 14px; font-size: 14px; }
#toplinks li a:link, #toplinks li a:visited {
  color: var(--ink-faint);
  text-decoration: none;
  padding: 4px 2px;
  font-weight: 500;
}
#toplinks li a:hover, #toplinks li a:active, #toplinks li a:focus {
  color: var(--brand);
  text-decoration: none;
}

#bluequote {
  float: none;
  width: auto;
  height: auto;
  margin: 4px 0 18px 155px;
  padding: 16px 22px;
  background: var(--brand-tint);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
}
#bluequote h4#quote {
  margin: 0;
  padding: 0;
  width: auto;
  color: var(--brand-dark);
  font-size: 19px;
  line-height: 1.45;
  font-weight: 600;
}
#bluequote h5#author { margin: 6px 0 0; padding: 0; color: var(--ink-soft); font-size: 15px; font-weight: 500; }

/* ---------- main navigation ---------- */
#globalnav {
  clear: both;
  margin: 0;
  padding: 0;
  background: var(--ink);
  border-radius: var(--radius) var(--radius) 0 0;
}
#globalnav ul {
  margin: 0;
  padding: 0 8px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
#globalnav li { display: block; margin: 0; padding: 0; }
#globalnav a:link, #globalnav a:visited {
  display: block;
  float: none;
  height: auto;
  margin: 0;
  padding: 13px 16px;
  background: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
#globalnav a:hover, #globalnav a:active, #globalnav a:focus {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-bottom-color: var(--brand);
  text-decoration: none;
}
#globalnav a.selected { border-bottom-color: var(--brand); background: rgba(255,255,255,.08); }
#globalnav span.lasttab { display: none; }

/* section hint colours on nav tabs */
#globalnav a#iamtab:hover    { border-bottom-color: var(--depress); }
#globalnav a#caretab:hover   { border-bottom-color: var(--care); }
#globalnav a#intertab:hover  { border-bottom-color: var(--interact); }
#globalnav a#mediatab:hover  { border-bottom-color: var(--media); }
#globalnav a#eventtab:hover  { border-bottom-color: var(--news); }
#globalnav a#abouttab:hover  { border-bottom-color: var(--helen); }

/* ---------- content area ---------- */
#contentwrapper { clear: both; margin: 0; padding: 0; }
#content {
  width: auto;
  max-width: 1080px;
  margin: 0 auto 34px;
  padding: 28px 20px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* headings */
#content h1, #content h2, #content h3, #content h4 {
  font-family: inherit;
  color: var(--ink);
  line-height: 1.3;
}
#content h1 { font-size: 30px; margin: 0 0 14px; }
#content h2 { font-size: 24px; margin: 0 0 12px; }
#content h3 { font-size: 19px; margin: 0 0 10px; }

/* legacy coloured section headers -> accent bars */
.lefthome h3, .righthome h3, #leftnav h3, #threecolrightcol h3 {
  background: none;
  padding: 8px 0 8px 14px;
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  border-left: 4px solid var(--brand);
  border-bottom: 1px solid var(--line);
}
.caretext      { color: var(--care) !important;    border-left-color: var(--care) !important; }
.depresstext   { color: var(--depress) !important; border-left-color: var(--depress) !important; }
.interacttext  { color: var(--interact) !important;border-left-color: var(--interact) !important; }
.mediatext     { color: var(--media) !important;   border-left-color: var(--media) !important; }
.newstext      { color: var(--news) !important;    border-left-color: var(--news) !important; }
.abouthelentext{ color: var(--helen) !important;   border-left-color: var(--helen) !important; }
h1.caretext, h1.depresstext, h1.interacttext, h1.mediatext, h1.newstext, h1.abouthelentext,
h2.caretext, h2.depresstext, h2.interacttext, h2.mediatext, h2.newstext, h2.abouthelentext {
  border-left: 4px solid;
  padding-left: 14px;
}

/* columns — home layout */
.lefthome  { float: left; width: 46%; margin: 0 4% 20px 0; padding: 0; display: block; text-align: left; }
.righthome { float: left; width: 50%; margin: 0 0 20px; padding: 0; text-align: left; }
.righthomeleft  { float: left; width: 48%; margin: 0 4% 0 0; padding: 0; }
.righthomeright { float: left; width: 48%; margin: 0; padding: 0; }
.righthomeflow  { float: right; width: 48%; margin: 0; padding: 0; }

/* columns — 3-col article layout */
#leftnav        { float: left; width: 17%; margin: 0 3% 20px 0; padding: 0; }
#mainthreecol   { float: left; width: 52%; margin: 0 3% 20px 0; padding: 0; }
#threecolrightcol { float: left; width: 25%; margin: 0 0 20px; padding: 0; }
#maintwocol     { float: left; width: 79%; margin: 0 0 20px; padding: 0; }

#mainthreecol p, #maintwocol p { font-size: 17px; line-height: 1.65; margin: 0 0 16px; color: var(--ink); }
#mainthreecol h2, #maintwocol h2 { font-size: 24px; margin: 0 0 12px; }
#mainthreecol h3, #maintwocol h3 { font-size: 19px; margin: 18px 0 8px; }
#mainthreecol h4 { margin: 18px 0 6px; }
#mainthreecol img.leftimg, #threecolrightcol img.leftimg,
.lefthome img.leftimg, .righthomeleft img.leftimg, .righthomeright img.leftimg {
  float: left;
  margin: 4px 14px 8px 0;
  border-radius: 8px;
}

/* left nav block */
#leftnav ul { margin: 0 0 18px; padding: 0; }
#leftnav ul li { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
#leftnav ul li a {
  display: block;
  padding: 8px 4px;
  background: none;
  font-size: 14.5px;
  color: var(--ink-soft);
  text-decoration: none;
}
#leftnav ul li a:hover { color: var(--brand); background: var(--brand-tint); }

/* generic content lists */
#content ul { margin: 0 0 16px; padding: 0 0 0 4px; clear: none; }
#content ul li { margin: 0 0 7px; padding: 0; list-style: none; }
#content ul li a, a.greybullet {
  background: none;
  display: inline-block;
  margin: 0;
  padding: 0 0 0 18px;
  position: relative;
  font-size: 15.5px;
  color: var(--brand-dark);
  text-decoration: none;
}
#content ul li a::before, a.greybullet::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .52em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
#content ul li a:hover, a.greybullet:hover { color: var(--brand); text-decoration: underline; }
a.greybullet { display: block; margin: 0 0 10px; }
#content #mainthreecol ul li, #content #maintwocol ul li {
  background: none;
  padding-left: 18px;
  position: relative;
}

/* pagination */
.pagination { margin: 14px 0; font-size: 15px; color: var(--ink-faint); }
.pagination a {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.pagination a:hover { border-color: var(--brand); text-decoration: none; }

/* video + promo cards */
.videoblock {
  background: var(--brand-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 18px;
}
.videoblock h3 { background: none; color: var(--ink); font-size: 17px; }
.padVid { margin: 5px 0 10px; padding: 0 0 0 5px; }
.recommended-products {
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.advert { float: right; margin: 5px 0; }

/* forms */
input[type="text"], input[type="password"], input[type="email"], textarea, select {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  max-width: 100%;
  box-sizing: border-box;
}
input[type="submit"], input[type="button"], button {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 6px;
  padding: 9px 18px;
  cursor: pointer;
}
input[type="submit"]:hover, button:hover { background: var(--brand-dark); }

/* ---------- forum tables ---------- */
.tableBorder, .tableBorderLeft {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
  margin-bottom: 18px;
}
.tableHeading, .tableHeadingBG, .tableHeadingSmall, .tableRowHeadingBold {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 12px;
  text-align: left;
}
.tableHeading a, .tableHeadingBG a, .tableRowHeadingBold a,
.tableHeading a:visited, .tableHeadingBG a:visited, .tableRowHeadingBold a:visited { color: #fff; }
.tableCellOne, .tableCellTwo { padding: 10px 12px; font-size: 15px; vertical-align: top; }
.tableCellOne { background: #fbf9f5; }
.tableCellTwo { background: #ffffff; }
.forumName { font-weight: 600; font-size: 16px; }
.forumDescription { color: var(--ink-soft); font-size: 14px; }
.breadcrumb { font-size: 14px; color: var(--ink-faint); margin: 0 0 12px; }
.breadcrumb a { color: var(--ink-soft); }
.currentcrumb { color: var(--ink); font-weight: 600; }
.postcount { color: var(--ink-faint); font-size: 13px; }
.tablePostInfo { font-size: 13px; color: var(--ink-faint); }
.forumLightLinks, .forumLightLinks a { font-size: 13.5px; color: var(--ink-soft); }
.spacer { height: 8px; }

/* ---------- footer ---------- */
#footer {
  clear: both;
  width: 100%;
  margin: 0;
  padding: 30px 0 46px;
  background: var(--ink);
  color: #c7d0d9;
  font-size: 14.5px;
  text-align: left;
}
#footercontent { width: auto; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
#footer p { margin: 0; padding: 6px 0; color: #c7d0d9; font-size: 14.5px; }
#footer a, #footer a:visited { color: #ffffff; text-decoration: none; }
#footer a:hover { color: var(--brand); text-decoration: underline; }
#footer ul { margin: 0 0 8px; padding: 0; list-style: none; }
#footer li { display: inline-block; margin: 0 16px 0 0; font-size: 14.5px; }
#footer li a:link, #footer li a:visited { color: #ffffff; padding: 0; }

/* helpers */
.clear { clear: both; }
.clearfix { display: block; }
.clearfix:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; }
#clear { clear: both; }

/* ---------- new homepage blocks (dcbf-hero / cards) ---------- */
.dcbf-hero {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--brand-tint) 0%, #fff 70%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 26px;
}
.dcbf-hero-text { flex: 1 1 340px; }
.dcbf-hero-text h1 { font-size: 32px; margin: 0 0 12px; line-height: 1.25; }
.dcbf-hero-text p { font-size: 17.5px; color: var(--ink-soft); margin: 0 0 10px; }
.dcbf-hero-img { flex: 0 0 260px; }
.dcbf-hero-img img { border-radius: 12px; box-shadow: var(--shadow); display: block; }
.dcbf-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.dcbf-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.dcbf-card h3 { margin: 0 0 8px; font-size: 18px; }
.dcbf-card p { margin: 0 0 10px; font-size: 15px; color: var(--ink-soft); }
.dcbf-card a.dcbf-more { font-weight: 600; font-size: 15px; }
.dcbf-card.c-depress { border-top-color: var(--depress); }
.dcbf-card.c-care    { border-top-color: var(--care); }
.dcbf-card.c-interact{ border-top-color: var(--interact); }
.dcbf-card.c-media   { border-top-color: var(--media); }
.dcbf-card.c-news    { border-top-color: var(--news); }
.dcbf-card.c-helen   { border-top-color: var(--helen); }
.dcbf-section-title {
  font-size: 22px;
  margin: 8px 0 16px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--line);
}
.dcbf-note {
  background: var(--brand-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 24px;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  #bluequote { margin-left: 0; clear: both; }
  .lefthome, .righthome, .righthomeleft, .righthomeright, .righthomeflow,
  #leftnav, #mainthreecol, #threecolrightcol, #maintwocol {
    float: none;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  #topinfo > a > img, #topinfo > img { width: 96px; height: auto; margin-right: 14px; }
  #globalnav ul { padding: 0; }
  #globalnav a:link, #globalnav a:visited { padding: 11px 12px; font-size: 14px; }
  #content { padding: 20px 14px 6px; }
  #content h1 { font-size: 25px; }
  .dcbf-hero { padding: 20px; }
  .dcbf-hero-text h1 { font-size: 26px; }
}
@media (max-width: 560px) {
  #toplinks { text-align: left; }
  #toplinks li { margin: 0 12px 0 0; }
  body { font-size: 16px; }
  .tableCellOne, .tableCellTwo, .tableHeading { font-size: 13.5px; padding: 8px; }
}