/* Caroline B. Goldberg — shared website stylesheet.
   Structural normalization only: original colors, sections and text retained. */

body {
  margin: 0;
  font-family: Georgia, serif;
  background: #fff;
  color: #000;
  line-height: 1.6;
  padding-bottom: 3em;
}

/* Smooth in-page scrolling */
html {
  scroll-behavior: smooth;
}

/* --------------------------------------------------
   🌐 DESKTOP NAVIGATION
-------------------------------------------------- */

.top-menu {
  background: #264D74;
  color: white;
  padding: 1em;
  position: relative;
}


.menu-links {
  display: flex;
  justify-content: center;
  gap: .5em;

  list-style: none;
  padding: 0;
  margin: 0;
}


.menu-links a {
  color: white;
  text-decoration: none;
  font-size: 1rem;

  display: block;
  padding: 1em .9em;

  font-weight: bold;
}


.menu-links a:hover,
.menu-links a:focus-visible {
  color: #EFBF6E;
}

/* Highlight the current page in the desktop navigation */
.menu-links a[aria-current="page"] {
  color: #EFBF6E;
  border-bottom: 3px solid #EFBF6E;
}

/* --------------------------------------------------
   SHARED HAMBURGER NAVIGATION
   Home shows it on every viewport; interior pages show
   it at 768px and below, with desktop horizontal nav above.
-------------------------------------------------- */
.site-menu {
  display: none;
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1000;
}

/* Home has no horizontal menu, so its hamburger is always visible. */
.home .site-menu {
  display: block;
}

.menu-toggle {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(25, 55, 65, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}

/* Three lines and X animation. */
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.site-menu.open .menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-menu.open .menu-toggle span:nth-child(2) {
  opacity: 0;
}
.site-menu.open .menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hidden dropdown revealed by the .open class from site.js. */
.menu-panel {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  min-width: 230px;
  padding: 0.6rem 0;
  background: rgba(30, 66, 76, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.75rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.site-menu.open .menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-panel a {
  display: block;
  padding: 0.8rem 1.1rem;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.25;
  transition: background 0.2s ease, color 0.2s ease;
}

.menu-panel a:hover,
.menu-panel a:focus-visible {
  background: rgba(239, 191, 110, 0.95);
  color: #370A10;
  outline: none;
}

.menu-panel a[aria-current="page"] {
  background: rgba(239, 191, 110, 0.22);
  /* Add an unobtrusive gold indicator without shifting link text. */
  box-shadow: inset 3px 0 #EFBF6E;
}

.menu-toggle:focus-visible {
  outline: 3px solid #EFBF6E;
  outline-offset: 3px;
}


/* --------------------------------------------------
   🟩 ARCHIVE HEADER STYLE
-------------------------------------------------- */

/* --------------------------------------------------
   SHARED INTERIOR PAGE HEADER
   Structure only — no page-specific color or typography.
-------------------------------------------------- */

.archive-header {
  position: relative;
  padding: .1rem;
  text-align: center;
  font-size: 2em;
}


/* Shared structural rule for the page title. */
.archive-header h1 {
  margin-bottom: 10px;
  position: relative;
  margin-top: 0px;
}


/* --------------------------------------------------
   📄 ARCHIVE BODY
-------------------------------------------------- */

.archive-content {
  padding: 2em 5vw;

  /* Slightly narrower measure for more comfortable
     long-form reading */
  max-width: 720px;

  margin: 0 auto;
}


/* Main page title */
.archive-content h1 {
  color: #264D74;
  margin-top: 0;
}


/* Article section headings */
.archive-content h2 {
  margin-top: 1.5em;
  color: #2AB3ED;
}


/* --------------------------------------------------
   ⬆️ BACK TO TOP LINK
-------------------------------------------------- */

.back-top {
  text-align: center;
  margin-top: 4em;
}


.back-top a {
  color: #2AB3ED;
  text-decoration: none;
  font-weight: bold;
}


.back-top a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------
   RESPONSIVE INTERIOR NAVIGATION (preserves Anxiety)
-------------------------------------------------- */
@media (max-width: 768px) {
  /* Swap the horizontal interior navigation for the hamburger. */
  .top-menu { display: none; }
  .site-menu { display: block; }

  /* Anxiety's original mobile dropdown sizing. */
  body:not(.home) .menu-panel {
    width: min(78vw, 280px);
    min-width: 0;
  }

  /* Adjust the hamburger's vertical alignment on interior pages only. */
body:not(.home) .site-menu {
  top: 0.4rem;
}

  /* Keep the Anxiety page title on one line, as before. */
  .archive-header {
    padding: .4em 1em 0.45em 1.1em;
    font-size: clamp(1rem, 5vw, 1.85rem);
  }
  .archive-header h1 {
    white-space: nowrap;
    text-align: center;
  }
}

/* Preserve the homepage's original smaller-screen menu width. */
@media (max-width: 600px) {
  .home .menu-panel {
    width: min(78vw, 280px);
    min-width: 0;
  }
}


/* Introductory statement beneath the page title */
  .archive-content .lead {
    font-size: 1.15em;
    line-height: 1.35;
    color: #218cb7;
    font-weight: bold;
    font-style: italic;
    padding-top:  1em;
  }

/* --------------------------------------------------
   HOME PAGE ROOT OVERRIDES
   Anxiety retains its previously verified body defaults.
-------------------------------------------------- */
body.home {
  padding-bottom: 0;
  line-height: normal;
  overflow-x: hidden;
}

/* --------------------------------------------------
   HOMEPAGE-ONLY STYLES
   All general section layout rules are scoped to .home.
-------------------------------------------------- */
.home section {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 3em;
      text-align: center;
      position: relative;
      z-index: 2;
    }

    .section-1 {
      position: relative;
      background: url('https://aoidefiles.us-east-1.linodeobjects.com/CarolineB/images/water2.jpg') center center / cover no-repeat;
      overflow: hidden;
      color: white;
    }

    .section-1::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5); /* soft dark veil */
      /*backdrop-filter: blur(2px); /* optional blur */
      /*-webkit-backdrop-filter: blur(2px);*/
      z-index: 1;
    }

    .section-1 > div {
      position: relative;
      z-index: 2;
    }

    .section-2 {
      position: relative;
      overflow: hidden;
      color: white;
      background: linear-gradient(135deg, #DEEC9D, #BDE396, #A6D994, #8BC598, #6CB49C, #539EA1, #4186A9, #38759A, #335F8E, #264D74);
      background-size: 200% 200%;
      animation: gradient-cycle 30s ease infinite;
    }

    @keyframes gradient-cycle {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }


    .section-3 {
      position: relative;
      background: url('https://aoidefiles.us-east-1.linodeobjects.com/CarolineB/images/IMG_1610.jpeg') center center / cover no-repeat;
      color: white;
      overflow: hidden;
    }

    .section-3::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.4); /* adjust veil strength here */
      z-index: 1;
    }

    .section-3 > div {
      position: relative;
      z-index: 2;
    }


    .section-4 {
      position: relative;
      overflow: hidden;
      color: white;
      background: linear-gradient(135deg,
        #264D74,
        #335F8E,
        #38759A,
        #4186A9,
        #539EA1,
        #6CB49C,
        #8BC598,
        #A6D994,
        #BDE396,
        #DEEC9D);
      background-size: 200% 200%;
      animation: gradient-cycle-reverse 30s ease infinite;
    }




    @keyframes gradient-cycle-reverse {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }


    .section-5 {
      position: relative;
      background: url('https://aoidefiles.us-east-1.linodeobjects.com/CarolineB/images/IMG_1257.jpeg') center center / cover no-repeat;
      color: white;
      overflow: hidden;
    }

    .section-5::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.35); /* Adjust veil strength */
      z-index: 1;
    }

    .section-5 > div {
      position: relative;
      z-index: 2;
    }


      .section-6 {
        position: relative;
        overflow: hidden;
        color: white;
        background: linear-gradient(135deg,
          #2A4452, #1F5C6B, #266E85, #2AB3ED,
          #1D7F8C, #267172, #235B5E);
        background-size: 250% 250%;
        animation: gradient-shift-cta 40s ease-in-out infinite;
      }


      @keyframes gradient-shift-cta {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }


    .section-6 a:hover {
      text-decoration: none;
      color: #FFD700; /* soft gold hover effect */
    }

    .call-me-glow {
      display: inline-block;
      padding: 1.5em 1em;
      border-radius: 1em;
      background: linear-gradient(270deg, rgba(255, 215, 0, 0.5), rgba(255, 255, 255, 0.2), rgba(255, 215, 0, 0.5));
      background-size: 400% 400%;
      color: white;
      font-weight: bold;
      border: 2px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      animation: pulse-glow 6.5s ease-in-out infinite, gradientShift 6s ease-in-out infinite;
      transition: transform 0.3s ease;
      text-decoration: none;
    }


@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (max-width: 600px) {
  .call-me-glow {
    font-size: .5em;
    padding: 1em;
    width: 85%;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
  }
}

.call-me-glow:hover {
  transform: scale(1.05);
  text-decoration: none;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 215, 0, 1);
  }
}



  /* Centered, Glowing, Clickable Nautilus Shell */
    .nautilus {
      position: fixed;
      top: 18%;
      left: 50vw;
      transform: translate(-50%, 0);
      width: 300px;
      height: auto;
      z-index: 3;
      pointer-events: auto;
      opacity: 1;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      will-change: transform;
      filter:
        hue-rotate(190deg)      /* shift natural colors to blue */
        brightness(1.1)
        contrast(0.9)
        saturate(0.7)
        drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
    }

    @media (max-width: 600px) {
  .nautilus, .nautilus-bio-cta {
    top: 23%; /* instead of 10% */
  }
}


    .nautilus img {
      max-width: 100%;
      height: auto;
      display: block;
      transition: filter 0.3s ease;
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
      animation:
        pulse-scale 5s ease-in-out infinite,
        nautilus-glow 5s ease-in-out infinite;
    }

   @keyframes pulse-scale {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.02);
    }
  }

  @keyframes nautilus-glow {
    0%, 100% {
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    }
    50% {
      filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.9));
    }
  }

    .nautilus img:hover {
      filter: drop-shadow(0 0 35px rgba(255, 255, 255, 1));
      transform: scale(1.05);
      transition: transform 0.3s ease, filter 0.3s ease;
      cursor: pointer;
    }




  .phone-icon {
    font-size: 1.2em;
    margin-right: 0.4em;
    filter: drop-shadow(0 0 4px #FFD700);
}

  .cta-text {
    text-shadow: 0 0 6px #FFD700;
}

.scroll-hint {
  position: absolute;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 1rem;
  opacity: 0.8;
  animation: float-updown 5s ease-in-out infinite;
  color: #fff;
  z-index: 4;
}

.scroll-text {
  display: block;
  font-size: 2.1em;
  margin-bottom: 0.3em;
  text-shadow: 0 0 4px #FFD700;
}

.scroll-arrow {
  font-size: 2em;
  animation: pulse-arrow 7s infinite ease-in-out;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Arrow bobbing */
@keyframes float-updown {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 6px);
  }
}

/* Soft glow pulse on arrow */
@keyframes pulse-arrow {
  0%, 100% {
    opacity: 0.5;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 215, 0, 1);
  }
}

.scroll-hint.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}


.nautilus img.resting {
  animation: none !important;
}

.covid-banner {
  background: #EFBF6E;
  color: #000;
  text-align: center;
  padding: 1em 1.5em;
  font-weight: bold;
  font-size: 1rem;
  position: relative;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.section-cta {
  display: inline-block;
  margin-top: 0.8em;
  font-size: 0.5em;
  padding: 0.5em 1em;
  background: #EFBF6E;
  border: 1px solid #fff;
  color: #370A10;
  text-decoration: none;
  border-radius: 0.5em;
  transition: background 0.3s ease, color 0.3s ease;
}

.section-cta:hover {
  background: #FFD700;
  color: #000;
}


.bio-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.bio-modal.active {
  display: flex;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 1;
}

.modal-box {
  background: #ffffff;
  color: #000;
  max-width: 600px;
  padding: 2em;
  border-radius: 1em;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
  z-index: 2;
  position: relative;
  text-align: left;
  animation: fadeIn 0.4s ease;
}

.modal-photo {
  width: 100%;
  max-width: 180px;
  border-radius: 8px;
  float: left;
  margin: 0 1.2em 1.2em 0;
}

.modal-quote {
  font-style: italic;
  color: #555;
  margin: 0 0 1em;
}

.modal-close {
  position: absolute;
  top: 0.5em;
  right: 0.75em;
  background: none;
  border: none;
  font-size: 2em;
  line-height: 1;
  color: #000;
  cursor: pointer;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* 🧘 Section text padding for breathing room */


@media (max-width: 600px) {
  .section-text {
    font-size: .8em;
    padding: 0em .5em;
    line-height: 1.2;
  }
}


.nautilus-bio-cta {
  position: fixed;
  top: 12%;
  left: 50vw;
  transform: translateX(-50%);
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.4em 0.8em;
  color: #eefaff;
  border-radius: 0.75em;
  text-decoration: none;
  backdrop-filter: blur(3px);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
  z-index: 3;
  transition: all 0.3s ease;
  z-index:  2;
  margin-bottom:  20px;
}

@media (max-width: 600px) {
  .nautilus-bio-cta {
    margin-top:  30px;
    margin-bottom:  20px;
    width:  275px;
  }
}

/*.nautilus-bio-cta:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}*/

/* Leave space for the fixed hamburger beside the telehealth banner. */
.home .covid-banner {
  padding-right: 5rem;
}

/* --------------------------------------------------
   ANXIETY — PAGE-SPECIFIC HEADER
   Black band with white title.
-------------------------------------------------- */

.anxiety .archive-header {
  background: #000;
  color: #fff;
}

/* Use the same shared heading treatment as the other interior pages. */
.anxiety .archive-header h1 {
  color: #fff;
  font-weight: normal;
  white-space: normal;
  text-align: center;
}


/* Keep the Anxiety title controlled on small screens. */
@media (max-width: 768px) {

  .anxiety .archive-header h1 {
    white-space: nowrap;
    text-align: center;
  }

}

/* --------------------------------------------------
   ABOUT CAROLINE — PAGE-SPECIFIC PRESENTATION
   The shared archive layout and menus are unchanged.
-------------------------------------------------- */
/* Retain the About page's original yellow banner. */
.about .archive-header {
  background: #fcf66c;
}
/* H1 replaces plain header text; match its original black, normal-weight style. */
.about .archive-header h1 {
  color: #000;
  font-weight: normal;
  text-align: center;
  white-space: normal;
}
/* Keep the introductory portrait and quotation together. */
.about-intro {
  display: flex;
  align-items: center;
  gap: 2em;
  margin: 0 0 2.5em;
}
/* The image is confined to the introduction, without floating into the bio. */
.about-photo {
  flex: 0 0 auto;
  width: 139px;
  height: auto;
  margin: 0;
}
/* Position the two-line quotation alongside the portrait on larger screens. */
.about-quote {
  flex: 1;
  margin: 0;
  font-style: italic;
  font-size: 1.1em;
  line-height: 1.5;
}
/* Preserve the author's deliberate line break. */
.about-quote span {
  display: block;
}
/* Stack the portrait above the quotation on narrower screens. */
@media (max-width: 600px) {
  .about-intro {
    flex-direction: column;
    align-items: center;
    gap: 1.25em;
    text-align: center;
  }
  .about-quote {
    max-width: 30em;
  }
}
/* --------------------------------------------------
   PSYCHOTHERAPY — PAGE-SPECIFIC HEADER
   Keep the original bright blue band and white title.
-------------------------------------------------- */
.psychotherapy .archive-header {
  background: #2AB3ED;
  color: #fff;
}
/* Match the original normal-weight plain-text heading when promoted to H1. */
.psychotherapy .archive-header h1 {
  color: #fff;
  font-weight: normal;
}
/* Allow the full question to wrap rather than overflow on smaller screens. */
@media (max-width: 768px) {
  .psychotherapy .archive-header h1 {
    white-space: normal;
    text-align: center;
  }
}

/* CONTACT PAGE — append this block to the end of your current css/style.css.
   Do not replace the stylesheet: it contains your recent local tweaks. */

/* Restore the original contact page's red heading band. */
.contact .archive-header {
  background: #e63946;
  color: #fff;
}

/* Keep its white headline while using the shared H1 structure. */
.contact .archive-header h1 {
  color: #fff;
  font-weight: normal;
  white-space: normal;
  text-align: center;
}




/* --------------------------------------------------
   UNIFIED INTERIOR PAGE PALETTE
   Preserve the homepage's existing visual design.
-------------------------------------------------- */

/* Gentle background across all interior pages. */
body:not(.home) {
  min-height: 100vh;
  background: linear-gradient(
    155deg,
    #fcfcf8 0%,
    #f1f6f3 48%,
    #e8f2f4 100%
  );
}



/* Reserve space beneath interior page headers for the photo strip. */
body:not(.home) .archive-header {
  position: relative;
  margin-bottom: 16px;
  border-bottom: none;
}


/* --------------------------------------------------
   PHOTOGRAPHIC TRANSITION
   Fade from header to photograph to page background.
-------------------------------------------------- */

body:not(.home) .archive-header {
  margin-bottom: 30px;
  border-bottom: none;
}


/* --------------------------------------------------
   SHARED PHOTOGRAPHIC STRIP

   Each interior page supplies its own:
   --strip-image
   --strip-position
   --strip-size
   --strip-height
-------------------------------------------------- */

body:not(.home) .archive-header::after {
  content: "";
  position: absolute;

  /* Overlap the header by 24px. */
  top: calc(100% - 24px);
  left: 0;
  right: 0;

  height: var(--strip-height, 70px);

  background-image: var(--strip-image);
  background-size: var(--strip-size, cover);
  background-position: var(--strip-position, center center);
  background-repeat: no-repeat;

  /* Fade into the image, then back to transparency. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 70%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 70%,
    transparent 100%
  );

  /* Decorative strip must not interfere with links. */
  pointer-events: none;
}

/* --------------------------------------------------
   PAGE-SPECIFIC PHOTOGRAPHIC STRIPS
-------------------------------------------------- */

/* About */
body.about {
  --strip-image:
    url("https://aoidefiles.us-east-1.linodeobjects.com/CarolineB/images/IMG_1610.jpeg");
  --strip-position: center 63%;
  --strip-size: cover;
  --strip-height: 125px;
}


/* Psychotherapy */
body.psychotherapy {
  --strip-image:
    url("https://aoidefiles.us-east-1.linodeobjects.com/CarolineB/images/IMG_1257.jpeg");
  --strip-position: center 65%;
  --strip-size: cover;
  --strip-height: 125px;
}


/* Anxiety */
body.anxiety {
  --strip-image:
    url("https://aoidefiles.us-east-1.linodeobjects.com/CarolineB/images/water2.jpg");
  --strip-position: center 32%;
  --strip-size: cover;
  --strip-height: 125px;
}

/* Services */
body.services {
  --strip-image:
    url("https://aoidefiles.us-east-1.linodeobjects.com/CarolineB/images/shellBkg.jpg");
  --strip-position: center 71%;
  --strip-size: cover;
  --strip-height: 125px;
}


/* Contact */
body.contact {
  --strip-image:
    url("https://aoidefiles.us-east-1.linodeobjects.com/CarolineB/images/IMG_1538.jpeg");
  --strip-position: center 71%;
  --strip-size: cover;
  --strip-height: 125px;
}

/* --------------------------------------------------
   ABOUT PAGE IN-PAGE NAVIGATION
-------------------------------------------------- */

.page-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em 1.5em;

  margin: 0 0 2.5em;
  padding: 0 0 1em;

  border-bottom: 1px solid #ddd;
}

.page-toc a {
  color: #264D74;
  text-decoration: none;
  font-weight: bold;
}

.page-toc a:hover,
.page-toc a:focus-visible {
  color: #2AB3ED;
  text-decoration: underline;
}


/* Give externally linked anchor sections breathing room */
.archive-content section[id] {
  scroll-margin-top: 2rem;
}


/* Separate the major About-page sections */
.about #services,
.about #credentials {
  margin-top: 3.5em;
}



/* --------------------------------------------------
   CONTACT FORM
-------------------------------------------------- */

.contact-form {
  max-width: 620px;
  margin: 2em auto 0;
}

.form-field {
  margin-bottom: 1.5em;
}

.form-field label,
.form-field legend {
  display: block;
  margin-bottom: .45em;
  font-weight: bold;
  color: #264D74;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: .8em;

  font: inherit;

  background: rgba(255, 255, 255, .8);
  border: 1px solid #9aaeb5;
  border-radius: .35em;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 3px solid rgba(42, 179, 237, .25);
  border-color: #2AB3ED;
}

.form-field fieldset,
fieldset.form-field {
  border: 0;
  padding: 0;
}

fieldset.form-field label {
  display: inline-block;
  margin-right: 1.5em;
  font-weight: normal;
  color: #000;
}

.form-note {
  margin-top: .5em;
  font-size: .9em;
  line-height: 1.45;
  color: #555;
}

.contact-form button {
  padding: .75em 1.4em;

  font: inherit;
  font-weight: bold;

  color: #fff;
  background: #264D74;

  border: 0;
  border-radius: .4em;
  cursor: pointer;
}

.contact-form button:hover,
.contact-form button:focus-visible {
  background: #2AB3ED;
}

/* Hidden bot trap. */
.form-trap {
  position: absolute;
  left: -9999px;
}

/* --------------------------------------------------
   ABOUT PAGE: AREAS OF FOCUS
   One column on small screens, two on wider screens.
   Add these rules to the end of css/style.css.
--------------------------------------------------- */

/* Lay out the six clinical categories as a responsive grid. */
.practice-focus .focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 2.75rem;
  max-width: 64rem;
}

/* Let longer category labels wrap without widening a column. */
.practice-focus .focus-group {
  min-width: 0;
}

/* Keep headings visually close to their associated lists. */
.practice-focus .focus-group h3 {
  margin: 0 0 0.65rem;
}

/* Give bullet lists consistent indentation and spacing. */
.practice-focus .focus-group ul {
  margin: 0;
  padding-left: 1.3rem;
}

.practice-focus .focus-group li + li {
  margin-top: 0.4rem;
}

/* Change to two columns when there is sufficient screen width. */
@media (min-width: 600px) {
  .practice-focus .focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



/* -----------------------------------------------
   ABOUT: REFINED AREAS OF FOCUS
   Editorial styling without visible bullets.
----------------------------------------------- */

/* Give each clinical category a subtle vertical accent. */
.about .practice-focus .focus-group {
    border-left: 2px solid #8AC8D9;
    padding-left: 1rem;
}

/* Establish a clear typographic hierarchy. */
.about .practice-focus .focus-group h3 {
    color: #264D74;
    font-size: 1.08rem;
    line-height: 1.35;
    margin: 0 0 0.85rem;
}

/* Remove bullet symbols while preserving list semantics. */
.about .practice-focus .focus-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Keep each specialty readable without extra decoration. */
.about .practice-focus .focus-group li {
    margin: 0;
    line-height: 1.45;
}

/* Use whitespace to separate individual specialties. */
.about .practice-focus .focus-group li + li {
    margin-top: 0.55rem;
}


/* Indent specialties beneath their category headings. */
/* Preserve the existing blue border and remove bullets. */
.about .practice-focus .focus-group ul {
    list-style: none;
    padding-left: 1.25rem;
}




/* About page only: extra breathing room below photo strip. */
body.about .archive-header {
    margin-bottom: 75px;
}


/* --------------------------------------------------
   SERVICES PAGE
   Maintain the About banner and photo treatment for now.
   Reuse the existing shared interior-page reading column.
-------------------------------------------------- */
body.services .archive-header {
  background: #78af6b;
  margin-bottom: 75px;
}

body.services .archive-header h1 {
  color: #fff;
  font-weight: normal;
  text-align: center;
  white-space: normal;
}

body.services {
  --strip-image: url("https://aoidefiles.us-east-1.linodeobjects.com/CarolineB/images/shellBkg.jpg");
  --strip-position: center 63%;
  --strip-size: cover;
  --strip-height: 125px;
}

/* Carry the refined, bullet-free focus grid onto Services. */
.services .practice-focus .focus-group {
  border-left: 2px solid #8AC8D9;
  padding-left: 1rem;
}

.services .practice-focus .focus-group h3 {
  color: #264D74;
  font-size: 1.08rem;
  line-height: 1.35;
  margin: 0 0 0.85rem;
}

.services .practice-focus .focus-group ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.25rem;
}

.services .practice-focus .focus-group li {
  margin: 0;
  line-height: 1.45;
}

.services .practice-focus .focus-group li + li {
  margin-top: 0.55rem;
}

.services .archive-content h2 {
  text-align:  center;
}






/* -----------------------------------------------
   SHARED SITE FOOTER
   Black background, white text, blue hover.
----------------------------------------------- */

.site-footer {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 2em 1em;
  margin-top: 3em;
  font-size: 0.9rem;
}

.site-footer nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75em 1.5em;
}

/* White links, including Back to Top. */
.site-footer a,
.site-footer a:visited {
  color: #fff;
  text-decoration: none;
}

/* Blue rollover and keyboard focus. */
.site-footer a:hover,
.site-footer a:focus-visible {
  color: #2AB3ED;
  text-decoration: underline;
}

.site-footer p {
  margin-top: 1.5em;
}


/* -----------------------------------------------
   STICKY FOOTER — INTERIOR PAGES
   Keep footer at bottom on short pages.
----------------------------------------------- */

/* Make each interior page a vertical flex container. */
body:not(.home) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Allow the main content to fill available space. */
body:not(.home) main {
  flex: 1;
}

/* Keep the footer at the bottom with no extra gap. */
.site-footer {
  margin-top: auto;
}

/* Remove bottom padding so the footer reaches the viewport edge. */
body:not(.home) {
  padding-bottom: 0;
}