/*
Theme Name: Dečiji Ritam
Theme URI: https://decijiritam.com
Author: Jakša
Author URI: https://decijiritam.com
Description: Vedra, razigrana i šarena WordPress tema za Dečiji Ritam - dečije pesme na srpskom. Prilagođena logotipu i naslovnoj slici brenda: zaobljene forme, duginih boja, prijateljska tipografija. Bez datuma i komentara, sa pretragom u zaglavlju.
Version: 1.0.6
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deciji-ritam
Tags: custom-menu, featured-images, threaded-comments, translation-ready, full-width-template
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
  /* Brand palette pulled straight from the logo letters */
  --dr-blue:        #0071d9;
  --dr-blue-dark:   #0568b1;
  --dr-blue-deep:   #044f89;
  --dr-cyan:        #01b6d1;
  --dr-red:         #e8121f;
  --dr-orange:      #fc8a02;
  --dr-yellow:      #ffc20a;
  --dr-green:       #64b203;
  --dr-purple:      #7925aa;
  --dr-pink:        #e72486;

  /* Surfaces */
  --dr-sky:         #eaf5ff;
  --dr-sky-2:       #f4faff;
  --dr-cream:       #fff8ec;
  --dr-white:       #ffffff;

  /* Ink */
  --dr-ink:         #223047;
  --dr-ink-soft:    #4a5a72;
  --dr-ink-mute:    #7688a0;

  /* Effects */
  --dr-radius:      26px;
  --dr-radius-sm:   16px;
  --dr-radius-lg:   38px;
  --dr-shadow:      0 14px 30px -14px rgba(5,104,177,.35);
  --dr-shadow-lg:   0 26px 55px -22px rgba(5,104,177,.45);
  --dr-shadow-soft: 0 8px 20px -12px rgba(34,48,71,.28);

  --dr-rainbow: linear-gradient(90deg,var(--dr-red) 0%,var(--dr-orange) 20%,var(--dr-yellow) 38%,var(--dr-green) 56%,var(--dr-blue) 74%,var(--dr-purple) 90%,var(--dr-pink) 100%);

  --dr-font-head: "Baloo 2", "Nunito", system-ui, sans-serif;
  --dr-font-body: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --dr-wrap: 1160px;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--dr-font-body);
  font-size:18px;
  line-height:1.7;
  color:var(--dr-ink);
  background:var(--dr-sky-2);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(1,182,209,.10), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(231,36,134,.08), transparent 40%);
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--dr-blue); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--dr-purple); }
h1,h2,h3,h4,h5{
  font-family:var(--dr-font-head);
  font-weight:600;
  line-height:1.18;
  color:var(--dr-ink);
  margin:0 0 .6em;
  letter-spacing:.2px;
}
h1{ font-size:2.4rem; }
h2{ font-size:1.9rem; }
h3{ font-size:1.4rem; }
p{ margin:0 0 1.1em; }
ul,ol{ padding-left:1.3em; }
blockquote{
  margin:1.6em 0; padding:1.1em 1.4em;
  background:var(--dr-sky);
  border-left:6px solid var(--dr-cyan);
  border-radius:var(--dr-radius-sm);
  font-style:italic; color:var(--dr-ink-soft);
}
code,pre{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
:focus-visible{ outline:3px solid var(--dr-cyan); outline-offset:3px; border-radius:6px; }

.dr-wrap{ width:100%; max-width:var(--dr-wrap); margin-inline:auto; padding-inline:22px; }
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:1000;
  background:var(--dr-white); color:var(--dr-blue);
  padding:12px 20px; border-radius:0 0 14px 0; font-weight:800;
}
.skip-link:focus{ left:0; }

/* =========================================================
   3. BUTTONS
   ========================================================= */
.dr-btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--dr-font-head); font-weight:600; font-size:1.02rem;
  padding:.78em 1.7em; border-radius:999px; border:0; cursor:pointer;
  color:#fff; background:var(--dr-blue);
  box-shadow:0 10px 0 -2px rgba(4,79,137,.55), var(--dr-shadow-soft);
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  text-decoration:none; line-height:1;
}
.dr-btn:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 13px 0 -2px rgba(4,79,137,.55), var(--dr-shadow); }
.dr-btn:active{ transform:translateY(3px); box-shadow:0 5px 0 -2px rgba(4,79,137,.55); }
.dr-btn--sun{ background:var(--dr-orange); box-shadow:0 10px 0 -2px #c96c00, var(--dr-shadow-soft); }
.dr-btn--sun:active{ box-shadow:0 5px 0 -2px #c96c00; }
.dr-btn--grass{ background:var(--dr-green); box-shadow:0 10px 0 -2px #4c8a00, var(--dr-shadow-soft); }
.dr-btn--grass:active{ box-shadow:0 5px 0 -2px #4c8a00; }

/* =========================================================
   4. HEADER
   ========================================================= */
.dr-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.3) blur(8px);
  border-bottom:1px solid #e3eefb;
}
.dr-header::after{ content:""; display:block; height:5px; background:var(--dr-rainbow); }
.dr-header__bar{
  display:flex; align-items:center; gap:18px;
  min-height:80px; padding-block:10px;
}
.dr-brand{ display:inline-flex; align-items:center; flex:0 0 auto; }
.dr-brand img{ height:56px; width:auto; transition:transform .2s ease; }
.dr-brand:hover img{ transform:rotate(-2deg) scale(1.03); }

.dr-nav{ margin-left:auto; }
.dr-nav ul{ list-style:none; display:flex; align-items:center; gap:6px; margin:0; padding:0; }
.dr-nav li{ position:relative; }
.dr-nav a{
  display:block; font-family:var(--dr-font-head); font-weight:500; font-size:1.02rem;
  color:var(--dr-ink); padding:.55em 1.05em; border-radius:999px; transition:.2s;
}
.dr-nav a:hover,
.dr-nav .current-menu-item > a,
.dr-nav .current_page_item > a{ background:var(--dr-sky); color:var(--dr-blue); }
.dr-nav .menu-item-has-children > a::after{ content:"▾"; margin-left:.35em; font-size:.8em; opacity:.7; }
.dr-nav ul ul{
  position:absolute; top:calc(100% + 8px); left:0; min-width:210px;
  flex-direction:column; align-items:stretch; gap:2px;
  background:#fff; padding:10px; border-radius:var(--dr-radius-sm);
  box-shadow:var(--dr-shadow); border:1px solid #e9f1fb;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s;
}
.dr-nav li:hover > ul,
.dr-nav li:focus-within > ul{ opacity:1; visibility:visible; transform:translateY(0); }
.dr-nav ul ul a{ border-radius:12px; }

/* placeholder shown before the client adds a real menu */
.dr-nav__placeholder{
  font-family:var(--dr-font-head); color:var(--dr-ink-mute); font-weight:500;
  padding:.55em 1.05em; border:2px dashed #cfe0f5; border-radius:999px; font-size:.95rem;
}

/* Search toggle (magnifying glass) — sits at the far right of the nav */
.dr-search-toggle{
  flex:0 0 auto; margin-left:6px;
  width:50px; height:50px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--dr-cyan); color:#fff; border:0; cursor:pointer;
  box-shadow:none; transition:transform .15s ease, background .2s ease;
}
.dr-nav + .dr-search-toggle{ margin-left:12px; }
.dr-search-toggle:hover{ transform:scale(1.07); background:var(--dr-blue); }
.dr-search-toggle:active{ transform:scale(.94); }
.dr-search-toggle svg{ width:24px; height:24px; }

/* Mobile menu toggle */
.dr-menu-toggle{
  display:none; flex:0 0 auto;
  width:50px; height:50px; border-radius:16px;
  background:var(--dr-blue); color:#fff; border:0; cursor:pointer;
  align-items:center; justify-content:center;
  box-shadow:0 8px 0 -2px #044f89;
}
.dr-menu-toggle svg{ width:26px; height:26px; }

/* =========================================================
   5. SEARCH OVERLAY
   ========================================================= */
.dr-search-panel{
  position:fixed; inset:0; z-index:80;
  background:rgba(4,79,137,.55); backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:14vh 22px 22px;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.dr-search-panel.is-open{ opacity:1; visibility:visible; }
.dr-search-panel__inner{
  width:100%; max-width:680px;
  background:#fff; border-radius:var(--dr-radius);
  padding:30px; box-shadow:var(--dr-shadow-lg);
  transform:translateY(-18px); transition:transform .25s ease;
}
.dr-search-panel.is-open .dr-search-panel__inner{ transform:translateY(0); }
.dr-search-panel__title{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.dr-search-panel__title h2{ margin:0; font-size:1.4rem; }
.dr-search-close{
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:var(--dr-sky); color:var(--dr-ink); font-size:1.3rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:.2s;
}
.dr-search-close:hover{ background:var(--dr-pink); color:#fff; transform:rotate(90deg); }

.dr-searchform{ display:flex; gap:10px; }
.dr-searchform input[type="search"]{
  flex:1; font-family:var(--dr-font-body); font-size:1.1rem; font-weight:600;
  padding:.85em 1.2em; border:2px solid #d9e8f8; border-radius:999px;
  background:var(--dr-sky-2); color:var(--dr-ink); min-width:0;
}
.dr-searchform input[type="search"]:focus{ outline:none; border-color:var(--dr-cyan); background:#fff; }
.dr-searchform button{
  flex:0 0 auto; border:0; cursor:pointer; color:#fff; background:var(--dr-orange);
  border-radius:999px; padding:0 1.4em; font-family:var(--dr-font-head); font-weight:600; font-size:1.05rem;
  box-shadow:0 8px 0 -2px #c96c00; transition:transform .15s ease;
}
.dr-searchform button:hover{ transform:translateY(-2px); }
.dr-searchform button:active{ transform:translateY(3px); box-shadow:0 5px 0 -2px #c96c00; }

/* =========================================================
   6. HERO (front page)
   ========================================================= */
.dr-hero{ position:relative; padding:34px 0 8px; }
.dr-hero__frame{
  position:relative; border-radius:var(--dr-radius-lg); overflow:hidden;
  box-shadow:var(--dr-shadow-lg); border:6px solid #fff;
  line-height:0;
}
.dr-hero__frame img{ width:100%; height:auto; }

/* floating decorative notes */
.dr-note{ position:absolute; z-index:2; opacity:.9; animation:drFloat 6s ease-in-out infinite; pointer-events:none; }
.dr-note--1{ top:6%; left:2%;  color:var(--dr-pink);   --dr-note-edge:#a5145e; animation-delay:0s; }
.dr-note--2{ top:14%; right:3%; color:var(--dr-yellow); --dr-note-edge:#b5760a; animation-delay:1.2s; }
.dr-note--3{ bottom:26%; left:5%; color:var(--dr-green); --dr-note-edge:#3d7a00; animation-delay:.6s; }
.dr-note--4{ bottom:12%; right:6%; color:var(--dr-purple); --dr-note-edge:#4d1670; animation-delay:1.8s; }
.dr-note svg{
  width:38px; height:38px; fill:currentColor;
  filter:
    drop-shadow(.6px 0 0 var(--dr-note-edge)) drop-shadow(-.6px 0 0 var(--dr-note-edge))
    drop-shadow(0 .6px 0 var(--dr-note-edge)) drop-shadow(0 -.6px 0 var(--dr-note-edge))
    drop-shadow(.45px .45px 0 var(--dr-note-edge)) drop-shadow(-.45px .45px 0 var(--dr-note-edge))
    drop-shadow(.45px -.45px 0 var(--dr-note-edge)) drop-shadow(-.45px -.45px 0 var(--dr-note-edge));
}
@keyframes drFloat{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-16px) rotate(6deg); } }
@media (prefers-reduced-motion:reduce){ .dr-note{ animation:none; } }

/* Magic sparkles around the cloud + wand tip */
.dr-sparkles{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.dr-spark{
  position:absolute; display:block; width:18px; line-height:0;
  transform:translate(-50%,-50%) scale(.3); opacity:0;
  animation:drTwinkle 2.6s ease-in-out infinite;
}
.dr-spark svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 0 5px currentColor); }
.dr-spark--sm{ width:11px; }
.dr-spark--md{ width:17px; }
.dr-spark--lg{ width:26px; }
@keyframes drTwinkle{
  0%,100%{ opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(0deg); }
  45%    { opacity:1; transform:translate(-50%,-50%) scale(1)  rotate(80deg); }
  70%    { opacity:.55; transform:translate(-50%,-50%) scale(.7) rotate(130deg); }
}
@media (prefers-reduced-motion:reduce){
  .dr-spark{ animation:none; opacity:.85; transform:translate(-50%,-50%) scale(.9); }
}

/* =========================================================
   7. SECTIONS & LAYOUT
   ========================================================= */
.dr-section{ padding:52px 0; }
.dr-section--sky{ background:var(--dr-sky); }
.dr-section--cream{ background:var(--dr-cream); }
.dr-section__head{ text-align:center; max-width:720px; margin:0 auto 34px; }
.dr-section__head h2{ font-size:2.1rem; margin-bottom:.3em; }
.dr-section__head p{ color:var(--dr-ink-soft); margin:0; }
.dr-eyebrow{
  display:inline-block; font-family:var(--dr-font-head); font-weight:600;
  color:var(--dr-blue); background:#fff; border:2px solid #d7e8fb;
  padding:.3em 1em; border-radius:999px; font-size:.9rem; margin-bottom:.8em;
}

.dr-main{ display:block; }
.dr-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px;
  padding-block:48px; align-items:start;
}
.dr-layout--full{ grid-template-columns:minmax(0,1fr); max-width:820px; margin-inline:auto; }
.dr-layout--nosb{ grid-template-columns:minmax(0,1fr); }
.dr-content-col{ min-width:0; }
.dr-pagelinks{ margin-top:1.4em; font-family:var(--dr-font-head); font-weight:600; display:flex; gap:8px; }
.dr-pagelinks a,.dr-pagelinks > span{ padding:.3em .8em; border-radius:12px; background:var(--dr-sky); }
.dr-section__head h1 span{ color:var(--dr-blue); }

/* editor placeholder (only visible to logged-in editors) */
.dr-placeholder{
  border:2px dashed #cfe0f5; background:#fff; border-radius:var(--dr-radius);
  padding:26px; text-align:center; color:var(--dr-ink-mute); font-weight:600;
}

/* =========================================================
   8. POST CARDS GRID
   ========================================================= */
.dr-grid{
  display:grid; gap:26px;
  grid-template-columns:repeat(auto-fill, minmax(270px,1fr));
}
.dr-card{
  position:relative; background:#fff; border-radius:var(--dr-radius);
  overflow:hidden; box-shadow:var(--dr-shadow-soft);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
}
.dr-card::before{ content:""; display:block; height:8px; background:var(--dr-blue); }
.dr-card:nth-child(6n+1)::before{ background:var(--dr-red); }
.dr-card:nth-child(6n+2)::before{ background:var(--dr-orange); }
.dr-card:nth-child(6n+3)::before{ background:var(--dr-green); }
.dr-card:nth-child(6n+4)::before{ background:var(--dr-blue); }
.dr-card:nth-child(6n+5)::before{ background:var(--dr-purple); }
.dr-card:nth-child(6n+6)::before{ background:var(--dr-pink); }
.dr-card:hover{ transform:translateY(-6px); box-shadow:var(--dr-shadow-lg); }
.dr-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--dr-sky); }
.dr-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.dr-card:hover .dr-card__media img{ transform:scale(1.06); }
.dr-card__media--empty{ display:flex; align-items:center; justify-content:center; color:#b9d3ee; }
.dr-card__media--empty svg{ width:64px; height:64px; }
.dr-card__body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.dr-card__cats{ display:flex; flex-wrap:wrap; gap:6px; }
.dr-card__title{ font-size:1.22rem; margin:0; line-height:1.25; }
.dr-card__title a{ color:var(--dr-ink); }
.dr-card__title a:hover{ color:var(--dr-blue); }
.dr-card__excerpt{ font-size:.98rem; color:var(--dr-ink-soft); margin:0; }
.dr-card__more{
  margin-top:auto; align-self:flex-start; font-family:var(--dr-font-head); font-weight:600;
  color:var(--dr-blue); display:inline-flex; align-items:center; gap:.35em;
}
.dr-card__more::after{ content:"→"; transition:transform .2s ease; }
.dr-card:hover .dr-card__more::after{ transform:translateX(4px); }

/* Category pills */
.dr-pill{
  font-family:var(--dr-font-head); font-weight:500; font-size:.78rem;
  padding:.28em .85em; border-radius:999px; color:#fff; background:var(--dr-blue);
  line-height:1.3; text-transform:uppercase; letter-spacing:.4px;
}
.dr-pill:hover{ color:#fff; opacity:.9; }
.dr-pill:nth-of-type(5n+1){ background:var(--dr-red); }
.dr-pill:nth-of-type(5n+2){ background:var(--dr-orange); }
.dr-pill:nth-of-type(5n+3){ background:var(--dr-green); }
.dr-pill:nth-of-type(5n+4){ background:var(--dr-purple); }
.dr-pill:nth-of-type(5n+5){ background:var(--dr-pink); }

/* =========================================================
   9. SINGLE / PAGE
   ========================================================= */
.dr-article{
  background:#fff; border-radius:var(--dr-radius); box-shadow:var(--dr-shadow-soft);
  overflow:hidden;
}
.dr-article__hero{ position:relative; aspect-ratio:16/8; background:var(--dr-sky); overflow:hidden; }
.dr-article__hero img{ width:100%; height:100%; object-fit:cover; }
.dr-article__inner{ padding:34px clamp(22px,5vw,54px) 44px; }
.dr-article__cats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.dr-article__title{ font-size:clamp(1.9rem,4vw,2.7rem); margin-bottom:.5em; }
.dr-entry{ font-size:1.06rem; color:var(--dr-ink-soft); }
.dr-entry h2{ margin-top:1.5em; }
.dr-entry h3{ margin-top:1.3em; }
.dr-entry a{ font-weight:700; text-decoration:underline; text-decoration-color:rgba(1,182,209,.5); text-underline-offset:3px; }
.dr-entry img{ border-radius:var(--dr-radius-sm); margin:1.2em 0; box-shadow:var(--dr-shadow-soft); }
.dr-entry ul li,.dr-entry ol li{ margin-bottom:.5em; }
.dr-entry ul{ list-style:none; padding-left:0; }
.dr-entry ul li{ position:relative; padding-left:1.9em; }
.dr-entry ul li::before{ content:"♪"; position:absolute; left:0; top:-1px; color:var(--dr-cyan); font-size:1.1em; }
.dr-entry .wp-block-embed,
.dr-entry iframe{ margin:1.4em 0; }

/* Responsive video/embeds */
.dr-entry .wp-block-embed__wrapper,
.dr-entry .wp-block-embed iframe{ width:100%; }
.dr-entry .wp-embed-aspect-16-9 .wp-block-embed__wrapper{ position:relative; padding-top:56.25%; }
.dr-entry .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe{ position:absolute; inset:0; width:100%; height:100%; border-radius:var(--dr-radius-sm); }

.dr-tags{ margin-top:30px; padding-top:22px; border-top:2px dashed #e3eefb; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.dr-tags__label{ font-family:var(--dr-font-head); font-weight:600; color:var(--dr-ink-mute); margin-right:4px; }

/* =========================================================
   10. RELATED
   ========================================================= */
.dr-related{ margin-top:52px; }
.dr-related h2{ text-align:center; margin-bottom:26px; }

/* =========================================================
   11. SIDEBAR
   ========================================================= */
.dr-sidebar{ display:flex; flex-direction:column; gap:24px; }
.dr-widget{
  background:#fff; border-radius:var(--dr-radius); padding:24px 24px 26px;
  box-shadow:var(--dr-shadow-soft); border-top:6px solid var(--dr-cyan);
}
.dr-widget .widget-title,
.dr-widget h2,.dr-widget h3{ font-size:1.2rem; margin-bottom:.7em; }
.dr-widget ul{ list-style:none; padding:0; margin:0; }
.dr-widget li{ padding:.4em 0; border-bottom:1px dashed #eef4fb; }
.dr-widget li:last-child{ border-bottom:0; }
.dr-widget a{ color:var(--dr-ink-soft); font-weight:600; }
.dr-widget a:hover{ color:var(--dr-blue); }

/* =========================================================
   12. PAGINATION
   ========================================================= */
.dr-pagination{ margin:44px auto 0; display:flex; justify-content:center; }
.dr-pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.dr-pagination .page-numbers{
  font-family:var(--dr-font-head); font-weight:600;
  min-width:46px; height:46px; padding:0 14px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--dr-ink); box-shadow:var(--dr-shadow-soft); transition:.2s;
}
.dr-pagination .page-numbers:hover{ background:var(--dr-sky); color:var(--dr-blue); }
.dr-pagination .page-numbers.current{ background:var(--dr-blue); color:#fff; }
.dr-pagination .page-numbers.dots{ box-shadow:none; background:transparent; }

/* =========================================================
   13. 404 / NO RESULTS
   ========================================================= */
.dr-empty{ text-align:center; max-width:620px; margin:0 auto; padding:20px 0; }
.dr-empty__emoji{ font-size:4rem; line-height:1; margin-bottom:.2em; }
.dr-empty h1{ font-size:2.4rem; }
.dr-empty p{ color:var(--dr-ink-soft); }
.dr-empty .dr-searchform{ max-width:460px; margin:24px auto 0; }

/* =========================================================
   14. FOOTER
   ========================================================= */
.dr-footer{ position:relative; margin-top:60px; color:#eaf5ff; }
.dr-footer::before{ content:""; display:block; height:6px; background:var(--dr-rainbow); }
.dr-footer__body{
  background:linear-gradient(180deg,var(--dr-blue-dark),var(--dr-blue-deep));
  padding:48px 0 20px;
}
.dr-footer__top{ display:flex; flex-wrap:wrap; gap:30px; align-items:center; justify-content:space-between; }
.dr-footer__brand{ display:flex; align-items:center; gap:18px; }
.dr-footer__logo{
  background:#fff; border-radius:22px; padding:12px 16px; box-shadow:var(--dr-shadow);
  display:inline-flex; flex:0 0 auto;
}
.dr-footer__logo img{ height:64px; width:auto; }
.dr-footer__tagline{ font-family:var(--dr-font-head); font-size:1.15rem; color:#fff; margin:0; max-width:320px; }
.dr-footer__nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; padding:0; }
.dr-footer__nav a{ color:#d6ecff; font-weight:700; }
.dr-footer__nav a:hover{ color:#fff; }
.dr-footer__bottom{
  margin-top:34px; padding-top:18px; border-top:1px solid rgba(255,255,255,.18);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center;
  font-size:.92rem; color:#c4e0f7;
}
.dr-footer__bottom a{ color:#fff; }

/* =========================================================
   15. RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  body{ font-size:17px; }
  .dr-layout{ grid-template-columns:minmax(0,1fr); }
  .dr-sidebar{ order:2; }

  .dr-menu-toggle{ display:inline-flex; }
  .dr-nav{
    position:absolute; top:calc(100% + 5px); left:0; right:0; margin:0;
    background:#fff; border-bottom:1px solid #e3eefb; box-shadow:var(--dr-shadow);
    max-height:0; overflow:hidden; transition:max-height .3s ease; z-index:55;
  }
  .dr-nav.is-open{ max-height:78vh; overflow:auto; }
  .dr-nav ul{ flex-direction:column; align-items:stretch; gap:2px; padding:14px 16px; }
  .dr-nav a{ padding:.8em 1em; border-radius:14px; }
  .dr-nav ul ul{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; padding:0 0 0 14px; min-width:0; background:transparent;
  }
  .dr-header__bar{ position:relative; }
  /* keep search + hamburger on the right */
  .dr-search-toggle{ margin-left:auto; }
}
@media (max-width:560px){
  h1{ font-size:2rem; } h2{ font-size:1.6rem; }
  .dr-brand img{ height:46px; }
  .dr-section{ padding:40px 0; }
  .dr-hero{ padding:20px 0 4px; }
  .dr-hero__frame{ border-radius:26px; border-width:5px; }
  .dr-note{ display:none; }
  .dr-article__inner{ padding:24px 20px 32px; }
  .dr-footer__top{ flex-direction:column; align-items:flex-start; }
}