/*
Theme Name: Dinner by Sophie Child
Theme URI: https://dinnerbysophie.com/
Description: Custom child theme for Dinner by Sophie, built on Twenty Twenty-Five.
Author: OpenAI
Template: twentytwentyfive
Version: 1.3.0
Text Domain: dinner-by-sophie-child
*/

:root {
  --dbs-cream: #F4F0E7;
  --dbs-warm-white: #FBF9F4;
  --dbs-dark-olive: #2F3A2A;
  --dbs-olive: #6F7755;
  --dbs-sage: #A8AD8C;
  --dbs-border: #DDD6CA;
  --dbs-muted: #6B6B63;
}

body {
  background: var(--dbs-cream);
  color: var(--dbs-dark-olive);
}

.dbs-shell {
  background: var(--dbs-cream);
}

.dbs-header {
  background: var(--dbs-warm-white);
  border-bottom: 1px solid var(--dbs-border);
}

.dbs-header a {
  color: var(--dbs-dark-olive);
  text-decoration: none;
}

.dbs-header a:hover {
  color: var(--dbs-olive);
}

.dbs-button .wp-block-button__link {
  background: var(--dbs-olive);
  color: #fff;
  border-radius: 6px;
}

.dbs-card {
  background: var(--dbs-warm-white);
  border: 1px solid var(--dbs-border);
  border-radius: 14px;
}

.dbs-photo-slot {
  background: #ebe4d8;
  border-radius: 18px;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dbs-photo-slot > * {
  width: 100%;
}

.dbs-photo-slot img {
  width: 100% !important;
  height: 100% !important;
  min-height: 340px;
  object-fit: cover;
  display: block;
}

.dbs-sophie-slot {
  width: 170px;
  height: 170px;
  min-height: 170px;
  border-radius: 999px;
  overflow: hidden;
  background: #ebe4d8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dbs-sophie-slot img {
  width: 170px !important;
  height: 170px !important;
  object-fit: cover;
  display: block;
}

.dbs-decor-slot {
  min-height: 150px;
  border-radius: 18px;
  overflow: hidden;
  background: #ebe4d8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dbs-decor-slot img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover;
  display: block;
}

.dbs-recipe-photo {
  min-height: 190px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: #ebe4d8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dbs-recipe-photo img {
  width: 100% !important;
  height: 190px !important;
  object-fit: cover;
  display: block;
}

.dbs-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 8px;
  color: var(--dbs-olive);
}

.dbs-icon svg {
  width: 42px;
  height: 42px;
  display: block;
}

.dbs-categories {
  border-top: 1px solid var(--dbs-border);
  border-bottom: 1px solid var(--dbs-border);
}

.dbs-muted {
  color: var(--dbs-muted);
}

@media (max-width: 781px) {
  .dbs-photo-slot {
    min-height: 260px;
  }
  .dbs-photo-slot img {
    min-height: 260px;
  }
}


.dbs-youtube-cta {
  background: #E7E4D7;
  border-radius: 12px;
  border: 1px solid var(--dbs-border);
}

.dbs-newsletter {
  background: var(--dbs-warm-white);
  border-top: 1px solid var(--dbs-border);
  border-bottom: 1px solid var(--dbs-border);
}

.dbs-footer {
  background: var(--dbs-warm-white);
  border-top: 1px solid var(--dbs-border);
}


/* v1.3 — lock Sophie's portrait to a true circle and remove square wrapper/background */
.dbs-sophie-slot {
  background: transparent !important;
  width: 170px !important;
  height: 170px !important;
  min-width: 170px !important;
  min-height: 170px !important;
  max-width: 170px !important;
  max-height: 170px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.dbs-sophie-slot figure.wp-block-image,
.dbs-sophie-slot .wp-block-image {
  width: 170px !important;
  height: 170px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: transparent !important;
}

.dbs-sophie-slot figure.wp-block-image img,
.dbs-sophie-slot .wp-block-image img,
.dbs-sophie-slot img {
  width: 170px !important;
  height: 170px !important;
  min-width: 170px !important;
  min-height: 170px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 !important;
}

/* Make category icon linework a touch finer and more elegant */
.dbs-icon {
  width: 38px !important;
  height: 38px !important;
  margin: 0 auto 7px !important;
}
.dbs-icon svg {
  width: 38px !important;
  height: 38px !important;
  color: var(--dbs-olive) !important;
}