/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* #region ****Restyle Wordpress container blocks to remove padding****/

.site-main .wp-block-group__inner-container {
  padding: 0px;
}

@media (max-width: 768px) {
  .site-main .wp-block-group__inner-container {
    padding: 0px;
    margin-bottom: 0;
  }

  .wp-block-heading {
    padding: 0;
    margin: 0;
  }
}

/* #endregion */

/* #region ***** SITE CONTENT PADDING *****/

body .site-content,
body .inside-article,
body .site-main {
  padding-top: 0;
  margin-top: 0;
}

.inside-header.grid-container,
.site-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(0.7rem, 3vw, 2rem);
  padding-right: clamp(0.7rem, 3vw, 2rem);
}

/* -----------------------------------
   Dianne Pole Psychotherapy
   Custom CSS
----------------------------------- */

/*#region ***** DIANNE POLE DESIGN TOKENS *****/

:root {
  --dp-copy-text: #524d48;
  --dp-bg: #f8f7f2;
  --dp-panel: #faf7f2;
  --dp-panel-warm: #eee7df;
  --dp-panel-deep: #ddd2c6;
  --dp-muted: #5b524b;
  --dp-soft: #8a7565;
  --dp-border: #d8cabd;
  --dp-button: #4b4037;
  --dp-link-text: #5c5148;
  --dp-svg-tan: #af9a7f;
  --dp-serif: Georgia, "Times New Roman", Times, serif;
  --dp-sans:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dp-mobile: 700px;
}

/* #endregion */

/*Dirty hack.. Add padding at top for pages with this class - add to topmost element*/

.dp-top-padding {
  padding-top: 2.7rem;
}

/* #endregion */

/* #region ***Reset WP Defaults for SVG images and separator */

.style-svg svg * {
  fill: currentColor;
  stroke: currentColor;
}

/*Style default WP separator block*/

body .wp-block-separator {
  display: block;
  width: 100%;
  height: 1px;
  border: none;
  border-top: none;
  color: transparent;
  background: linear-gradient(
    to right,
    transparent,
    #d8cabd 1%,
    #d8cabd 60%,
    transparent
  );
  margin-top: 1.7rem;
  margin-bottom: 1.5rem;
  padding: 0;
  padding-top: 0;
  box-sizing: border-box;
}

/* #endregion */

/* #region *** TOP LEVEL STYLES ***/

/* Apply Serif Font to body by default */

body {
  font-family: var(--dp-serif);
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: auto;
}

/* Apply Sans font to these elements by default */

.site-description,
.dp-main-nav,
.dp-eyebrow,
.dp-button,
.dp-card p,
.dp-quote-label,
.dp-practical-note,
.dp-side-note,
.dp-section-list,
.dp-small-sans {
  font-family: var(--dp-sans);
}

/* External Link Icon - to add */

.dp-external-link {
  display: inline-block;
  position: relative;
}

/* #endregion */

/* #region **** SITE HEADER CUSTOM STYLES ****/

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(249, 246, 241, 0.85);
  backdrop-filter: blur(7px);
  border-bottom: 1px solid #ded5ca;
  margin-bottom: 0rem;
}

.site-branding {
  line-height: 1.2;
}

/* Style Title and Subtitle */

.main-title a {
  font-family: var(--dp-serif);
  color: var(--dp-text);
  font-size: 1.28rem;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-weight: 400;
  font-kerning: normal;
  text-rendering: auto;
}

.site-description {
  color: #6f665d;
  font-size: 0.88rem;
  margin: 0.1rem 0 0;
  font-weight: normal;
  line-height: 1.3;
}

/* #endregion */

/* #region Custom Button and link Styling*/

.dp-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.wp-block-button {
  font-size: 0.92rem;
  width: auto !important;
  min-width: 0;
}

.wp-block-button__link {
  display: inline-block;
  width: auto;
  min-width: 0;
  white-space: nowrap;
  border-radius: 1.4rem;
  padding: 0.88rem 1.45rem;
  font-family: var(--dp-sans);
  border: 1px solid #9e8f80;
  color: white;
  border-color: var(--dp-button);
  box-shadow: 0 8px 20px rgba(47, 43, 39, 0.12);
}

.wp-block-button__link.has-background {
  color: var(--dp-button);
}

.dp-card-link {
  margin-top: auto;
}

.dp-card-link a {
  font-family: var(--dp-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.dp-card-link a:hover {
  opacity: 0.9;
  transform: translateX(3px);
}

/* #endregion */

/* #region ******* SHARED SECTION ELEMENTS *******/

/* #region ****HERO SECTION / BANNER STYLING FOR ABOUT THERAPY PAGES ****/

/* Neutralise WP container */

.dp-therapy-cover
  > .wp-block-group__inner-container:not(.dp-therapy-hero-inner) {
  display: contents;
}

/* Hero wrapper */

.dp-therapy-cover {
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  min-height: clamp(12rem, 31vw, 23rem);
  margin-top: -1rem;
  margin-bottom: clamp(3rem, 4vw, 6rem);
  box-shadow: 0 8px 20px -16px rgba(47, 43, 39, 0.6);
}

/*add glow to bg*/

.dp-therapy-hero-inner::before {
  content: "";
  position: absolute;
  inset: -2rem -2.8rem;
  background: radial-gradient(
    ellipse at left center,
    rgba(255, 255, 255, 0.64) 0%,
    rgba(255, 255, 255, 0.62) 30%,
    rgba(255, 255, 255, 0) 63%
  );
  z-index: -1;
  pointer-events: none;
}

/* Style Hero Heading */

.dp-therapy-cover {
  display: flex;
  position: relative;
  align-items: center;
  height: 100%;
  flex-direction: row;
}

.dp-therapy-hero-inner {
  position: relative;
  z-index: 2;
  padding-left: clamp(0.1rem, 3vw, 3rem);
  padding-right: clamp(0.7rem, 3vw, 2rem);
  /* Moves upward as viewport narrows */
  /* padding-top: clamp(1rem, 7.7vw, 4.5rem); */
}

.dp-therapy-hero-inner h1 {
  font-family: Georgia, serif;
  font-size: clamp(2.8rem, 5.4vw, 4.4rem);
  font-weight: 400;
  line-height: 1.01;
  letter-spacing: -0.04em;
  max-width: 14ch;
  margin-bottom: clamp(1rem, 2.5vw, 2.94rem);
  color: #342f2a;
}

@media (max-width: 760px) {
  .dp-therapy-hero-inner h1 {
    max-width: min(29ch, 86vw);
    margin-top: 1rem;
    line-height: 1.1em;
    margin-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  .dp-therapy-cover::before {
    background-position: 60% top;
  }
}

/* #endregion */

/* #region ***** 3 COLUMN GRID SECTION - Col 1 - divider - col 3 *****/

/* 3 Column Grid Parent Styles*/

.dp-3col-grid.heading-left,
.dp-3col-grid.heading-top {
  display: grid;
  position: relative;
  grid-template-columns:
    minmax(100px, 2.1fr)
    minmax(5px, 0.3fr)
    minmax(50px, 4.8fr) !important;
  grid-auto-rows: auto;

  justify-content: space-between !important;
  row-gap: 0 !important;
  grid-template-rows: auto;
  max-width: 870px;
  margin-left: auto;
  margin-right: auto;
  align-items: start;
}

.dp-3col-grid {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  margin-top: 0;
  margin-bottom: 1.8rem;
}

/* Clear WP guff */
.dp-3col-grid .wp-block-group__inner-container {
  display: contents;
}

/*Clear padding on last paragraph of the grid*/

.dp-col3-container p:last-child {
  margin-bottom: 0;
}

/*Heading in col 1*/

.dp-3col-grid.heading-left h2 {
  grid-column: 1;
  text-align: right;
  justify-self: end;
  font-size: clamp(1.9rem, 2.6vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.35;
  max-width: 35ch;
}

/* 3 Column Grid H3 Header - Column 3, Row 1 */

.dp-3col-grid.heading-top h3 {
  font-size: clamp(1.47rem, 1.85vw, 1.7rem);
  letter-spacing: -0.01em;
  padding-bottom: 1rem;
  padding-top: 0.8rem;
  grid-column: 3;
  grid-row: 1;
}

.dp-3col-grid.heading-top h4 {
  font-size: clamp(1.47rem, 1.85vw, 1.7rem);
  letter-spacing: -0.01em;
  padding-bottom: 0rem;
  padding-top: 0.8rem;
  grid-column: 3;
  grid-row: 1;
}

/*Divider Column 2*/

.dp-3col-grid .dp-3col-divider {
  grid-column: 2;
  grid-row: 1 / -1;
  justify-self: center;
  margin-top: 0;
  width: 1px;
  height: 8rem;
  background: linear-gradient(
    to bottom,
    transparent,
    #d8cabd 10%,
    #d8cabd 80%,
    transparent
  );
}

/*Text Content Container - Header on Left (content starts from top row 1)*/

.dp-3col-grid.heading-left > .dp-content-col-3 {
  grid-column: 3;
  grid-row: 1 / -1;
  height: auto;
  justify-self: end;
}

/* Text Content Container - Image on Left (content starts from row 2) */

.dp-3col-grid.heading-top > .dp-content-col-3 {
  grid-column: 3;
  grid-row: 2 / -1;
  height: auto;
  justify-self: end;
}

/* Set Default SVG image properties for 3 column grid*/

.dp-3col-grid.heading-top .style-svg {
  color: var(--dp-svg-tan);
  position: relative;
  align-self: start;
  justify-self: end;
  width: min(100%, 9rem);
  left: 1.3rem;
  top: -0.4rem;
  grid-column: 1;
  grid-row: 2 / -1;
}

.dp-3col-grid svg {
  width: 100%;
  height: auto;
}

/* Grid paragraph and list styles */

.dp-3col-grid p {
  font-family: var(--dp-sans);
  font-size: clamp(1.05rem, 1.4vw, 1.16rem);
  line-height: 1.6;
  min-width: 0;
  color: var(--dp-copy-text);
}

.dp-3col-grid ul {
  font-family: var(--dp-sans);
  padding-left: 2ch;
  padding-bottom: 1rem;
  margin-left: 0;
  list-style-type: disc;
}

.dp-3col-grid ul li::marker {
  color: #927d63;
  font-size: 1.2em;
}

/* #endregion */

/* #region 3 Column Grid version with CARD BACKGROUND as pseudo-element (added .dp-tcard class) */

.dp-3col-grid.dp-tcard {
  margin-bottom: 1.6rem;
  padding-top: 1.6rem;
  padding-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.dp-tcard:last-child {
  margin-bottom: 3.5rem;
}

.dp-tcard::before {
  content: "";
  position: absolute;
  display: block;
  background-color: #f4efe9;
  width: clamp(1px, 95%, 800px);
  height: 100%;
  z-index: -1;
  border-radius: 2rem;
  left: clamp(60px, 7.7vw, 90px);
}

/* Add padding to right of third column */

.dp-tcard > .dp-content-col-3 {
  padding-right: 1.2rem;
}

/* style smaller text in card */

.dp-tcard > .dp-content-col-3 p {
  font-size: clamp(1rem, 2vw, 1.09rem);
}

/* #endregion */

/* #region ***** 3 Column Grid Mobile Breakpoint Styles *****/

@media (max-width: 760px) {
  /* Mobile Parent Grid Setup - 2 columns */

  .dp-3col-grid.heading-left,
  .dp-3col-grid.heading-top {
    grid-template-columns: 1fr 4.8rem !important;
    grid-auto-rows: auto auto auto;
    row-gap: 2rem;
    padding-bottom: 0rem;
    padding-left: 0.4rem;
    padding-right: 1rem;
    margin-bottom: 1rem;
  }

  /* Reset position of card pseudo-element background */

  .dp-tcard::before {
    top: 0px;
    left: 0px;
    padding-right: 1rem;
    margin-right: 0;
    width: 100%;
  }

  /* === CRITICAL: Reset all previous placements === */
  .dp-3col-grid.heading-left > *,
  .dp-3col-grid.heading-top .dp-3col-grid .dp-3col-divider > * {
    grid-column: auto;
    grid-row: auto;
  }

  /* Disappear Divider */

  .dp-3col-grid .dp-3col-divider {
    display: none;
  }

  /* Version for Heading Left, no image */

  /* Heading */
  .dp-3col-grid.heading-left h2 {
    grid-column: 1 / -1;
    justify-self: start;
    grid-row: 1;
    text-align: left;
    padding-bottom: 1.55rem;
  }

  .dp-3col-grid.heading-top h4 {
    font-size: clamp(1.47rem, 1.85vw, 1.7rem);
    letter-spacing: -0.01em;
    padding-bottom: 1.3rem;
    padding-top: 0.8rem;
    line-height: 1.6;
  }

  /* Content */

  .dp-3col-grid.heading-left .dp-content-col-3 {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Content Padding for card versions */

  .dp-3col-grid.heading-top.dp-tcard {
    padding-left: 0.4rem;
    padding-top: 1rem;
    padding-left: 1rem;
  }

  /* Version for Image */

  .dp-3col-grid.heading-top h3 {
    justify-self: start;
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 1.3rem;
    line-height: 1.55;
  }

  .dp-3col-grid.heading-top .dp-content-col-3 {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Place image in column 2, row 1 */

  .dp-3col-grid.heading-top .style-svg {
    color: var(--dp-svg-tan);
    position: relative;
    align-self: center;
    justify-self: center;
    width: min(100%, 9rem);
    left: 0;
    top: 0;
    grid-row: 1;
    grid-column: 2;
  }
}

/* #endregion */

/* #region ***** BEGINNING THERAPY CARD (On Homepage and Therapy Pages) *****/

/*OVERRIDE DEFAULT WP STYLING*/

.dp-beginning-section > .wp-block-group__inner-container {
  display: contents;
}

.dp-beginning-section {
  max-width: 1100px;
  border: 1px solid var(--dp-border);
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 24px 55px rgba(47, 43, 39, 0.17);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(0.7rem, 3vw, 2rem);
  padding-right: clamp(0.7rem, 3vw, 2rem);
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 3rem;
  margin-bottom: 5rem;
}

/*Beginning Therapy Grid Padding*/

.dp-beginning-grid-1 {
  padding-left: 1.7rem;
  align-self: center;
}

.dp-beginning-grid-2 {
  padding-left: 2.5rem;
  padding-top: clamp(1rem, 1.6vw, 2.3rem);
  padding-bottom: clamp(1.02rem, 1.75vw, 2.4rem);
  align-self: start;
}

/* Beginning main layout */
.dp-beginning-section .dp-beginning-grid {
  display: grid;
  grid-template-columns: minmax(7rem, 1.5fr) minmax(16rem, 7fr) minmax(
      16rem,
      23rem
    );
  gap: 2rem;
  align-items: center;
}

/*Beginning Therapy Header Styling*/

.dp-beginning-therapy-header {
  font-size: clamp(2rem, 2.1vw, 2.2rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--dp-copy-text);
}

/*Beginning Therapy Paragraph Styling*/

.dp-beginning-grid-2 p {
  font-family: var(--dp-sans);
  font-size: clamp(1rem, 1.16vw, 1.08rem);
  color: var(--dp-copy-text);
}

/* Right-hand icon/link grid */

.dp-beginning-section .dp-beginning-grid-3 {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1rem 1.2rem;
  align-items: center;
  margin-left: 0rem;
  justify-self: end;
}

/*Vertical divider line*/

.dp-beginning-section .dp-beginning-grid-3::before {
  content: "";
  position: absolute;

  left: -2.3rem;
  top: 0.5rem;
  bottom: 0.5rem;

  width: 1px;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(92, 81, 72, 0.22),
    rgba(92, 81, 72, 0.22),
    transparent
  );
}

/* Remove WP-generated paragraph spacing */
.dp-beginning-grid-3 p {
  margin: 0;
}

/*Chair image scaling*/

.dp-chair-container img {
  transform: scale(1.3);
}

/*Chair image background*/

.dp-chair-container {
  position: relative;
  height: 60%;
}

.dp-chair-container::before {
  content: "";
  position: absolute;
  width: 9.6rem;
  height: 11.7rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 48% 52% 50% 50%;

  background: linear-gradient(
    135deg,
    rgba(221, 208, 195, 0.1),
    rgba(212, 197, 182, 0.3)
  );
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.15);

  z-index: 0;
}

.dp-chair-container img {
  position: relative;
  z-index: 1;
}

/* Icons */
.dp-beginning-section .dp-beginning-icon {
  margin: 0;
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-beginning-section .dp-beginning-icon img {
  width: 2.7rem;
  height: auto;
  display: block;
  padding: 0;
  margin: 0;
  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
}

/* Link text */
.dp-beginning-grid-3 a {
  display: inline-block;
  font-family: var(--dp-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dp-button);
  text-decoration: none;
  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

/* Hover behaviour */
.dp-beginning-grid-3 a:hover {
  transform: translateX(-0.18rem);
  color: #6f8f69;
}

.dp-beginning-grid-3 .dp-beginning-icon:has(+ p a:hover) img,
.dp-beginning-grid-3 .dp-beginning-icon:hover img {
  filter: brightness(1.25) saturate(0.9);
  opacity: 0.82;
}

/*Beginning Therapy Section Mobile Compatibility*/

@media (max-width: 768px) {
  .dp-beginning-section {
    max-width: 97vw;
    margin-top: 2rem;
  }

  .dp-beginning-section .dp-beginning-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: left;
    padding: 1rem;
  }

  .dp-beginning-section .dp-beginning-grid-3::before {
    display: none;
  }

  .dp-beginning-therapy-header {
    line-height: 1.4;
    padding-bottom: 1rem;
  }

  .dp-beginning-section .wp-block-group__inner-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1.3rem;
    padding-right: 0.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .dp-beginning-grid-2 {
    padding: 0;
  }

  .dp-beginning-section .dp-beginning-grid-3 {
    grid-template-columns: 3rem 1fr;
    width: 100%;
  }

  /*Hide chair image on mobile*/

  .dp-beginning-grid-1 {
    display: none;
  }
}

/* #endregion */
/* #endregion */