/* ==========================================================================
   Dublin Online Psychotherapy
   Design ported from the original FoundationPress build.

   Foundation's grid and WPBakery's row/column CSS are deliberately NOT
   ported — Kadence and native blocks handle layout. What follows is the
   site's own design: palette, type, hero, section bands, buttons, footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --dop-blue:        #6ba5c1; /* primary */
  --dop-blue-dark:   #1b6a90;
  --dop-blue-light:  #a7cfe2;
  --dop-blue-pale:   #bad9e8;
  --dop-blue-paler:  #d6ecfa;
  --dop-navy:        #113748; /* headings on light */
  --dop-ink:         #365564; /* body copy on light */
  --dop-grey-blue:   #b4c9d1;
  --dop-white:       #ffffff;

  --dop-font:        "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dop-radius-pill: 2em;
  --dop-transition:  all .3s ease;
}

/* --------------------------------------------------------------------------
   2. Base type
   -------------------------------------------------------------------------- */

body {
  font-family: var(--dop-font);
  font-weight: 300;
  color: var(--dop-ink);
}

p { font-weight: 400; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dop-font);
  color: var(--dop-navy);
}

/* Original used colour: unset on links, with underlines only in body copy. */
a {
  text-decoration: none;
  color: inherit;
  transition: var(--dop-transition);
}

.entry-content p a {
  text-decoration: underline;
  color: inherit;
}

.entry-content p a:hover { color: var(--dop-blue); }

/* --------------------------------------------------------------------------
   3. Header / site title
   Original header hard-coded "Dublin City" + <span>Psychotherapy</span>, with
   the second line in blue. In Kadence the title comes from the Customizer, so
   the two-line treatment is done here instead.
   -------------------------------------------------------------------------- */

.site-title {
  font-weight: 700;
  line-height: 1.1;
}

/* "Dublin Online" / "Psychotherapy" on two lines, second line blue.
   Set the site title in Settings > General to:
   Dublin Online<span>Psychotherapy</span>   — or use Kadence's HTML title field. */
.site-title span {
  display: block;
  color: var(--dop-blue);
}

/* --------------------------------------------------------------------------
   4. Buttons — the pill treatment used for the last nav item,
      "read more" links and post navigation.
   -------------------------------------------------------------------------- */

.dop-pill,
a.read-more,
.nav-links a,
.primary-menu-container > ul > li:last-child > a {
  display: inline-block;
  background-color: var(--dop-blue);
  border-radius: var(--dop-radius-pill);
  padding: .7em 1.5em;
  color: var(--dop-white);
  font-weight: 400;
  transition: var(--dop-transition);
}

.dop-pill:hover,
a.read-more:hover,
.nav-links a:hover,
.primary-menu-container > ul > li:last-child > a:hover {
  background-color: var(--dop-blue-dark);
  color: var(--dop-white);
}

/* Ghost variant, used over the hero image. */
.dop-pill--ghost {
  background-color: rgba(167, 207, 226, .3);
  border: 1px solid var(--dop-white);
  color: var(--dop-white);
  font-weight: 600;
  font-size: 14px;
}

.dop-pill--ghost:hover {
  background-color: var(--dop-blue);
}

/* --------------------------------------------------------------------------
   5. Homepage hero
      Original: .bg-wrap carried bg-2000.jpg, full-bleed, with the h2 at 60px/900.
   -------------------------------------------------------------------------- */

.dop-hero {
  background: url("../images/bg-2000.jpg") top left no-repeat;
  background-size: cover;
  padding: 15vh 25px 50px;
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
}

@media (max-width: 799px) {
  .dop-hero {
    padding: 50px 0;
    min-height: 0;
    display: block;
  }
}

@media (max-height: 850px) {
  .dop-hero {
    min-height: 0;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.dop-hero__title {
  font-weight: 900;
  font-size: 60px;
  line-height: 1.1;
  color: var(--dop-blue);
  margin: 0;
}

@media (max-width: 799px) {
  .dop-hero__title {
    font-size: 30px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   6. Intro row — headshot left, text right, divided by a blue rule.
   -------------------------------------------------------------------------- */

.dop-intro {
  max-width: 900px;
}

.dop-intro p {
  color: var(--dop-ink);
  font-weight: 600;
}

.dop-intro__text {
  border-left: 1px solid var(--dop-blue);
  padding: 1em 0 1em 1em;
}

@media (max-width: 799px) {
  .dop-intro__text {
    border-left: 0;
    padding-left: 0;
  }
}

/* Association logos row. */
.dop-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  margin-top: 2rem;
  font-size: .8rem;
  background-color: var(--dop-blue-dark);
  padding: 1em;
    color: white;
}

.dop-logos > * { flex: 1 1 10rem; }

.dop-logos img { height: auto; max-width: 150px; }

/* --------------------------------------------------------------------------
   7. Homepage section bands
      Values taken from the original build:
        .blue-bg  #1b6a90 + dark diagonal gradient, white 300-weight copy,
                  heading #A7CFE2
        .grey-bg  #A7CFE2 + light diagonal gradient, heading #1b6a90
      Both illustrations sit inside a 1px white circle.
   -------------------------------------------------------------------------- */

.dop-band {
  padding: 2rem;
}

@media (min-width: 800px) {
  .dop-band { padding: 100px 2rem; }
}

.dop-band p { max-width: 50em; }

/* --- Dark band: "Why choose psychotherapy?" --- */

.dop-band--blue {
  background-color: var(--dop-blue-dark);
  background-image: linear-gradient(-20deg, rgba(0, 0, 0, .3), transparent);
}

.dop-band--blue h2 { color: var(--dop-blue-light); }

.dop-band--blue p,
.dop-band--blue li {
  color: var(--dop-white);
  font-weight: 300;
}

/* --- Light band: "A Chance to Change" --- */

.dop-band--grey {
  background-color: var(--dop-blue-light);
  background-image: linear-gradient(-20deg, rgba(255, 255, 255, .3), transparent);
}

.dop-band--grey h2 { color: var(--dop-blue-dark); }

.dop-band--grey p { color: var(--dop-navy); }

/* --- The circled illustrations --- */

.dop-band__img img {
  padding: 10%;
  border: 1px solid var(--dop-white);
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  max-width: 340px;
  width: 100%;
  height: auto;
}

@media (max-width: 1023px) {
  .dop-band__img img {
    max-width: 80%;
    margin-bottom: 50px;
  }
}

/* --------------------------------------------------------------------------
   8. "Latest article..." section
      Original drew the pencil illustration as a background image on the left.
   -------------------------------------------------------------------------- */

.dop-latest {
  background: url("../images/pencil-blog.svg") left 10% center no-repeat;
  padding: 2rem;
}

@media (min-width: 800px) {
  .dop-latest { padding: 100px 2rem; }
}

@media (max-width: 1023px) {
  .dop-latest { background: none; }
}

.dop-latest h2 {
  color: var(--dop-blue-dark);
  font-size: 3rem;
  font-weight: 900;
}

@media (max-width: 799px) {
  .dop-latest h2 { font-size: 1.25rem; }
}

/* The post title inside the query loop. */
.dop-latest h3,
.dop-latest .wp-block-post-title,
.dop-latest .wp-block-post-title a {
  color: var(--dop-blue);
}

/* Indent the post itself, as the original did. */
.dop-latest .wp-block-query {
  padding-top: 2em;
  margin-left: 33%;
}

@media (max-width: 799px) {
  .dop-latest .wp-block-query { margin-left: 0; }
}

.dop-latest .wp-block-post-excerpt__more-text {
  text-align: right;
  padding-top: 1em;
}

/* --------------------------------------------------------------------------
   9. Page titles and inner pages
      Inner page content sat on a light blue panel in the original.
   -------------------------------------------------------------------------- */

.entry-hero h1,
.page h1,
.entry-title {
  color: var(--dop-navy);
  font-weight: 900;
}

/* Light blue panel behind inner page content. Remove this rule if Kevin
   would rather the inner pages were white. */
body:not(.home):not(.blog):not(.single) .content-area {
  background-color: var(--dop-blue-light);
}

/* The original's drop cap is subtle: 200% size on a tight line-height,
   not a floated cap. Matching it exactly. */
.dop-first-letter p:first-of-type::first-letter {
  font-size: 200%;
  line-height: 16px;
}

/* Original body copy line-height on inner pages. */
.dop-first-letter p,
body:not(.home) .entry-content p {
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   10. Contact page sidebar
   -------------------------------------------------------------------------- */

.dop-contact-aside {
  background-color: var(--dop-white);
  padding: 2em;
}

.dop-contact-aside h2,
.dop-contact-aside h6 {
  margin-top: 0;
  color: var(--dop-navy);
}

.side-contact {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.side-contact li {
  margin-bottom: .6em;
  word-break: break-word;
}

.side-contact a:hover { color: var(--dop-blue-dark); }

.side-contact svg {
  width: 1em;
  height: 1em;
  fill: var(--dop-blue);
  vertical-align: middle;
  margin-right: .5em;
}

/* --------------------------------------------------------------------------
   11. Contact Form 7
   -------------------------------------------------------------------------- */

.wpcf7 label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 400;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  border: 1px solid var(--dop-blue-pale);
  border-radius: 3px;
  padding: .6em;
  font-family: var(--dop-font);
  font-size: 1rem;
  background: var(--dop-white);
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: 2px solid var(--dop-blue-dark);
  outline-offset: 1px;
  border-color: var(--dop-blue);
}

.wpcf7 textarea { min-height: 10em; }

.wpcf7 input[type="submit"] {
  background-color: var(--dop-blue);
  color: var(--dop-white);
  border: 0;
  border-radius: var(--dop-radius-pill);
  padding: .7em 2em;
  font-family: var(--dop-font);
  cursor: pointer;
  transition: var(--dop-transition);
}

.wpcf7 input[type="submit"]:hover { background-color: var(--dop-blue-dark); }

/* --------------------------------------------------------------------------
   12. FAQ accordion
   -------------------------------------------------------------------------- */

.dop-faq details {
  border-bottom: 1px solid var(--dop-white);
  padding: 1em 0;
}

.dop-faq summary {
  cursor: pointer;
  font-weight: 400;
  color: var(--dop-navy);
}

.dop-faq details[open] summary { color: var(--dop-blue-dark); }

/* --------------------------------------------------------------------------
   13. Blog
   -------------------------------------------------------------------------- */

.entry-title a:hover { color: var(--dop-navy); }

.blog .post .read-more,
.blog .post .wp-block-read-more {
  text-decoration: none;
  color: var(--dop-white);
  background-color: var(--dop-navy);
}

.byline {
  font-size: .85rem;
  color: var(--dop-grey-blue);
}

/* --------------------------------------------------------------------------
   14. Footer
      Original: near-black #01131c panel, topped by a 50px light blue band.
      Headings #6BA5C1, links white, hover #A7CFE2.
   -------------------------------------------------------------------------- */

.site-footer,
.site-middle-footer-wrap,
.site-bottom-footer-wrap {
  background-color: #01131c;
  color: var(--dop-white);
}

.site-middle-footer-wrap {
  border-top: 50px solid var(--dop-blue-light);
  padding: 4rem 2rem;
}

.site-footer a,
.site-footer li,
.site-footer address {
  color: var(--dop-white);
}

.site-footer a:hover { color: var(--dop-blue-light); }

.site-footer h2,
.site-footer h6,
.site-footer .widget-title {
  color: var(--dop-blue);
  font-weight: 700;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
}

.site-footer ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.site-footer li { line-height: 2em; }

/* --------------------------------------------------------------------------
   15. Header
      Site title is two lines: first #A7CFE2, second #6BA5C1, 900 weight, 30px.
      Set the title in Kadence's header to:
      Dublin Online<span>Psychotherapy</span>
   -------------------------------------------------------------------------- */

.site-title,
.site-title a {
  color: var(--dop-blue-light) !important;
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  font-family: var(--dop-font);
  text-decoration: none;
}

.site-title span {
  display: block;
  color: var(--dop-blue) !important;
}

.primary-menu-container > ul > li > a {
  color: #536771;
  font-weight: 500;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   16. Buttons
      In the bands the pills are ghost style: transparent with a white border.
   -------------------------------------------------------------------------- */

.entry-content a.dop-pill,
.entry-content p a.dop-pill,
a.dop-pill {
  display: inline-block;
  text-decoration: none !important;
  color: var(--dop-white) !important;
  background-color: var(--dop-blue);
  border-radius: var(--dop-radius-pill);
  padding: .7em 1.5em;
  font-weight: 400;
  box-shadow: none;
  transition: var(--dop-transition);
}

.entry-content a.dop-pill:hover,
a.dop-pill:hover {
  background-color: var(--dop-blue-dark);
  color: var(--dop-white) !important;
}

/* Ghost pill, used over the hero and inside both bands. */
.entry-content a.dop-pill--ghost,
a.dop-pill--ghost,
.dop-band a.dop-pill {
  background-color: transparent;
  border: 1px solid var(--dop-white);
  font-size: 14px;
}

.entry-content a.dop-pill--ghost:hover,
a.dop-pill--ghost:hover,
.dop-band a.dop-pill:hover {
  background-color: var(--dop-blue-light);
  color: var(--dop-navy) !important;
}

/* Both bands right-align their button, as the original did. */
.dop-band .wp-block-column > p:last-child { text-align: right; }

/* --------------------------------------------------------------------------
   17. Kadence structural overrides
   -------------------------------------------------------------------------- */

/* Kadence's boxed content card is not part of this design. */
.content-bg,
.entry-content-wrap {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* No page-title hero band on the front page. */
.home .entry-hero-container,
.home .entry-hero {
  display: none;
}

/* --------------------------------------------------------------------------
   18. Hero
   -------------------------------------------------------------------------- */

.dop-hero { position: relative; }

.dop-hero__title {
  position: relative;
  z-index: 1;
}

/* Association logo captions: dark enough to read against the sky. */
.dop-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  margin-top: 2rem;
  font-size: .8rem;
  color: white;
}

.dop-logos > * { flex: 1 1 10rem; }

.dop-logos img { height: auto; max-width: 150px; }

/* --------------------------------------------------------------------------
   19. Accessibility
   -------------------------------------------------------------------------- */

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: .875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

:focus-visible {
  outline: 2px solid var(--dop-blue-dark);
  outline-offset: 2px;
}

/* ==========================================================================
   20. Spacing corrections and wrapper fixes
   ========================================================================== */

/* Blocks carry their own bottom margins, which stacked on top of the band
   padding and left a dead strip under each section. Zero the last one. */
.dop-band > .wp-block-columns,
.dop-band .wp-block-column > *:last-child,
.dop-latest > *:last-child {
  margin-bottom: 0;
}

.dop-band .wp-block-columns {
  align-items: center;
  margin-top: 0;
}

/* Tighter than the 100px the original used, because Kadence already adds
   container padding of its own. */
@media (min-width: 800px) {
  .dop-band  { padding: 80px 2rem; }
  .dop-latest { padding: 80px 2rem; }
}

/* Hero: let the content set the height instead of forcing a viewport box,
   which was leaving a large empty area below the button. */
.dop-hero {
  min-height: 0;
  padding: 8vh 25px;
  align-items: center;
}

@media (max-width: 799px) {
  .dop-hero { padding: 40px 1rem; }
}

.dop-hero .wp-block-group > *:last-child { margin-bottom: 0; }

/* The intro paragraph and logos sat too far from the heading. */
.dop-intro { margin-top: 1.5rem; }

.dop-logos { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   21. Inner page background
      The original gave inner pages a light blue panel. Kadence's wrapper is
      #inner-wrap / .site-container rather than .content-area, so target both.
      Delete this whole block if the inner pages should be white.
   -------------------------------------------------------------------------- */

/* Kadence paints the page background with
   `body.content-style-unboxed .site` on #wrapper, so the override has to beat
   that selector. Delete this block if the inner pages should stay white. */
body.content-style-unboxed:not(.home):not(.blog):not(.single):not(.error404) .site {
  background: var(--dop-blue-light);
}

/* #wrapper also contains the header and footer, so restore those. */
body:not(.home) .site-header,
body:not(.home) #masthead {
  background-color: var(--dop-white);
}

body:not(.home) .site-footer,
body:not(.home) #colophon {
  background-color: #01131c;
}

/* Inner page title band picks up the same blue. */
body:not(.home) .entry-hero-container {
  background-color: var(--dop-blue-light);
}

/* ==========================================================================
   22. Inner page headers
      Original: .page-header, 50px vertical padding, with a per-page
      illustration positioned top right. Keyed off post IDs in the original;
      keyed off a modifier class here so it survives an ID change.
   ========================================================================== */

.dop-page-header {
  margin-bottom: 50px;
  padding: 50px 0;
  background-repeat: no-repeat;
  background-position: right 2rem top;
}

@media (max-width: 799px) {
  .dop-page-header {
    padding: 20px 0;
    background-size: 40%;
  }
}

.dop-page-header h1 {
  color: var(--dop-navy);
  font-weight: 900;
  margin: 0;
}

.dop-page-header--therapy    { background-image: url("../images/speech1.svg"); }
.dop-page-header--therapist  { background-image: url("../images/books1.svg"); }
.dop-page-header--faqs       { background-image: url("../images/q-mark1.svg"); }
.dop-page-header--conduct    { background-image: url("../images/conduct1.svg"); }
.dop-page-header--blog       { background-image: url("../images/pencil-blog.svg"); }

/* Content column sat 3rem clear of the sidebar. */
body:not(.home) .entry-content { padding-right: 3rem; }

@media (max-width: 799px) {
  body:not(.home) .entry-content { padding-right: 0; }
}

/* ==========================================================================
   23. Sidebar
      Original widget panel: 2rem padding, 1rem radius, a 10% white wash
      over the light blue page background.
   ========================================================================== */

.sidebar-inner-wrap .widget,
.primary-sidebar .widget,
.dop-aside {
  margin: 0 0 1em;
  padding: 2rem;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, .1);
}

.sidebar-inner-wrap .widget-title,
.primary-sidebar .widget-title,
.dop-aside h2,
.dop-aside h6 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dop-white);
  margin-top: 0;
  text-transform: none;
  letter-spacing: 0;
}

.dop-aside address {
  font-style: italic;
  margin-bottom: 1em;
}

/* FAQ toggles on the original had a blue rule beneath each item. */
.dop-faq details {
  border-bottom: 1px solid var(--dop-blue);
  padding-bottom: 1em;
}

.dop-faq summary {
  color: var(--dop-navy);
  font-weight: 700;
}

.dop-faq details p {
  font-size: 1.1rem;
  padding-left: 1em;
}

/* ==========================================================================
   24. Corrections after reviewing every original page
   ========================================================================== */

/* --- Sidebar panel ---------------------------------------------------------
   On the blue inner pages the panel is a white wash over the blue. On the
   blog index, which keeps a white background, it needs a solid light blue. */

.sidebar-inner-wrap .widget,
.primary-sidebar .widget,
.dop-aside {
  background-color: rgba(255, 255, 255, .3);
}

.blog .sidebar-inner-wrap .widget,
.single .sidebar-inner-wrap .widget,
.blog .primary-sidebar .widget,
.single .primary-sidebar .widget {
  background-color: var(--dop-blue-light);
}

/* --- Contact page ----------------------------------------------------------
   No sidebar on this one: the panel is a column inside the page content.
   Set Page Layout to Full Width for the Contact page in Kadence. */

.dop-contact-aside {
  background-color: rgba(255, 255, 255, .3);
  border-radius: 1rem;
  padding: 2rem;
}

.dop-contact-aside h2 {
  color: var(--dop-white);
  font-size: 1rem;
  font-weight: 700;
  margin-top: 0;
}

/* --- Contact form ----------------------------------------------------------
   Fields are white with a generous radius and no visible border. */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  background: var(--dop-white);
  border: 0;
  border-radius: 10px;
  padding: .9em 1em;
  box-shadow: none;
}

.wpcf7 label {
  font-size: .95rem;
  color: var(--dop-navy);
}

.wpcf7 textarea { min-height: 18em; }

.wpcf7 input[type="submit"] {
  background-color: var(--dop-blue);
  padding: .6em 1.8em;
}

/* --- FAQ accordion ---------------------------------------------------------
   Original shows a "+" before each bold navy question, with a thin blue rule
   beneath. Markers are drawn here so no plugin is needed. */

.dop-faq details {
  border-bottom: 1px solid var(--dop-blue);
  padding: 1em 0;
}

.dop-faq summary {
  list-style: none;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--dop-navy);
  cursor: pointer;
  padding-left: 1.6em;
  position: relative;
}

.dop-faq summary::-webkit-details-marker { display: none; }

.dop-faq summary::before {
  content: "+";
  position: absolute;
  left: 0;
  font-weight: 700;
}

.dop-faq details[open] summary::before { content: "\2013"; }

.dop-faq details p {
  font-size: 1.1rem;
  padding-left: 1.6em;
  margin-top: .8em;
}

/* --- Blog index ------------------------------------------------------------
   Stays white, unlike the other inner pages. Already excluded from the blue
   rule; this just restores the light blue strip above the footer. */

.blog .site-middle-footer-wrap,
.single .site-middle-footer-wrap {
  border-top: 50px solid var(--dop-blue-light);
}

/* --- Association logo tiles on The Therapist ------------------------------- */


.home .dop-logos > * {
  background-color: transparent;
  padding: 0;
}

/* ==========================================================================
   25. Footer, built with Kadence's Footer Builder
      Three widget columns on #01131c, under a 50px light blue band.
   ========================================================================== */

.site-middle-footer-wrap,
.site-middle-footer-inner-wrap,
.site-top-footer-wrap,
.site-bottom-footer-wrap,
#colophon {
  background-color: #01131c;
}

.site-middle-footer-wrap {
  border-top: 50px solid var(--dop-blue-light);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

#colophon .widget-title,
#colophon .wp-block-heading,
#colophon h2 {
  color: var(--dop-blue);
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 1rem;
}

#colophon,
#colophon p,
#colophon address {
  color: var(--dop-white);
}

#colophon a {
  color: var(--dop-white);
  line-height: 2em;
  text-decoration: none;
}

#colophon a:hover { color: var(--dop-blue-light); }

#colophon .current-menu-item > a,
#colophon .current_page_item > a {
  color: var(--dop-blue);
}

#colophon ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

#colophon li { line-height: 2em; }

#colophon .side-contact svg {
  width: 1em;
  height: 1em;
  fill: var(--dop-white);
  vertical-align: middle;
  margin-right: .6em;
}

/* Kadence's own credit row, which the original did not have. */
.site-bottom-footer-wrap { display: none; }

/* ==========================================================================
   26. Band width consistency
      The bands are full-bleed, but their contents must line up with each
      other and with the hero. Pinning the inner width here rather than
      relying on each block's own layout attribute, which can be lost when
      markup is pasted or re-saved in the editor.
      Set --dop-content-max to match Kadence's Content Max Width.
   ========================================================================== */

:root { --dop-content-max: 1290px; }

/* Descendant selectors, not child: depending on whether a group block kept
   its constrained layout, the columns may sit one level deeper inside a
   .wp-block-group__inner-container. */
.dop-band .wp-block-columns,
.dop-latest > *,
.dop-latest .wp-block-group__inner-container > *,
.dop-hero .wp-block-cover__inner-container > * {
  max-width: var(--dop-content-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Any intermediate wrapper must not constrain or offset its child. */
.dop-band > .wp-block-group__inner-container,
.dop-latest > .wp-block-group__inner-container {
  max-width: none;
  width: 100%;
  margin: 0;
}

/* Side gutters, so content never touches the viewport edge. */
.dop-band,
.dop-latest {
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 799px) {
  .dop-band,
  .dop-latest {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* The hero's inner group follows the same measure. */
.dop-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--dop-content-max);
  margin: 0 auto;
}

/* ==========================================================================
   27. Mobile gutters
      Full-bleed sections were letting content sit almost against the screen
      edge. One gutter value, applied consistently to every section.
   ========================================================================== */

:root { --dop-gutter: 20px; }

@media (max-width: 1023px) {

  .dop-hero,
  .dop-band,
  .dop-latest {
    padding-left: var(--dop-gutter);
    padding-right: var(--dop-gutter);
  }

  /* The cover block's inner container has padding of its own that can
     collapse to zero; make it follow the same gutter. */
  .dop-hero .wp-block-cover__inner-container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Stack the intro and keep the headshot off the edge. */
  .dop-intro { margin-top: 1rem; }

  .dop-intro__text {
    border-left: 0;
    padding-left: 0;
    padding-top: 1rem;
  }

  .dop-intro .wp-block-column:first-child { margin-bottom: 1rem; }

  .dop-logos img { max-width: 100%; }

  /* Illustrations centred and smaller. */
  .dop-band__img img {
    max-width: 55%;
    margin-bottom: 2rem;
  }

  /* Latest article: pencil moves beside the heading, post goes full width. */
  .dop-latest { background: none; }

  .dop-latest h2 {
    background: url("../images/pencil-blog.svg") right 10% center no-repeat;
    background-size: auto 100%;
    padding: 2em 0;
  }

  .dop-latest .wp-block-query { margin-left: 0; }

  /* Footer columns align with the body gutter. */
  #colophon .site-container,
  #colophon .site-middle-footer-inner-wrap {
    padding-left: var(--dop-gutter);
    padding-right: var(--dop-gutter);
  }
}

@media (max-width: 767px) {

  .dop-hero__title {
    font-size: 30px;
    text-align: center;
  }

  .dop-band { padding-top: 50px; padding-bottom: 50px; }

  .dop-latest { padding-top: 50px; padding-bottom: 50px; }

  .dop-latest h2 { font-size: 1.75rem; }

  /* Buttons stay right-aligned on mobile, as in the original. */
  .dop-band .wp-block-column > p:last-child { text-align: right; }

  .dop-pill { font-size: 14px; }
}

/* Never let an image or embed push the page sideways. */
img, svg, iframe, video { max-width: 100%; height: auto; }

body { overflow-x: hidden; }

/* ==========================================================================
   28. Headshot and association logos — exact original treatment
   ========================================================================== */

/* Headshot: rounded, hairline white border, soft white halo. */
.dop-intro .wp-block-column:first-child img {
  border-radius: 15px;
  border: 1px solid var(--dop-white);
  box-shadow: 0 0 2px 1em rgba(250, 250, 250, .2);
}

@media (max-width: 799px) {
  .dop-intro .wp-block-column:first-child {
    text-align: center;
    margin-bottom: 2.5rem;
  }
  .dop-intro .wp-block-column:first-child img { display: inline-block; }
}

/* Logos sit in pale tiles, three across, on every breakpoint. */
.dop-logos {
  display: flex;
  gap: 0;
  margin-top: 2rem;
}

.dop-logos > * {
  flex: 1;
  margin-right: 5%;
  padding: .5em;
}

.dop-logos > *:last-child { margin-right: 0; }

.dop-logos img {
  max-width: 100px;
  height: auto;
}

@media (max-width: 799px) {
  .dop-logos img { max-width: 100%; }
}

.dop-logos > * {
  font-size: 9px;
  font-weight: 100;
  max-width: 15em;
}

/* ==========================================================================
   29. Gutters, applied to the inner wrappers
      Padding on the full-bleed sections was being zeroed somewhere in
      Kadence's alignfull handling, so the gutter goes on the constrained
      inner element instead, where nothing competes with it.
   ========================================================================== */

.dop-band .wp-block-columns,
.dop-latest > *,
.dop-latest .wp-block-group__inner-container > *,
.dop-hero .wp-block-cover__inner-container > * {
  box-sizing: border-box;
  padding-left: var(--dop-gutter);
  padding-right: var(--dop-gutter);
}

/* Desktop keeps the wider gutter the original used. */
@media (min-width: 1024px) {
  .dop-band .wp-block-columns,
  .dop-latest > *,
  .dop-latest .wp-block-group__inner-container > *,
  .dop-hero .wp-block-cover__inner-container > * {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* The max-width now includes the gutter, so add it back to keep the text
   measure the same as before. */
:root { --dop-content-max: 1290px; }

.dop-band .wp-block-columns,
.dop-latest > *,
.dop-hero .wp-block-cover__inner-container > * {
  max-width: calc(var(--dop-content-max) + 4rem);
}

/* Columns inside a band must not add their own horizontal padding on top. */
.dop-band .wp-block-column {
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   30. Single gutter
      Section 29 moved the gutter onto the inner wrapper, but the outer
      sections still carried their own, so content was inset twice.
      Vertical padding stays on the section; horizontal belongs to the
      inner wrapper alone.
   ========================================================================== */

.dop-hero,
.dop-band,
.dop-latest {
  padding-left: 0;
  padding-right: 0;
}


/* ==========================================================================
   31. Homepage: image behind the header
      In the original, .bg-wrap wraps the header AND the hero, and closes
      before the blue band — confirmed from the live page source. So the
      photograph covers exactly that region, not the whole page.

      Reproduced by lifting the header out of the flow on the front page so
      the hero starts at the top of the viewport, with the header
      transparent over it. The cover block keeps the image, so `cover` sizes
      against the same box the original used.

      If Kadence offers Transparent Header (Customize > Header), enable it
      for the front page and this block can be reduced to the hero padding.
   ========================================================================== */

.home #masthead {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border: 0;
}

.home #masthead .site-header-wrap,
.home #masthead .site-header-row,
.home #masthead .site-header-upper-wrap,
.home #masthead .site-main-header-wrap,
.home #masthead .site-top-header-wrap,
.home #masthead .site-bottom-header-wrap,
.home #masthead .site-header-inner-wrap {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border: 0;
}

/* Hero now starts at the very top, so it carries the header's height as
   padding to keep its content clear of the navigation. */
.home .dop-hero {
  padding-top: calc(100px + 8vh);
}

@media (max-width: 1023px) {
  .home .dop-hero { padding-top: calc(80px + 40px); }
}

/* Keep the image on the cover block, as the original kept it on .bg-wrap. */
.home .dop-hero .wp-block-cover__image-background {
  display: block;
}

/* Mobile header stays see-through too. */
@media (max-width: 1023px) {
  .home #mobile-header,
  .home .site-header-mobile-section-left,
  .home .site-header-mobile-section-right {
    background-color: transparent;
    background-image: none;
  }
}

/* The sticky header, once scrolled, needs its background back or the menu
   becomes unreadable over the blue band. */
.home .site-header-row.item-is-fixed:not(.item-at-start),
.home #masthead.item-is-fixed:not(.item-at-start) {
  background-color: var(--dop-white);
}

/* ==========================================================================
   32. Front page: close the gap above the hero
      Two things were leaving a white strip between header and image:
      1. Kadence's content vertical padding (body.content-vertical-padding-show)
      2. the absolutely positioned header sitting under the admin bar
   ========================================================================== */

/* 1. No content padding above a full-bleed hero. */
.home #inner-wrap,
.home .content-area,
.home .site-container,
.home .entry-content-wrap,
.home.content-vertical-padding-show .content-area,
.home.content-vertical-padding-show #inner-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.home .entry-content > *:first-child { margin-top: 0; }

/* 2. Admin bar offset, so the header is not hidden behind it while logged in. */
.admin-bar.home #masthead { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar.home #masthead { top: 46px; }
}

/* 3. The hero must start at the very top of the content area. */
.home .dop-hero {
  margin-top: 0;
}

/* ==========================================================================
   33. Header title and navigation — exact original treatment
      Title is two lines: "Dublin Online" in #a7cfe2 over "Psychotherapy"
      in #6ba5c1, both Poppins 900 at 30px with a tight line-height.
      WordPress escapes HTML in the site title, so this is rendered from an
      HTML element in the Header Builder (see header-logo.html) rather than
      from Settings > General.
   ========================================================================== */

.dop-logo,
.site-title a {
  display: inline-block;
  font-family: var(--dop-font);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  text-decoration: none;
  color: var(--dop-blue-light);
}

.dop-logo span,
.site-title a span {
  display: block;
  color: var(--dop-blue);
}

.dop-logo:hover,
.dop-logo:hover span {
  opacity: .85;
}

@media (max-width: 767px) {
  .dop-logo,
  .site-title a { font-size: 22px; }
}

/* --- Navigation ----------------------------------------------------------- */

.header-navigation .primary-menu-container > ul > li.menu-item > a,
.primary-menu-container > ul > li > a,
.main-navigation .primary-menu-container > ul > li > a {
  color: #536771;
  font-weight: 500;
  font-size: 15px;
}

.header-navigation .primary-menu-container > ul > li.menu-item > a:hover {
  color: var(--dop-blue);
}

/* --- Contact pill, last item in the menu ---------------------------------- */

.header-navigation .primary-menu-container > ul > li.menu-item:last-child > a,
.primary-menu-container > ul > li:last-child > a,
.main-navigation .primary-menu-container > ul > li:last-child > a {
  background-color: var(--dop-blue);
  border-radius: var(--dop-radius-pill);
  padding: .7em 1.5em;
  color: var(--dop-white);
}

.header-navigation .primary-menu-container > ul > li.menu-item:last-child > a:hover,
.primary-menu-container > ul > li:last-child > a:hover {
  background-color: var(--dop-blue-dark);
  color: var(--dop-white);
}

/* Kadence draws an underline on the current item; the pill does not want it. */
.header-navigation .primary-menu-container > ul > li.menu-item:last-child > a::after {
  display: none;
}

/* ==========================================================================
   32. Inner pages: 60/40 header band + narrow reading column
      Replaces the old .dop-page-header (illustration as a small background,
      top right) and .dop-first-letter (drop cap) on converted pages.
      Header: title + intro left (60%), large illustration right (40%).
      Body: white, single column max 720px, left-aligned with the header text.
   ========================================================================== */

/* --- Header band --------------------------------------------------------- */

.dop-pagehead {
  background: var(--dop-blue-light);
  padding: 64px 0 72px;
}

.dop-pagehead > .wp-block-group__inner-container,
.dop-pagebody > .wp-block-group__inner-container {
  box-sizing: border-box;
  max-width: calc(var(--dop-content-max, 1200px) + 4rem);
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.dop-pagehead__cols {
  margin: 0;
  gap: 4rem;
}

.dop-pagehead h1 {
  color: var(--dop-navy);
  font-weight: 900;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin: 0 0 .6em;
}

.dop-pagehead__intro {
  color: var(--dop-navy);
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 34em;
  margin: 0;
}

.dop-pagehead__img figure,
.dop-pagehead__img .wp-block-image {
  margin: 0;
}

.dop-pagehead__img img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-left: auto;
}

/* --- Reading column ------------------------------------------------------ */

.dop-pagebody {
  background: var(--dop-white);
  padding: 64px 0 88px;
}

.dop-pagebody > .wp-block-group__inner-container > * {
  max-width: 720px;
  margin-left: 0;
  margin-right: 0;
}

.dop-pagebody p,
.dop-pagebody li {
  color: var(--dop-ink);
  line-height: 1.7;
}

.dop-pagebody h2 {
  color: var(--dop-navy);
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 2.2em 0 .6em;
}

.dop-pagebody > .wp-block-group__inner-container > :first-child {
  margin-top: 0;
}

/* No blue strip between the white body and the footer. */
body:has(.dop-pagebody) .content-area {
  margin-bottom: 0;
}

/* --- Tablet / mobile ----------------------------------------------------- */

@media (max-width: 1023px) {
  .dop-pagehead > .wp-block-group__inner-container,
  .dop-pagebody > .wp-block-group__inner-container {
    padding-left: var(--dop-gutter, 1.25rem);
    padding-right: var(--dop-gutter, 1.25rem);
  }
  .dop-pagehead__cols { gap: 2rem; }
}

/* WordPress stacks columns below 782px: put a smaller illustration above
   the title instead of a full-width one under the intro. */
@media (max-width: 781px) {
  .dop-pagehead { padding: 40px 0 48px; }
  .dop-pagehead__img { order: -1; }
  .dop-pagehead__img img { max-width: 180px; margin: 0; }
  .dop-pagebody { padding: 40px 0 56px; }
  .dop-pagebody h2 { font-size: 1.4rem; }
}

/* --- Drop cap removed ---------------------------------------------------- */
/* Covers any page still using the old .dop-first-letter wrapper. */
.dop-first-letter p:first-of-type::first-letter {
  font-size: inherit;
  line-height: inherit;
}

/* ==========================================================================
   33. Site-wide alignment, header spacing, cream content
      - Every section's content sits on Kadence's own container
        (--global-content-width + --global-content-edge-padding) — the same
        box the header uses — so section text lines up with the logotype
        and the right edge lines up with the Contact button.
        Set the width itself in Customizer → General → Layout →
        Content Max Width (1290px recommended).
      - Header gets breathing room and no longer overlaps the page.
      - White content areas become warm cream.
      Tested in the browser at 1440px and 375px before hand-over.
   ========================================================================== */

:root {
  --dop-cream: #F7F4EF;
}

/* --- One container for everything ---------------------------------------- */

.dop-band .wp-block-columns,
.dop-latest > .wp-block-group__inner-container,
.dop-hero .wp-block-cover__inner-container,
.dop-pagehead > .wp-block-group__inner-container,
.dop-pagebody > .wp-block-group__inner-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--global-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--global-content-edge-padding);
  padding-right: var(--global-content-edge-padding);
}

/* Children of those containers must not add a second inset. */
.dop-latest .wp-block-group__inner-container > *,
.dop-hero .wp-block-cover__inner-container > *,
.dop-pagehead__cols {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Hero keeps its 900px measure for readability, but now starts at the
   logo's left edge instead of being centred. (!important is needed to beat
   WordPress core's constrained-layout auto margins.) */
.dop-hero .wp-block-cover__inner-container .is-layout-constrained > * {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* The old 3rem right padding on inner pages pushed full-width sections
   24px left and left a blue strip down the right edge. */
body:not(.home) .entry-content {
  padding-right: 0;
}

/* No gap between the blue header band and the cream body. */
.entry-content > .dop-pagehead,
.entry-content > .dop-pagebody {
  margin-top: 0;
  margin-bottom: 0;
}

/* --- Header ---------------------------------------------------------------- */

/* Stop the header overlapping the page (Kadence "transparent header" made
   it absolutely positioned) so it can be taller without covering content.
   Cleaner still: Customizer → Header → Transparent Header → off. */
body.transparent-header #masthead,
#masthead {
  position: relative;
}

#masthead .site-header-row-container-inner {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Pages that open with a full-width band start straight under the header. */
body.home .content-area,
body:has(.dop-pagehead) .content-area {
  margin-top: 0;
}

/* --- Cream content areas --------------------------------------------------- */

.dop-pagebody,
.dop-latest {
  background-color: var(--dop-cream);
}

/* ==========================================================================
   34. Reading column + memberships aside (The Therapist)
      Body splits 2/3 text, 1/3 aside. The aside is a white card on the
      cream, holding each association as a row: the existing white logo on
      a navy tile, then the name and membership level. Text-only
      memberships follow under a small label. Sticks while scrolling on
      desktop; stacks under the text on mobile.
   ========================================================================== */

.dop-pagebody--aside > .wp-block-group__inner-container > .dop-pagebody__cols {
  max-width: none;
  margin: 0;
  gap: 4rem;
}

.dop-pagebody__main > * {
  max-width: 720px;
}

.dop-pagebody__main > :first-child {
  margin-top: 0;
}

.dop-pagebody__aside {
  align-self: flex-start;
  position: sticky;
  top: 2rem;
}

/* --- Card ------------------------------------------------------------------ */

.dop-memberships {
  background: var(--dop-white);
  border-radius: 1rem;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 1px 2px rgba(17, 55, 72, .06), 0 12px 32px rgba(17, 55, 72, .06);
}

.dop-pagebody .dop-memberships__title,
.dop-memberships__sub {
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dop-blue-dark);
}

.dop-memberships .dop-memberships__sub {
  margin: .25rem 0 .5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #E3ECF1;
}

.dop-memberships ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dop-memberships li {
  margin: 0;
  padding: .9rem 0;
  border-top: 1px solid #E3ECF1;
}

.dop-memberships li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Logo rows */
.dop-memberships a {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--dop-navy);
  text-decoration: none;
}

.dop-memberships a:hover .dop-memberships__name {
  color: var(--dop-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dop-memberships__tile {
  flex: 0 0 88px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dop-blue-dark);
  border-radius: 10px;
  padding: 8px;
  box-sizing: border-box;
}

.dop-memberships__tile img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.dop-memberships__name {
  display: block;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--dop-navy);
}

.dop-memberships__level {
  display: block;
  margin-top: .2em;
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--dop-ink);
}

/* Text-only rows */
.dop-memberships__list--text li {
  padding: .6rem 0;
}

/* --- Mobile ---------------------------------------------------------------- */

@media (max-width: 781px) {
  .dop-pagebody--aside > .wp-block-group__inner-container > .dop-pagebody__cols {
    gap: 2.5rem;
  }
  .dop-pagebody__aside {
    position: static;
  }
}