/*
Theme Name: Decor With A Dream
Theme URI: https://decorwithadream.com/
Description: Child theme of Kadence for decorwithadream.com. Design system v1 — limewash ground, petrol accent, Instrument Serif + Karla, and the Mat image treatment.
Author: Decor With A Dream
Template: kadence
Version: 1.0.0
Text Domain: dwad
*/

/* =========================================================
   1. Tokens
   ========================================================= */
:root{
  --dwad-limewash:#F3F4F1;
  --dwad-chalk:#FFFFFF;
  --dwad-stone:#D6D3CB;
  --dwad-petrol:#33565C;
  --dwad-petrol-deep:#24403F;
  --dwad-clay:#6F655A;
  --dwad-ink:#1C2523;

  --dwad-display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --dwad-body:"Karla", "Helvetica Neue", Arial, sans-serif;

  --dwad-s1:4px;  --dwad-s2:8px;  --dwad-s3:12px; --dwad-s4:16px; --dwad-s5:24px;
  --dwad-s6:32px; --dwad-s7:48px; --dwad-s8:64px; --dwad-s9:96px; --dwad-s10:128px;

  --dwad-ease:cubic-bezier(.22,.61,.36,1);
  --dwad-radius:2px;
}

/* =========================================================
   2. Ground and type
   ========================================================= */
body,
body.wp-site-blocks,
.site,
.content-bg.entry-content-wrap{
  background-color:var(--dwad-limewash);
}

body{
  color:var(--dwad-ink);
  font-family:var(--dwad-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* The serif is the brand's voice: hero, section and post titles only. */
.site-title,
.entry-hero h1,
.entry-title,
.page-title,
.archive-title,
h1.entry-title,
.dwad-display{
  font-family:var(--dwad-display);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.015em;
  text-wrap:balance;
}

/* The grotesque is the article's voice: everything inside body copy. */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.widget-title,
.comment-reply-title{
  font-family:var(--dwad-body);
  font-weight:700;
  letter-spacing:-.005em;
  text-wrap:balance;
}

.entry-content p,
.entry-content li{
  max-width:68ch;
}

/* Uppercase utility labels — category pills, meta, eyebrows. */
.entry-taxonomies,
.entry-taxonomies a,
.dwad-eyebrow,
.post-meta .category-links,
.wp-block-post-terms{
  font-family:var(--dwad-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dwad-clay);
}

.entry-meta,
.entry-meta a,
.posted-on,
.byline{
  color:var(--dwad-clay);
  font-size:.8125rem;
  letter-spacing:.01em;
}

/* =========================================================
   3. Links
   ========================================================= */
.entry-content a:not(.button):not(.wp-block-button__link){
  color:var(--dwad-petrol);
  text-decoration:none;
  border-bottom:1px solid var(--dwad-stone);
  transition:border-color .25s var(--dwad-ease);
}
.entry-content a:not(.button):not(.wp-block-button__link):hover{
  border-bottom-color:var(--dwad-petrol);
}

/* =========================================================
   4. THE MAT — the site's signature element
   Every image is a mounted print: even inset on three sides,
   deeper below, where the label and headline sit.
   ========================================================= */
.loop-entry.content-bg,
.dwad-mat{
  background:var(--dwad-chalk);
  border:0;
  border-radius:var(--dwad-radius);
  box-shadow:none;
  padding:var(--dwad-s4) var(--dwad-s4) var(--dwad-s5);
  overflow:hidden;
}

.loop-entry .post-thumbnail,
.dwad-mat__plate{
  overflow:hidden;
  border-radius:0;              /* photographs are never rounded */
  background:var(--dwad-stone); /* holds the space, so nothing shifts on load */
  margin-bottom:var(--dwad-s4);
}

.loop-entry .post-thumbnail img,
.dwad-mat__plate img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  transition:transform .45s var(--dwad-ease);
  transform-origin:center;
}

/* The inversion: the print scales DOWN inside its mat. */
.loop-entry:hover .post-thumbnail img,
.loop-entry:focus-within .post-thumbnail img,
.dwad-mat:hover .dwad-mat__plate img,
.dwad-mat:focus-within .dwad-mat__plate img{
  transform:scale(.96);
}

.loop-entry .entry-taxonomies a,
.dwad-mat .entry-taxonomies a{
  transition:color .3s var(--dwad-ease);
}
.loop-entry:hover .entry-taxonomies a,
.dwad-mat:hover .entry-taxonomies a{
  color:var(--dwad-petrol);
}

.loop-entry .entry-title{
  font-family:var(--dwad-display);
  font-size:1.375rem;
  line-height:1.15;
  margin:0 0 var(--dwad-s2);
}
.loop-entry .entry-title a{
  color:var(--dwad-ink);
  border-bottom:0;
}

/* Kadence pads loop content again inside the wrap — the mat already did it. */
.loop-entry .entry-content-wrap{
  padding:0;
}

/* Image aspect ratios: 4:5 in grids, 3:2 for article heroes. */
.loop-entry .post-thumbnail,
.dwad-ratio-4-5{ aspect-ratio:4/5; }
.dwad-ratio-3-2{ aspect-ratio:3/2; }

/* =========================================================
   5. Rules, dividers, chrome
   Stone is for rules only. It is never text.
   ========================================================= */
hr,
.wp-block-separator,
.site-header,
.site-footer-row,
.entry-related{
  border-color:var(--dwad-stone);
}
.wp-block-separator{
  border-top:1px solid var(--dwad-stone);
  border-bottom:0;
  opacity:1;
}

/* Style-tag pills on the single post. Text, a rule, and nothing else. */
.dwad-pills{
  display:flex;
  flex-wrap:wrap;
  gap:var(--dwad-s2);
  list-style:none;
  margin:0;
  padding:0;
}
.dwad-pills a{
  display:inline-block;
  padding:6px var(--dwad-s3);
  border:1px solid var(--dwad-stone);
  border-radius:100px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dwad-clay);
  text-decoration:none;
  transition:border-color .25s var(--dwad-ease), color .25s var(--dwad-ease);
}
.dwad-pills a:hover{
  border-color:var(--dwad-petrol);
  color:var(--dwad-petrol);
}

/* Breadcrumbs sit quietly under the header. */
.rank-math-breadcrumb{
  font-size:.8125rem;
  color:var(--dwad-clay);
  padding:var(--dwad-s4) 0 0;
}
.rank-math-breadcrumb a{
  color:var(--dwad-clay);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.rank-math-breadcrumb a:hover{
  color:var(--dwad-petrol);
  border-bottom-color:var(--dwad-stone);
}

/* =========================================================
   6. Buttons — one style, used rarely
   ========================================================= */
.button,
.wp-block-button__link,
input[type="submit"]{
  background:var(--dwad-petrol);
  color:var(--dwad-chalk);
  border:0;
  border-radius:var(--dwad-radius);
  font-family:var(--dwad-body);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:14px var(--dwad-s5);
  box-shadow:none;
  transition:background-color .25s var(--dwad-ease);
}
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover{
  background:var(--dwad-petrol-deep);
  color:var(--dwad-chalk);
}

/* =========================================================
   7. Accessibility — visible focus on everything
   ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.loop-entry a:focus-visible{
  outline:2px solid var(--dwad-petrol);
  outline-offset:3px;
  border-radius:var(--dwad-radius);
}

.dwad-skip-link:focus{
  position:fixed;
  top:var(--dwad-s4);
  left:var(--dwad-s4);
  z-index:9999;
  background:var(--dwad-chalk);
  color:var(--dwad-ink);
  padding:var(--dwad-s3) var(--dwad-s4);
}

/* =========================================================
   8. Motion — four movements, and that is the whole list
   ========================================================= */
.dwad-reveal{
  opacity:0;
  transform:translateY(8px);
}
.dwad-reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity .6s var(--dwad-ease), transform .6s var(--dwad-ease);
}

.header-navigation .menu-item .sub-menu,
.mega-menu-container{
  transition:opacity .18s var(--dwad-ease);
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .dwad-reveal{opacity:1; transform:none;}
}

/* =========================================================
   9. Rhythm
   ========================================================= */
.dwad-section{ padding-block:var(--dwad-s9); }
@media (max-width:767px){
  .dwad-section{ padding-block:var(--dwad-s8); }
}

/* Article measure — 680px keeps running text near 65 characters. */
.single .entry-content > *:not(.alignwide):not(.alignfull):not(.wp-block-kadence-rowlayout){
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}