/*
Theme Name: Drapery Designs
Theme URI: https://edraperydesigns.com/
Author: Drapery Designs
Description: A flexible block theme for editing pages, galleries, posts, navigation, and site-wide styles.
Version: 1.0.3
Requires at least: 7.0
Requires PHP: 8.4
Text Domain: drapery
*/

:root {
  --dd-charcoal: var(--wp--preset--color--foreground);
  --dd-gold: var(--wp--preset--color--accent);
  --dd-gold-dark: var(--wp--preset--color--accent-dark);
  --dd-cream: var(--wp--preset--color--surface);
  --dd-footer: var(--wp--preset--color--footer);
  --dd-footer-base: var(--wp--preset--color--footer-base);
  --dd-line: var(--wp--preset--color--line);
  --dd-gutter: 1.25rem;
  --dd-space: clamp(3rem, 6vw, 5rem);
}

html {
  scroll-behavior: smooth;
}

.wp-site-blocks > * {
  margin-block-start: 0;
}

a {
  transition: color 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

.wp-block-gallery {
  /* Core multiplies this length in its column-width calc; unitless 0 breaks columns. */
  --wp--style--gallery-gap-default: 0px;
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--dd-gold-dark);
  outline-offset: 3px;
}

:where(
  .dd-site-header__inner,
  .dd-page-hero__content,
  .dd-content-layout,
  .dd-footer__columns,
  .dd-footer-base__inner
) {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size);
  width: calc(100% - 2 * var(--dd-gutter));
}

/* Header */

header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
}

.dd-site-header {
  background: #ffffff;
}

.dd-utility-bar {
  border-bottom: 1px solid var(--dd-line);
  color: var(--dd-gold-dark);
  font-size: 0.9375rem;
  font-weight: 700;
  max-width: none !important;
  padding: 0.375rem max(var(--dd-gutter), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}

.dd-utility-bar p {
  margin: 0;
}

.dd-utility-bar a {
  color: inherit;
}

.dd-utility-bar a[href^="tel:"]::before {
  content: "☎ ";
  font-size: 0.75rem;
}

.dd-site-header__inner {
  gap: 2rem;
  margin-block: 0;
  padding-block: var(--wp--preset--spacing--20);
}

.dd-site-brand {
  flex: 0 0 auto;
  min-width: 10rem;
}

.dd-site-brand .wp-block-site-title {
  display: none;
}

.dd-site-brand .wp-block-site-logo {
  margin: 0;
}

.dd-site-brand .wp-block-site-logo img {
  max-height: 3.5rem;
  object-fit: contain;
  width: auto;
}

.dd-primary-navigation {
  flex: 1 1 auto;
}

.dd-primary-navigation .wp-block-navigation__container {
  gap: 0.25rem 0.75rem;
}

.dd-primary-navigation .wp-block-navigation-item__content {
  color: var(--dd-charcoal);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: var(--wp--preset--spacing--10) 0.4rem;
}

.dd-primary-navigation .current-menu-item > .wp-block-navigation-item__content,
.dd-primary-navigation .wp-block-navigation-item__content:hover {
  color: var(--dd-gold-dark);
}

.dd-primary-navigation .wp-block-navigation__submenu-container {
  border: 0;
  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
  padding: 0.5rem;
}

.dd-nav-cta > .wp-block-navigation-item__content {
  border: 2px solid var(--dd-gold-dark);
  padding-inline: 0.75rem;
}

/* Heroes and page flow */

.dd-hero,
.dd-page-hero {
  overflow: hidden;
  position: relative;
}

.dd-hero {
  align-items: center;
  display: grid;
  min-height: clamp(32rem, 55vw, 48rem);
  padding-block: 4rem;
}

.dd-hero > .wp-block-cover__inner-container {
  margin-inline: auto;
  max-width: var(--wp--style--global--wide-size);
  width: calc(100% - 2 * var(--dd-gutter));
}

.dd-hero__content {
  max-width: 52rem;
  text-align: center;
}

.dd-hero__content > *,
.dd-section-heading > *,
.dd-portfolio-archive__intro > * {
  margin-block: 0;
}

.dd-hero__content > * + *,
.dd-section-heading > * + *,
.dd-portfolio-archive__intro > * + * {
  margin-block-start: 1.25rem !important;
}

.dd-hero :where(h1, p) {
  color: #ffffff;
}

.dd-hero h1 {
  font-size: clamp(2.25rem, 5vw, 2.8125rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.dd-page-hero {
  min-height: 0;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.dd-page-hero__content {
  position: relative;
  text-align: center;
  z-index: 1;
}

.dd-page-hero__content > h1,
.dd-page-hero .wp-block-post-title {
  margin: 0 auto;
  text-align: center;
}

.dd-page-hero .wp-block-post-title {
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
}

.dd-page-hero__content,
.dd-page-hero__content :where(h1, p, a, time) {
  color: #ffffff;
}

.dd-page-hero :is(.wp-block-post-date, .wp-block-post-author-name),
.dd-page-hero :is(.wp-block-post-date, .wp-block-post-author-name) a {
  color: #ffffff;
}

.dd-page-hero__content a:is(:hover, :focus-visible) {
  color: #ffffff;
  text-decoration: underline;
}

.dd-page-main,
.dd-home-content,
.dd-post-main {
  background: var(--dd-cream);
}

.dd-page-hero + * {
  margin-block-start: 0 !important;
  padding-block: var(--dd-space);
}

.dd-page-main > .wp-block-post-content {
  box-sizing: border-box;
  min-width: 0;
}

/* Homepage sections */

.dd-home-content > * {
  margin-block-start: 0;
}

.dd-section,
.dd-feature-section,
.dd-portfolio-section,
.dd-expert-section,
.dd-testimonials-section {
  padding-block: var(--dd-space);
}

.dd-section-heading,
.dd-portfolio-archive__intro {
  box-sizing: border-box;
  margin: 0 auto 3rem !important;
  max-width: var(--wp--style--global--content-size) !important;
  padding-inline: var(--dd-gutter);
  text-align: center;
}

.dd-section-heading :where(h2, h3) {
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  font-weight: 400;
  text-transform: uppercase;
}

.dd-feature-grid > * {
  margin-block: 0 !important;
}

.dd-feature-card {
  aspect-ratio: 728 / 557;
  color: #ffffff;
  min-height: 0 !important;
  overflow: hidden;
  padding: clamp(1.25rem, 4vw, 1.875rem);
}

.dd-feature-card :where(h2, h3, p, a) {
  color: #ffffff;
}

.dd-feature-card :where(h2, h3) {
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  font-weight: 400;
}

.dd-feature-card p:last-child a {
  border: 3px solid #ffffff;
  display: inline-block;
  font-weight: 700;
  padding: 0.45em 1em;
}

.dd-portfolio-section {
  background: #ffffff;
}

body:not(.editor-styles-wrapper) .dd-portfolio-grid .wp-block-post {
  aspect-ratio: 4 / 3;
  background: var(--dd-footer);
  display: grid;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  position: relative;
}

body:not(.editor-styles-wrapper) .dd-portfolio-grid .wp-block-post::after {
  background: rgb(0 0 0 / 50%);
  content: "";
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 200ms ease;
  z-index: -1;
}

body:not(.editor-styles-wrapper) .dd-portfolio-grid .wp-block-post-featured-image {
  inset: 0;
  margin: 0;
  position: absolute;
  z-index: -2;
}

body:not(.editor-styles-wrapper) .dd-portfolio-grid .wp-block-post-featured-image,
body:not(.editor-styles-wrapper) .dd-portfolio-grid .wp-block-post-featured-image a,
body:not(.editor-styles-wrapper) .dd-portfolio-grid .wp-block-post-featured-image img {
  height: 100%;
  width: 100%;
}

body:not(.editor-styles-wrapper) .dd-portfolio-grid .wp-block-post-featured-image img {
  object-fit: cover;
}

body:not(.editor-styles-wrapper) .dd-portfolio-grid .wp-block-post-title {
  align-self: end;
  color: #ffffff;
  font-size: 1.25rem;
  margin: 1.5rem;
  opacity: 0;
  transition: opacity 200ms ease;
}

body:not(.editor-styles-wrapper) .dd-portfolio-grid .wp-block-post-title a {
  color: inherit;
}

body:not(.editor-styles-wrapper) .dd-portfolio-grid .wp-block-post:is(:hover, :focus-within)::after,
body:not(.editor-styles-wrapper) .dd-portfolio-grid .wp-block-post:is(:hover, :focus-within) .wp-block-post-title {
  opacity: 1;
}

.dd-portfolio-archive__intro p {
  font-weight: 700;
}

.dd-testimonial-grid .wp-block-post {
  background: #faf6f2;
  margin: 0;
  padding: 2rem;
  text-align: center;
}

.dd-testimonial-grid .wp-block-post-content {
  font-style: italic;
}

.dd-testimonial-archive {
  background: var(--dd-cream);
}

.dd-testimonial-archive .wp-block-post {
  background: #ffffff;
  padding: 1.5625rem 1.25rem 1.25rem;
}

.dd-testimonial-hero :where(h1, p) {
  max-width: 46.875rem !important;
  width: 100%;
}

.dd-testimonial-hero h1 {
  font-size: 2.5rem;
  line-height: 1.1;
  margin-block-end: 1.875rem !important;
}

.dd-testimonial-hero .wp-block-button__link {
  font-size: 1rem;
  line-height: 1.15;
  padding: 0.65rem 1rem;
}

.dd-testimonial-archive .wp-block-post-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.8125rem !important;
}

.dd-testimonial-archive .wp-block-post-content {
  font-size: 1rem;
  line-height: 1.5;
}

.dd-testimonial-archive .wp-block-post-content > :last-child {
  margin-block-end: 1.625rem;
}

/* Content, blog, sidebar, and galleries */

.dd-content-layout {
  gap: 2rem;
}

.dd-project-comments,
.dd-related-posts,
.dd-post-discovery,
.dd-post-tags,
.dd-share-links,
.dd-post-author {
  border-top: 1px solid var(--dd-line);
  margin-top: 3rem;
  padding-top: 2rem;
}

.dd-project-comments:not(:has(.comment-form)) {
  display: none;
}

.dd-project-comments:has(.comment-form) .comment-reply-title {
  display: none;
}

.dd-project-comments .comment-form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dd-project-comments .comment-form > * {
  grid-column: 1 / -1;
  margin: 0;
}

.dd-project-comments :is(.comment-form-author, .comment-form-email) {
  grid-column: auto;
}

.dd-project-comments label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.dd-project-comments :where(input[type="text"], input[type="email"], textarea) {
  border: 1px solid var(--dd-line);
  box-sizing: border-box;
  padding: 0.65rem;
  width: 100%;
}

.dd-project-comments textarea {
  min-height: 10rem;
  resize: vertical;
}

.dd-sidebar {
  display: grid;
  gap: 1.5rem;
}

.dd-sidebar :where(h2, h3) {
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.dd-sidebar p,
.dd-sidebar .wp-block-search,
.dd-sidebar figure {
  margin: 0;
}

.dd-sidebar-map {
  max-width: 100%;
  width: 18.75rem;
}

.dd-sidebar-map iframe {
  aspect-ratio: 6 / 5;
  border: 0;
  display: block;
  width: 100%;
}

.dd-post-list .wp-block-post {
  margin: 0;
}

.dd-post-list .wp-block-post > * + * {
  margin-block-start: 1rem;
}

.dd-post-list .wp-block-post-title {
  font-size: 2rem;
}

.dd-post-list .wp-block-post-title a {
  color: var(--dd-charcoal);
}

.dd-post-categories,
.dd-meta {
  color: var(--wp--preset--color--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.dd-post-hero .dd-post-categories {
  margin-bottom: 1rem;
}

.dd-related-posts > h2,
.dd-post-discovery > h2,
.dd-share-links > h2 {
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
}

.dd-related-posts__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

.dd-related-post > * {
  margin: 0;
}

.dd-related-post > * + * {
  margin-top: 0.75rem;
}

.dd-related-post__image,
.dd-related-post__image img {
  display: block;
  width: 100%;
}

.dd-related-post__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.dd-related-post__image img {
  height: 100%;
  object-fit: cover;
}

.dd-related-post h3 {
  font-size: 1.125rem;
}

.dd-related-post :where(time, .dd-related-post__context) {
  color: var(--wp--preset--color--muted);
  font-size: 0.875rem;
}

.dd-post-discovery > * + * {
  margin-top: 1rem;
}

.dd-share-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dd-share-links a {
  border: 2px solid var(--dd-gold-dark);
  display: inline-block;
  font-weight: 700;
  padding: 0.4rem 0.75rem;
}

.dd-post-tags a::before {
  content: "#";
}

.dd-share-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dd-post-author .wp-block-post-author {
  align-items: center;
}

.dd-post-author .wp-block-site-title {
  font-size: 1rem;
  margin: 0 0 0 3.75rem;
}

.dd-post-list .wp-block-post-excerpt__more-link,
.dd-pagination :where(.page-numbers, .wp-block-query-pagination-next, .wp-block-query-pagination-previous) {
  border: 3px solid var(--dd-gold-dark);
  color: var(--dd-gold-dark);
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.45rem 0.75rem;
}

.dd-pagination {
  gap: 0.5rem;
  margin-top: 2rem;
}

.dd-pagination .current,
.dd-pagination a:hover,
.dd-pagination a:focus-visible {
  background: var(--dd-gold-dark);
  color: #ffffff;
}

/* Footer */

.dd-footer {
  background: var(--dd-footer);
  color: #ffffff;
  font-size: 0.9375rem;
  padding-block: var(--dd-space);
}

.dd-footer :where(h2, p, li, a) {
  color: #ffffff;
}

.dd-footer h2 {
  font-weight: 700;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.dd-footer__columns {
  gap: 2rem;
}

.dd-footer__columns > .wp-block-column > * + * {
  margin-block-start: 2rem;
}

.dd-footer p {
  margin: 0;
}

.dd-footer .wp-block-latest-posts li {
  border-bottom: 1px solid rgb(255 255 255 / 15%);
  padding-block: 0.65rem;
}

.dd-footer .wp-block-search__input {
  border: 0;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.65rem;
}

.dd-footer-social {
  gap: 0.5rem;
}

.dd-footer-social .wp-social-link {
  border-radius: 4px;
}

.dd-footer-social .wp-social-link-facebook { background: #3b5998; }
.dd-footer-social .wp-social-link-instagram { background: #3f729b; }
.dd-footer-social .wp-social-link-pinterest { background: #bd081c; }
.dd-footer-social .wp-social-link-youtube { background: #cd201f; }
.dd-footer-social .wp-social-link-linkedin { background: #0077b5; }

.dd-footer-map {
  margin: 1rem 0 0;
  max-width: 21.875rem;
}

.dd-footer-map iframe {
  aspect-ratio: 2 / 1;
  border: 0;
  display: block;
  width: 100%;
}

.dd-footer-base {
  background: var(--dd-footer-base);
  font-size: 0.875rem;
  padding-block: 0.75rem;
}

.dd-footer-base p {
  color: var(--dd-charcoal);
  margin: 0;
}

.dd-footer-base .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--dd-charcoal);
}

.dd-footer-base__inner {
  align-items: center;
  gap: 1rem 2rem;
}

.dd-footer-navigation {
  flex: 1 1 55%;
}

.dd-footer-navigation .wp-block-navigation__container {
  gap: 0.5rem 1.25rem;
}

.dd-footer-copyright {
  flex: 1 1 35%;
  text-align: right;
}

.dd-back-to-top {
  align-items: center;
  background: rgb(0 0 0 / 65%);
  bottom: 1.25rem;
  color: #ffffff;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  position: fixed;
  right: 1.25rem;
  width: 2.5rem;
  z-index: 1000;
}

.dd-back-to-top[hidden] {
  display: none;
}

.dd-back-to-top svg {
  fill: none;
  height: 1.5rem;
  stroke: currentColor;
  stroke-width: 1.5;
  width: 1.5rem;
}

/* Forms and FAQ */

.site-form {
  margin-block: 2rem;
}

.site-form__fields {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-end: 1.25rem;
}

.site-form__field {
  display: grid;
  gap: 0.5rem;
}

.site-form__field--full {
  grid-column: 1 / -1;
}

.site-form__label {
  align-items: center;
  display: flex;
  gap: 0.25rem;
  position: relative;
}

.site-form__label label {
  font-weight: 700;
}

.site-form__help {
  align-items: center;
  background: var(--dd-charcoal);
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.6875rem;
  font-weight: 700;
  height: 0.875rem;
  justify-content: center;
  padding: 0;
  width: 0.875rem;
}

.site-form__help-text {
  background: var(--dd-charcoal);
  color: #ffffff;
  font-size: 0.75rem;
  left: 0;
  max-width: 22rem;
  opacity: 0;
  padding: 0.5rem;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 0.35rem);
  z-index: 2;
}

.site-form__help:hover + .site-form__help-text,
.site-form__help:focus + .site-form__help-text {
  opacity: 1;
}

.site-form__required {
  color: #b42318;
}

.site-form :where(input, textarea) {
  background: #f7f7f7;
  border: 1px solid #c4c4c4;
  border-radius: 0;
  box-sizing: border-box;
  color: var(--dd-charcoal);
  font: inherit;
  padding: 0.75rem;
  width: 100%;
}

.site-form input {
  min-height: 3rem;
}

.site-form textarea {
  min-height: 12rem;
  resize: vertical;
}

.site-form__counter {
  font-size: 0.75rem;
}

.site-form__submit {
  background: #333333;
  border: 0;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.75rem 1rem;
}

.site-form__notice {
  border-left: 4px solid var(--dd-gold);
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
}

.site-form__notice--error,
.site-form__notice--invalid,
.site-form__notice--rate,
.site-form__notice--unavailable {
  background: #fff4f1;
  border-left-color: #a53b2a;
}

.wp-block-details summary {
  align-items: start;
  cursor: pointer;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  list-style: none;
  padding: 0;
}

.wp-block-details summary::-webkit-details-marker {
  display: none;
}

.wp-block-details summary::before {
  border: 1px solid #b7b7b7;
  color: #777777;
  content: "+";
  font-size: 0.6875rem;
  height: 0.75rem;
  line-height: 0.625rem;
  text-align: center;
  transform: translateY(0.35rem);
  width: 0.75rem;
}

.wp-block-details[open] summary::before {
  content: "−";
}

.wp-block-details[open] summary {
  margin-block-end: 0.75rem;
}

.wp-block-details[open] > :not(summary) {
  margin-inline: 0;
}

.wp-block-column > .wp-block-details + .wp-block-details {
  margin-block-start: var(--wp--preset--spacing--30);
}

/* Responsive layout */

@media (min-width: 768px) {
  .dd-site-header.is-scrolled {
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
  }
}

@media (max-width: 781px) {
  .dd-sidebar {
    border-top: 1px solid var(--dd-line);
    margin-top: 3rem;
    padding-top: 2rem;
  }

  .dd-project-comments .comment-form {
    grid-template-columns: 1fr;
  }

}

@media (min-width: 600px) and (max-width: 959px) {
  nav.dd-primary-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }

  nav.dd-primary-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

@media (max-width: 959px) {
  .dd-primary-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    --navigation-layout-justification-setting: flex-start;
    background-color: var(--dd-gold-dark);
  }

  .dd-primary-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    color: #ffffff;
  }

  .dd-primary-navigation .is-menu-open .wp-block-navigation__container {
    --navigation-layout-justification-setting: flex-start;
    gap: 0;
    width: 100%;
  }

  .dd-primary-navigation .is-menu-open .wp-block-navigation-item {
    align-items: stretch;
    width: 100%;
  }

  .dd-primary-navigation .is-menu-open .wp-block-navigation__submenu-container {
    box-shadow: none;
    gap: 0;
    padding: 0 0 0 1rem;
    width: 100%;
  }

  .dd-primary-navigation .is-menu-open .wp-block-navigation-item__content {
    border: 0;
    border-bottom: 1px dashed rgb(255 255 255 / 75%);
    box-sizing: border-box;
    padding-block: 0.75rem;
    width: 100%;
  }

  .dd-primary-navigation .is-menu-open .wp-block-navigation-item__content:is(:hover, :focus-visible) {
    background: transparent;
    color: #ffffff;
    text-decoration: underline;
  }
}

@media (max-width: 767px) {
  .dd-utility-bar {
    justify-content: center;
    text-align: center;
  }

  .dd-footer-base__inner {
    display: block !important;
  }

  .dd-footer-navigation .wp-block-navigation__container {
    justify-content: center;
  }

  .dd-footer-copyright {
    margin-top: 1rem !important;
    text-align: center;
  }
}

@media (max-width: 600px) {
  header.wp-block-template-part {
    top: 0;
  }

  .site-form__fields {
    grid-template-columns: 1fr;
  }

  .site-form__field--full {
    grid-column: auto;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}