/* Connecticut Psychiatry - site styles
   Plain CSS. No external requests: fonts and images are served from this site.
   Colours and type are taken from the previous WordPress (Avada) theme settings. */

/* ---------- typefaces (self-hosted, SIL Open Font License) ---------- */
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/alegreya-sans-300.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/alegreya-sans-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/alegreya-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/alegreya-sans-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400.woff2") format("woff2"); }

/* ---------- colours (edit here to change them everywhere) ---------- */
:root {
  --teal: #3bafbf;        /* top bar, link hover */
  --navy: #365d8d;        /* menu, accents, call-to-action band */
  --ink: #333c4e;         /* headings */
  --body: #6f7a83;        /* body text (slightly darker than the old #7e8890, for readability) */
  --link: #2f9cb4;        /* links (slightly darker than the old #56bad1, for readability) */
  --sage: #acd3bd;        /* "What makes me different" boxes */
  --mint: #dbebd4;        /* statistics band */
  --mist: #f7f7f7;        /* services band, copyright bar */
  --ring: #ececec;        /* unfilled part of statistic rings */
  --rule: #d6d6d6;        /* short line under headings */
  --white: #ffffff;
  --sans: "Alegreya Sans", Arial, Helvetica, sans-serif;
  --caps: "Montserrat", Arial, Helvetica, sans-serif;
  --wrap: 1180px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--body); font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.9; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { color: var(--teal); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
h1, h2, h3 { color: var(--ink); font-weight: 300; margin: 0; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--white); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.section { padding: 80px 0; }
.section-title { text-align: center; font-size: clamp(32px, 4vw, 46px); line-height: 1.15; }
.section-title::after { content: ""; display: block; width: 280px; max-width: 60%; height: 1px; background: var(--rule); margin: 22px auto 0; }
.lede { max-width: 780px; margin: 34px auto 0; text-align: center; font-size: 19px; line-height: 2.3; }

/* ---------- buttons ---------- */
.btn { display: inline-block; font-family: var(--caps); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; padding: 13px 30px; border: 2px solid currentColor; color: var(--navy); background: transparent; line-height: 1.4; transition: background .2s, color .2s; }
.btn:hover, .btn:focus-visible { background: var(--navy); color: var(--white); border-color: var(--navy); text-decoration: none; }
.btn-light { color: var(--white); }
.btn-light:hover, .btn-light:focus-visible { background: var(--white); color: var(--navy); border-color: var(--white); }

/* ---------- top bar ---------- */
.topbar { background: var(--teal); color: var(--white); font-size: 15px; line-height: 1.6; padding: 6px 0; }
.topbar a { color: var(--white); font-weight: 400; }

/* ---------- header and menu ---------- */
.site-header { position: relative; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.logo img { width: 135px; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-button { display: none; cursor: pointer; padding: 10px; color: var(--navy); }
.nav-button svg { width: 28px; height: 28px; display: block; }
.menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: 8px 18px; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); font-weight: 400; }
.menu a:hover, .menu a:focus-visible { color: #000; text-decoration: none; }
.menu a[aria-current="page"] { color: #000; }
.menu .menu-cta a { margin-left: 22px; border: 2px solid var(--navy); padding: 9px 24px; font-family: var(--caps); font-size: 13px; letter-spacing: 2px; }
.menu .menu-cta a:hover, .menu .menu-cta a:focus-visible { background: var(--navy); color: var(--white); }

/* header sits over the hero picture on pages that have one */
.has-hero .site-header { position: absolute; left: 0; right: 0; }

@media (max-width: 900px) {
  .nav-button { display: block; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); box-shadow: 0 10px 24px rgba(0,0,0,.12); padding: 8px 0 16px; }
  .menu a { padding: 12px 24px; }
  .menu .menu-cta a { margin: 10px 24px 0; text-align: center; }
  .nav-toggle:checked ~ .menu { display: flex; }
  .nav-toggle:focus-visible ~ .nav-button { outline: 2px solid var(--navy); }
  .logo img { width: 110px; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 720px; display: flex; align-items: center; justify-content: center; text-align: center; background: #c9ccd2 center / cover no-repeat; }
.hero-home { background-image: url("../images/hero-consultation.jpg"); }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(214, 218, 226, .58); }
.hero-inner { position: relative; padding: 170px 24px 120px; }
.hero h1 { font-size: clamp(48px, 7vw, 80px); line-height: 1; color: var(--white); text-shadow: 0 1px 18px rgba(60, 70, 90, .18); }
.hero h1 span { display: block; color: var(--navy); text-shadow: none; }
.hero .btn { margin-top: 56px; }
@media (max-width: 600px) { .hero { min-height: 560px; } .hero::before { background: rgba(214, 218, 226, .72); } .hero-inner { padding: 150px 16px 90px; } }

/* ---------- what makes me different (flip cards) ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 44px; }
.card { perspective: 1200px; min-height: 430px; outline: none; }
.card-inner { position: relative; height: 100%; min-height: inherit; transition: transform .7s; transform-style: preserve-3d; }
.card:hover .card-inner, .card:focus .card-inner, .card:focus-within .card-inner { transform: rotateY(180deg); }
.card:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.card-face { position: absolute; inset: 0; background: var(--sage); color: var(--white); border-radius: 3px; display: flex; align-items: center; justify-content: center; padding: 28px; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-front h3 { color: var(--white); font-size: 40px; line-height: 1.2; }
.card-back { transform: rotateY(180deg); font-size: 17px; line-height: 1.75; }
.card-back p { margin: 0; }
@media (max-width: 1050px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  /* on phones show both sides, stacked, instead of flipping */
  .cards { grid-template-columns: 1fr; gap: 20px; }
  .card { min-height: 0; perspective: none; }
  .card-inner, .card:hover .card-inner, .card:focus .card-inner, .card:focus-within .card-inner { transform: none; }
  .card-face { position: static; backface-visibility: visible; -webkit-backface-visibility: visible; display: block; }
  .card-front { border-radius: 3px 3px 0 0; padding-bottom: 6px; }
  .card-front h3 { font-size: 32px; }
  .card-back { transform: none; border-radius: 0 0 3px 3px; padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .card-inner { transition: none; } }

/* ---------- services ---------- */
.services { background: var(--mist); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px; margin-top: 56px; text-align: center; }
.service img, .service svg { display: block; width: 85px; height: 85px; margin: 0 auto; }
.service h3 { font-size: 22px; letter-spacing: 1px; line-height: 1.4; margin-top: 14px; color: var(--navy); font-weight: 400; }
.service a.more { font-size: 15px; }
@media (max-width: 760px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- statistics ---------- */
.stats { background: var(--mint); }
.stat-row { display: grid; gap: 40px; text-align: center; }
.stat-row.two { grid-template-columns: repeat(2, 1fr); }
.stat-row.three { grid-template-columns: repeat(3, 1fr); margin-top: 56px; }
.stat-row + .section-title { margin-top: 110px; }
.stat-row.three + .stat-row.two { margin-top: 90px; }
.stat p { margin: 18px auto 0; max-width: 380px; font-size: 16px; line-height: 2.1; }
.stat .src { margin-top: 2px; }
.ring { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring .track { stroke: var(--ring); }
.ring .fill { stroke: var(--navy); stroke-linecap: butt; }
.ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; color: var(--navy); font-weight: 300; }
.big-number { font-size: clamp(64px, 9vw, 130px); line-height: 1; color: var(--navy); font-weight: 300; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.big-number.mid { font-size: clamp(56px, 6vw, 80px); min-height: 0; }
@media (max-width: 820px) {
  .stat-row.two, .stat-row.three { grid-template-columns: 1fr; }
  .big-number { min-height: 0; }
}

/* ---------- testimonials (pure CSS slider: radio buttons + labels) ---------- */
.testimonials { position: relative; color: var(--white); text-align: center; background: #555 url("../images/testimonials-bg.jpg") center / cover no-repeat; }
.testimonials::before { content: ""; position: absolute; inset: 0; background: rgba(40, 40, 40, .62); }
.testimonials .wrap { position: relative; }
.testimonials .section-title { color: var(--white); }
.testimonials .section-title::after { display: none; }
.quotes { position: relative; max-width: 780px; margin: 40px auto 0; }
.quotes input { position: absolute; opacity: 0; pointer-events: none; }
.quote { display: none; margin: 0; font-style: italic; font-size: 18px; letter-spacing: 1.5px; line-height: 1.75; }
.quote p { margin: 0; }
.dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.dots label { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--white); cursor: pointer; }
#q1:checked ~ .quote.q1, #q2:checked ~ .quote.q2, #q3:checked ~ .quote.q3,
#q4:checked ~ .quote.q4, #q5:checked ~ .quote.q5, #q6:checked ~ .quote.q6 { display: block; }
#q1:checked ~ .dots label[for="q1"], #q2:checked ~ .dots label[for="q2"], #q3:checked ~ .dots label[for="q3"],
#q4:checked ~ .dots label[for="q4"], #q5:checked ~ .dots label[for="q5"], #q6:checked ~ .dots label[for="q6"] { background: var(--white); }
.quotes input:focus-visible ~ .dots { outline: 2px solid var(--white); outline-offset: 6px; }

/* ---------- call to action band ---------- */
.cta { background: var(--navy); color: var(--white); text-align: center; padding: 100px 0; }
.cta h2 { color: var(--white); font-size: clamp(26px, 3vw, 32px); font-weight: 400; margin-bottom: 40px; }

/* ---------- footer ---------- */
.site-footer { background: var(--white); color: #666; font-size: 16px; line-height: 2.2; padding: 70px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; }
.footer-grid h2 { font-size: 17px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); font-weight: 400; margin-bottom: 14px; }
.footer-about { text-align: center; }
.footer-about img { margin: 14px auto 0; }
.footer-center { text-align: center; }
.footer-center .logo-footer { width: 300px; margin: 0 auto; }
.footer-center .google { width: 200px; margin: 18px auto; }
.footer-center .pt { width: 221px; margin: 18px auto 0; }
.notices { list-style: none; margin: 0; padding: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; }
.footer-contact address { font-style: normal; }
.footer-contact .note { font-style: italic; }
.footer-contact .linkedin { display: inline-block; margin-top: 12px; color: #0077b5; }
.footer-contact .linkedin svg { width: 28px; height: 28px; display: block; }
.disclaimer { margin-top: 50px; padding-top: 26px; border-top: 1px solid #e6e6e6; font-size: 14px; line-height: 1.75; color: #5f6870; text-align: center; }
.disclaimer p { max-width: 900px; margin: 0 auto; }
.copyright { background: var(--mist); color: #666; font-size: 14px; text-align: center; padding: 14px 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-contact { text-align: center; } }

/* ---------- gentle fade-in on scroll (browsers that support it; no script) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    @keyframes reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  }
}

.flush-top { padding-top: 0; }

/* contact list with icons, as on the previous footer */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.8; margin-bottom: 6px; }
.contact-list svg { flex: none; width: 17px; height: 17px; margin-top: 5px; color: var(--navy); }
@media (max-width: 900px) { .contact-list { display: inline-block; text-align: left; } }

/* thin coloured bars either side of each notice link, as before */
.notices a::before, .notices a::after { content: "|"; color: #e1878f; margin: 0 8px; }
.notices a:hover { text-decoration: none; }

/* back-to-top button (a plain link to the top of the page) */
.to-top { position: fixed; right: 20px; bottom: 0; width: 46px; height: 32px; background: var(--ink); color: var(--white); border-radius: 4px 4px 0 0; display: flex; align-items: center; justify-content: center; opacity: .85; }
.to-top:hover, .to-top:focus-visible { color: var(--white); opacity: 1; }
.to-top svg { width: 20px; height: 20px; }

/* ================= inner pages ================= */
.hero-inner-page { min-height: 500px; }
.hero-inner-page .hero-inner { padding: 170px 24px 70px; }
.hero-inner-page h1 { font-size: clamp(36px, 4.4vw, 50px); line-height: 1.15; color: var(--white); }
.hero-inner-page h1 span { display: inline; }
.hero h1 .navy { display: block; color: var(--navy); text-shadow: none; }
.hero h1 .white { display: block; color: var(--white); }
.hero h1 .navy-inline { display: inline; color: var(--navy); text-shadow: none; }
.hero h1 .white:first-child { display: inline; }
.hero h1.hero-small { font-size: clamp(30px, 3.4vw, 40px); }
.hero-inner-page .btn { margin-top: 40px; }
.hero-about { background-image: url("../images/hero-about.jpg"); }
.hero-services { background-image: url("../images/hero-services.jpg"); background-position: center 40%; }
.hero-resources { background-image: url("../images/hero-resources.jpg"); min-height: 400px; }

/* ----- About ----- */
.bio { background: var(--mist); }
.bio-grid { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; margin-top: 56px; }
.portrait { width: 300px; aspect-ratio: 300 / 515; object-fit: cover; object-position: 50% 30%; }
.bio-text { font-size: 16px; line-height: 2.1; }
.bio-text strong { font-weight: 400; color: var(--ink); }
@media (max-width: 760px) { .bio-grid { grid-template-columns: 1fr; } .portrait { margin: 0 auto; width: 260px; } }

.recent { display: grid; grid-template-columns: 2fr 1fr; background: var(--white); }
.recent-text { padding: 90px 48px 90px max(24px, calc((100vw - var(--wrap)) / 2 + 24px)); }
.recent-text h2 { font-size: clamp(32px, 3.4vw, 42px); margin-bottom: 30px; }
.recent-image { background: #ddd url("../images/about-recent-work.jpg") center / cover no-repeat; min-height: 420px; }
.dot-heading { display: flex; align-items: center; gap: 16px; font-size: 22px; color: var(--body); margin: 34px 0 14px; }
.dot-heading::before { content: ""; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); flex: none; }
.dot-list { list-style: none; margin: 0; padding: 0; }
.dot-list li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.8; margin: 0 0 12px; }
.dot-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); }
@media (max-width: 860px) { .recent { grid-template-columns: 1fr; } .recent-text { padding: 70px 24px; } .recent-image { min-height: 300px; } }

/* ----- Services ----- */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 50px; }
.svc-card { background: var(--white); scroll-margin-top: 24px; }
.svc-card img { width: 100%; aspect-ratio: 800 / 533; object-fit: cover; }
.svc-body { padding: 26px 28px 30px; }
.svc-body h2 { text-align: center; font-size: 34px; line-height: 1.2; }
.svc-body h2::after { content: ""; display: block; width: 200px; height: 1px; background: var(--rule); margin: 16px auto 22px; }
.svc-body p { font-size: 15px; line-height: 2.1; margin: 0; }
@media (max-width: 760px) { .svc-grid { grid-template-columns: 1fr; } }

.issues { position: relative; color: var(--white); background: #333 url("../images/issues-bg.jpg") center / cover no-repeat; }
.issues::before { content: ""; position: absolute; inset: 0; background: rgba(30, 30, 30, .45); }
.issues .wrap { position: relative; }
.issues .section-title { color: var(--white); }
.issue-grid { list-style: none; margin: 60px auto 0; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px 32px; }
.issue-grid li { background: rgba(255, 255, 255, .72); color: var(--ink); text-align: center; min-height: 110px; display: flex; align-items: center; justify-content: center; padding: 16px; font-size: 19px; line-height: 1.3; font-weight: 400; }
@media (max-width: 860px) { .issue-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

.dx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 50px; align-items: start; }
.dx-card { background: var(--white); box-shadow: 0 0 0 1px #eee, 0 4px 10px rgba(0, 0, 0, .04); }
.dx-card h3 { background: var(--navy); color: var(--white); font-weight: 400; text-align: center; font-size: 20px; letter-spacing: 1px; line-height: 1.5; padding: 18px 16px; margin: 0 0 14px; }
.dx-card ul { list-style: none; margin: 0; padding: 0; }
.dx-card li { text-align: center; font-size: 15px; line-height: 1.7; padding: 11px 16px; border-top: 1px solid #f0f0f0; }
.footnote { margin-top: 40px; font-size: 15px; }
@media (max-width: 960px) { .dx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dx-grid { grid-template-columns: 1fr; } }

/* ----- Resources ----- */
.resources { background: var(--mist); }
.section-title.plain::after { display: none; }
.section-title.spaced { margin-top: 120px; }
.res-grid { display: grid; gap: 32px; margin: 32px auto 0; }
.res-grid.one { max-width: 660px; }
.res-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 950px; }
.res-grid.three { grid-template-columns: repeat(3, 1fr); max-width: 950px; }
.res-card { background: var(--white); text-align: center; padding: 64px 28px 30px; display: flex; flex-direction: column; justify-content: flex-end; }
.res-card h3 { font-size: 24px; line-height: 1.2; margin-bottom: 26px; }
.res-card h3 a { color: var(--ink); }
.btn-block { display: block; width: 100%; }
.res-links { list-style: none; margin: 30px 0 0; padding: 0; font-size: 15px; line-height: 2.6; }
@media (max-width: 860px) { .res-grid.two, .res-grid.three { grid-template-columns: 1fr; max-width: 520px; } }

/* ----- privacy notice and other text pages ----- */
.plain .site-header { border-bottom: 1px solid #eee; }
.prose { max-width: 780px; }
.prose h1 { font-size: clamp(36px, 4vw, 46px); line-height: 1.15; margin-bottom: 8px; }
.prose h2 { font-size: 26px; margin: 36px 0 8px; font-weight: 400; }
.prose p { font-size: 17px; line-height: 1.9; }
.prose .updated { font-style: italic; margin-bottom: 30px; }
.prose.center { text-align: center; margin: 0 auto; }
.prose.center .btn { margin-top: 20px; }
@media (max-width: 600px) { .to-top { display: none; } }