/* Supplemental component styles for daddy base.
 * Keep these rules scoped to avoid broad one-off overrides.
 */

/* Header */
.db-site-header {
  border-bottom: 0;
  background: rgba(248, 245, 240, 0.96);
  backdrop-filter: blur(12px);
}

.db-site-header > .wp-block-group,
.wp-site-blocks .alignwide,
.db-site-footer .alignwide {
  max-width: min(calc(100vw - 3rem), 1200px);
}

.db-site-header .wp-block-navigation-item__content {
  color: #4a4a4a;
  transition: color 160ms ease;
}

.db-site-header .wp-block-navigation-item__content:hover,
.db-site-header .wp-block-navigation-item__content:focus {
  color: #17656a;
}

/* Shared layout */
body,
.wp-site-blocks,
.db-front-main {
  background: #ffffff;
}

.db-soft-card,
.db-category-card,
.db-review-card,
.db-cta-box,
.db-disclosure,
.db-compare-card,
.db-pattern-card,
.db-article-shell {
  box-shadow: none;
}

/* Home hero */
.db-front-main,
.wp-site-blocks > main > .db-hero:first-child {
  margin-top: 0 !important;
}

.wp-site-blocks > main > .db-hero:first-child {
  margin-bottom: 0 !important;
}

.db-hero {
  max-width: none !important;
  width: 100vw;
  min-height: clamp(280px, 30vw, 420px);
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: max(1.5rem, calc((100vw - 1200px) / 2)) !important;
  padding-right: max(1.5rem, calc((100vw - 1200px) / 2)) !important;
  background: url("../images/top-fv-bg.webp") center / cover no-repeat !important;
  box-shadow: none;
}

.db-hero h1,
.db-hero > p {
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.78);
}

.db-hero .wp-block-buttons,
.db-hero .wp-block-buttons.is-layout-flex {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
  width: min(100%, 560px);
  margin-left: auto;
  margin-right: auto;
}

.db-hero .wp-block-button {
  flex: 0 1 248px;
  width: auto !important;
  min-width: 0 !important;
}

.db-hero .wp-block-button__link {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

#home-search.db-soft-card {
  max-width: min(100%, 700px) !important;
  width: 100%;
  margin-inline: auto;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none;
}

#home-search .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 0;
  border-radius: 12px;
  padding: 0.45rem 0.6rem 0.45rem 3.05rem;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(31, 42, 48, 0.08);
}

#home-search .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper::before {
  left: 1.25rem;
  width: 1rem;
  height: 1rem;
  background: #4f5f5d;
}

#home-search .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
  box-shadow: 0 10px 24px rgba(31, 42, 48, 0.08), 0 0 0 3px rgba(23, 101, 106, 0.14);
}

#home-search .wp-block-search__input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #1f2a30;
}

#home-search .wp-block-search__input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}

#home-search .wp-block-search__button,
#home-search .wp-element-button.wp-block-search__button {
  display: inline-flex;
  flex: 0 0 2rem;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  padding: 0 !important;
}

#home-search .wp-block-search__button svg {
  width: 0.85rem !important;
  height: 0.85rem !important;
}

/* Section rhythm */
#themes.db-soft-card,
#latest-posts.db-soft-card,
#featured-products.db-soft-card,
.db-feature-strip.db-soft-card {
  box-sizing: border-box;
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  padding-top: clamp(2.5rem, 4vw, 4rem) !important;
  padding-bottom: clamp(2.5rem, 4vw, 4rem) !important;
  padding-left: max(1.5rem, calc((100vw - 1200px) / 2)) !important;
  padding-right: max(1.5rem, calc((100vw - 1200px) / 2)) !important;
}

#themes,
#featured-products {
  background: #fffdf8 !important;
}

#latest-posts,
.db-feature-strip {
  background: #ffffff !important;
}

#themes > *,
#latest-posts > *,
#featured-products > *,
.db-feature-strip > * {
  max-width: min(calc(100vw - 3rem), 1200px);
  margin-left: auto;
  margin-right: auto;
}

#themes .wp-block-column > p,
#latest-posts .wp-block-column > .wp-block-group,
#featured-products .wp-block-column > .wp-block-group,
.db-product-card,
.db-post-list li {
  border: 0 !important;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(31, 42, 48, 0.06);
}

#themes .wp-block-column > p,
#latest-posts .wp-block-column > .wp-block-group,
#featured-products .wp-block-column > .wp-block-group {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

#themes .wp-block-column > p:hover,
#latest-posts .wp-block-column > .wp-block-group:hover,
#featured-products .wp-block-column > .wp-block-group:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(31, 42, 48, 0.08);
}

/* Post cards */
.db-post-list li {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 14px;
}

.db-post-list .wp-block-post-featured-image {
  overflow: hidden;
  width: 100%;
  margin-block: 0;
  border-radius: 14px 14px 0 0 !important;
  background: #eef2ef;
}

.db-post-list .wp-block-post-featured-image a,
.db-post-list .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
}

.db-post-list .wp-block-post-featured-image img {
  border-radius: 14px 14px 0 0 !important;
  object-fit: cover;
}

.db-post-list .taxonomy-category {
  position: absolute;
  z-index: 2;
  top: 0.7rem;
  left: 0.7rem;
  margin: 0;
}

.db-post-list .taxonomy-category a,
.db-product-vendor-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  background: #17656a;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.db-post-list .wp-block-post-title,
.db-post-list .wp-block-post-date,
.db-post-list .wp-block-post-excerpt {
  margin-inline: 1rem;
}

.db-post-list .wp-block-post-title {
  margin-block: 0.9rem 0.35rem;
  line-height: 1.45;
}

.db-post-list .wp-block-post-date,
.db-post-list .wp-block-post-excerpt {
  margin-block-end: 1rem;
}

.db-post-list a,
.wp-block-post-title a {
  text-decoration: none;
}

/* Product cards */
.db-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30);
}

.db-product-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 14px;
  padding: var(--wp--preset--spacing--30);
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(31, 42, 48, 0.06);
}

.db-product-card--article,
.db-product-card--article-compact {
  max-width: 48rem;
  margin-inline: auto;
}

.db-product-card--article-compact {
  display: grid;
  grid-template-columns: minmax(96px, 150px) minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  padding: 1rem;
}

.db-product-media,
.db-product-media--badge {
  position: relative;
}

.db-product-media {
  overflow: hidden;
  border-radius: 12px;
  background: #eef2ef;
  aspect-ratio: 4 / 3;
}

.db-product-card--article-compact .db-product-media {
  min-height: 0;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
}

.db-product-media img,
.db-product-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.db-product-media img {
  object-fit: cover;
}

.db-product-placeholder {
  background: linear-gradient(135deg, rgba(23, 101, 106, 0.08), rgba(215, 154, 91, 0.1)), #eef2ef;
}

.db-product-vendor-badge {
  position: absolute;
  z-index: 2;
  top: 0.6rem;
  left: 0.6rem;
}

.db-product-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0;
}

.db-product-title--compact,
.db-product-description--compact {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.db-product-title--compact {
  font-size: 1rem;
  line-height: 1.45;
}

.db-product-description--compact,
.db-product-note {
  line-height: 1.6;
}

.db-product-links--compact {
  margin-top: 0;
}

/* Article and page layout */
.db-page-main {
  background: linear-gradient(#f8f5f0 0 230px, #ffffff 230px 100%);
}

.db-single-main {
  background: linear-gradient(#f8f5f0 0 320px, #ffffff 320px 100%);
}

.db-page-shell,
.db-article-shell {
  max-width: min(calc(100vw - 3rem), 920px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none;
}

.db-page-shell {
  padding-top: var(--wp--preset--spacing--70) !important;
}

.db-article-content,
.db-page-content {
  max-width: min(100%, 760px) !important;
  margin-inline: auto;
}

.db-page-content {
  margin-top: var(--wp--preset--spacing--60);
}

.db-page-content > h2:first-of-type,
.db-page-content > h3:first-of-type,
.db-page-content > .wpcf7:first-child,
.db-page-content .wpcf7 {
  margin-top: clamp(5rem, 8vw, 7rem);
  padding-top: var(--wp--preset--spacing--40);
}

.db-single-main .wp-block-post-featured-image,
.db-single-main .wp-block-post-featured-image img {
  overflow: hidden;
  border-radius: 18px;
}

.db-post-meta {
  align-items: center;
}

.db-article-content > * + * {
  margin-block-start: var(--wp--preset--spacing--50);
}

.db-disclosure {
  box-shadow: none;
}

.db-post-footer-nav {
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  background: transparent !important;
  box-shadow: none;
}

.db-page-shell .wp-block-post-title {
  text-align: center;
}

/* Contact Form 7 */
.db-page-content .wpcf7,
.wpcf7 {
  max-width: 720px;
  margin-inline: auto;
}

.wpcf7 form {
  display: grid;
  gap: 1.35rem;
}

.wpcf7 form p {
  margin-block: 0;
}

.wpcf7 label,
.wpcf7 .db-form-row {
  display: grid;
  gap: 0.45rem;
  margin-block: 0;
}

.wpcf7 label,
.wpcf7 .db-form-label {
  color: #1f2a30;
  font-weight: 700;
  line-height: 1.45;
}

.wpcf7 .db-form-field,
.wpcf7 .db-form-field .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  min-height: 3rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.75rem 0.95rem;
  background: #ffffff;
  color: #1f2a30;
  font: inherit;
}

.wpcf7 textarea {
  min-height: 9rem;
  resize: vertical;
}

.wpcf7 input:where(:not([type="submit"]):not([type="checkbox"]):not([type="radio"])):focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: rgba(23, 101, 106, 0.55);
  box-shadow: 0 0 0 3px rgba(23, 101, 106, 0.12);
}

.wpcf7 .wpcf7-submit {
  width: 100%;
  min-height: 3rem;
  border: 0;
  border-radius: 8px;
  padding: 0.8rem 1.6rem;
  background: #252525;
  color: #ffffff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus {
  background: #17656a;
}

.wpcf7 .required {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-left: 0.3rem;
  border-radius: 999px;
  padding: 0.08rem 0.4rem;
  background: #f8f5f0;
  color: #17656a;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
}

.wpcf7 .wpcf7-not-valid-tip {
  margin-top: 0.25rem;
  color: #b45f4a;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
}

.wpcf7 form .wpcf7-response-output {
  margin: 0;
  border: 0;
  border-radius: 8px;
  padding: 0.9rem 1rem;
  background: #f8f5f0;
  color: #1f2a30;
}

/* Footer */
.db-site-footer {
  border-top: 0;
  background: #3a3a3a !important;
  color: #9ca3af;
  margin-top: 0 !important;
}

.db-site-footer a,
.db-site-footer .wp-block-navigation-item__content {
  color: #9ca3af;
}

.db-site-footer a:hover,
.db-site-footer a:focus {
  color: #ffffff;
}

.db-footer-grid {
  gap: clamp(2.5rem, 6vw, 6rem);
}

.db-footer-heading {
  margin: 0 0 1rem;
  color: #ffffff;
  font-weight: 800;
}

.db-footer-text,
.db-footer-copy {
  color: #9ca3af;
}

.db-footer-copy {
  display: block;
  box-sizing: border-box;
  width: min(calc(100vw - 3rem), 1200px) !important;
  max-width: min(calc(100vw - 3rem), 1200px) !important;
  margin: var(--wp--preset--spacing--70) auto 0 !important;
  border-top: 1px solid rgba(156, 163, 175, 0.22);
  padding-top: var(--wp--preset--spacing--40);
}

.db-footer-logo-image,
.db-footer-logo-image a,
.db-footer-logo-image img {
  display: block !important;
}

.db-footer-logo-image img {
  width: 180px !important;
  max-width: 180px !important;
  height: auto !important;
  filter: none;
  opacity: 1;
}

@media (max-width: 900px) {
  .db-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .db-site-header > .wp-block-group,
  .wp-site-blocks .alignwide,
  .db-site-footer .alignwide {
    max-width: calc(100vw - 2rem);
  }

  .db-hero {
    min-height: 320px;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    background-image: url("../images/top-fv-bg-sp.webp") !important;
  }

  #home-search.db-soft-card {
    max-width: min(100%, 700px) !important;
  }

  #themes.db-soft-card,
  #latest-posts.db-soft-card,
  #featured-products.db-soft-card,
  .db-feature-strip.db-soft-card {
    padding-top: clamp(2rem, 6vw, 3rem) !important;
    padding-bottom: clamp(2rem, 6vw, 3rem) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .db-page-shell,
  .db-article-shell {
    max-width: calc(100vw - 2rem) !important;
  }

  .db-product-grid,
  .db-product-card--article-compact {
    grid-template-columns: 1fr;
  }

  .db-hero .wp-block-buttons,
  .db-hero .wp-block-buttons.is-layout-flex {
    width: min(100%, 320px);
  }

  .db-hero .wp-block-button {
    flex-basis: 100%;
  }

  .db-footer-copy {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
  }

  .wpcf7 form {
    gap: 1rem;
  }
}