/*
Theme Name: Daily Digi Dash
Theme URI: https://dailydigidash.com
Author: Daily Digi Dash
Author URI: https://dailydigidash.com
Description: A premium Apple-style minimal theme for Daily Digi Dash — a genuine technology & product-review resource portal. Whitespace-first layout, single-column hero, Graphite + Sky Blue accents, built for speed and SEO/AEO/GEO/LLM discoverability.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dailydigidash
Tags: technology, product-review, custom-menu, custom-logo, featured-images, translation-ready, threaded-comments
*/

/* =============================================================
   1. RESET & BASE
============================================================= */
*,*::before,*::after{ box-sizing:border-box; }

:root{
  /* --- Palette: White + Graphite + Sky Blue --- */
  --ddd-white:      #FFFFFF;
  --ddd-off-white:  #FAFAFB;
  --ddd-fog:        #F3F4F6;
  --ddd-line:       #E7E8EC;
  --ddd-graphite-900:#1D1F23;
  --ddd-graphite-700:#2B2D31;
  --ddd-graphite-500:#63666D;
  --ddd-graphite-300:#9A9CA3;
  --ddd-sky:        #0A84FF;
  --ddd-sky-dark:   #0868CC;
  --ddd-sky-tint:   #EAF3FF;
  --ddd-shadow:     0 8px 28px rgba(29,31,35,0.06);
  --ddd-shadow-lg:  0 24px 64px rgba(29,31,35,0.12);

  --ddd-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ddd-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ddd-container: 1180px;
  --ddd-container-narrow: 760px;
  --ddd-radius: 4px;
  --ddd-radius-lg: 18px;
}

html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: var(--ddd-white);
  color: var(--ddd-graphite-900);
  font-family: var(--ddd-font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition: color .2s ease, opacity .2s ease; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; }

.ddd-container{ width:100%; max-width: var(--ddd-container); margin:0 auto; padding: 0 clamp(1.25rem,4vw,2.5rem); }
.ddd-container-narrow{ width:100%; max-width: var(--ddd-container-narrow); margin:0 auto; padding: 0 clamp(1.25rem,4vw,2.5rem); }

/* =============================================================
   2. TYPOGRAPHY
============================================================= */
h1,h2,h3,h4,h5{
  font-family: var(--ddd-font-display);
  color: var(--ddd-graphite-900);
  line-height:1.18;
  font-weight:600;
  letter-spacing:-0.02em;
  margin:0 0 .5em;
}
h1{ font-size: clamp(2.4rem,5vw,4.2rem); font-weight:700; }
h2{ font-size: clamp(1.7rem,3vw,2.5rem); }
h3{ font-size: clamp(1.15rem,1.6vw,1.4rem); font-weight:600; }
p{ margin:0 0 1.2em; color: var(--ddd-graphite-500); font-weight:300; }

.ddd-eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--ddd-font-body);
  font-size:.75rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color: var(--ddd-sky);
}

.ddd-center{ text-align:center; }

/* =============================================================
   3. HEADER — clean sticky nav, no topbar (Apple-style)
============================================================= */
.ddd-masthead{
  position:sticky; top:0; z-index:999;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ddd-line);
}
.ddd-masthead-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding: .95rem 0;
}
.ddd-logo{ display:flex; align-items:center; }
.ddd-logo img{ height:34px; width:auto; }
.ddd-logo-fallback{ font-family: var(--ddd-font-display); font-size:1.3rem; font-weight:700; color: var(--ddd-graphite-900); }
.ddd-logo-fallback span{ color: var(--ddd-sky); }

.ddd-primary-nav ul{ display:flex; align-items:center; gap:2.2rem; }
.ddd-primary-nav a{
  font-size:.9rem; font-weight:500; color: var(--ddd-graphite-700);
  position:relative; padding:.3rem 0;
}
.ddd-primary-nav a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px;
  background: var(--ddd-sky); transition: width .25s ease;
}
.ddd-primary-nav a:hover::after,
.ddd-primary-nav .current-menu-item a::after{ width:100%; }
.ddd-primary-nav .current-menu-item a{ color: var(--ddd-sky); }

.ddd-header-actions{ display:flex; align-items:center; gap:.9rem; }
.ddd-search-toggle{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--ddd-line); background: var(--ddd-off-white);
  display:flex;align-items:center;justify-content:center; color: var(--ddd-graphite-700);
}
.ddd-search-toggle:hover{ background: var(--ddd-graphite-900); color:#fff; border-color: var(--ddd-graphite-900); }
.ddd-search-toggle svg{ width:17px;height:17px; }

.ddd-search-panel{
  position:fixed; inset:0; background: rgba(250,250,251,.98);
  z-index:1200; display:flex; align-items:flex-start; justify-content:center;
  padding-top:14vh; opacity:0; visibility:hidden; transition: opacity .25s ease;
}
.ddd-search-panel.is-active{ opacity:1; visibility:visible; }
.ddd-search-panel .search-form{
  width:min(680px,90vw); display:flex; border-bottom:2px solid var(--ddd-sky); padding-bottom:.5rem;
}
.ddd-search-panel input[type="search"]{
  flex:1; background:transparent; border:0; outline:0;
  font-family: var(--ddd-font-display); font-size:1.9rem; color: var(--ddd-graphite-900); font-weight:500;
}
.ddd-search-panel input::placeholder{ color: var(--ddd-graphite-300); }
.ddd-search-panel button{ background:none; border:0; color: var(--ddd-sky); }
.ddd-search-close{
  position:absolute; top:2.2rem; right:clamp(1.25rem,4vw,3rem);
  width:42px;height:42px;border-radius:50%; border:1px solid var(--ddd-line);
  background:#fff; color: var(--ddd-graphite-900); font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
}

.ddd-menu-toggle{
  display:none; width:40px;height:40px;border-radius:50%;
  border:1px solid var(--ddd-line); background: var(--ddd-off-white);
  align-items:center; justify-content:center;
}

/* =============================================================
   4. HERO — large single-column, center-aligned (Apple product style)
============================================================= */
.ddd-hero{ padding: clamp(3.5rem,7vw,6.5rem) 0 clamp(2.5rem,5vw,4rem); text-align:center; }
.ddd-hero-narrow{ max-width: 780px; margin:0 auto; }
.ddd-hero h1{ margin: .4em auto .5em; }
.ddd-hero p.ddd-lead{ font-size:1.2rem; color: var(--ddd-graphite-500); max-width: 620px; margin:0 auto 2rem; }
.ddd-hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom: 3rem; }

.ddd-hero-frame{
  max-width: 1040px; margin: 0 auto;
  border-radius: var(--ddd-radius-lg);
  overflow:hidden;
  box-shadow: var(--ddd-shadow-lg);
  position:relative;
}
.ddd-hero-frame img{ width:100%; display:block; }
.ddd-hero-frame-caption{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem 1.6rem; background: var(--ddd-off-white);
  border: 1px solid var(--ddd-line); border-top:0;
  border-radius: 0 0 var(--ddd-radius-lg) var(--ddd-radius-lg);
  text-align:left;
}
.ddd-hero-frame-caption h3{ margin:0; font-size:1.1rem; }
.ddd-hero-frame-caption a.ddd-tag{
  font-size:.78rem; font-weight:600; color: var(--ddd-sky); letter-spacing:.04em;
}

/* =============================================================
   5. BUTTONS
============================================================= */
.ddd-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .85rem 1.9rem; border-radius: 999px;
  font-size:.88rem; font-weight:600;
  background: var(--ddd-graphite-900); color:#fff; border: 1px solid var(--ddd-graphite-900);
}
.ddd-btn:hover{ background: var(--ddd-sky); border-color: var(--ddd-sky); }
.ddd-btn-outline{ background: transparent; color: var(--ddd-graphite-900); border:1px solid var(--ddd-line); }
.ddd-btn-outline:hover{ border-color: var(--ddd-graphite-900); }

/* =============================================================
   6. TRUST / CREDIBILITY STRIP — makes it feel like a real portal
============================================================= */
.ddd-trust{ padding: 3rem 0; border-top:1px solid var(--ddd-line); border-bottom:1px solid var(--ddd-line); background: var(--ddd-off-white); }
.ddd-trust-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:2rem; text-align:center; }
.ddd-trust-item .num{ font-family: var(--ddd-font-display); font-size:2.2rem; font-weight:700; color: var(--ddd-graphite-900); }
.ddd-trust-item .num span{ color: var(--ddd-sky); }
.ddd-trust-item .label{ font-size:.82rem; color: var(--ddd-graphite-500); letter-spacing:.02em; margin-top:.2rem; }

/* =============================================================
   7. CATEGORY / TOPIC SHOWCASE — resource-hub pillar grid
============================================================= */
.ddd-section{ padding: clamp(3.5rem,6vw,5.5rem) 0; }
.ddd-section-head{ text-align:center; max-width: 640px; margin: 0 auto 3rem; }

.ddd-topics-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; }
.ddd-topic-card{
  padding: 1.8rem 1.4rem; text-align:center;
  border:1px solid var(--ddd-line); border-radius: var(--ddd-radius-lg);
  background: var(--ddd-white); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ddd-topic-card:hover{ transform: translateY(-4px); box-shadow: var(--ddd-shadow); border-color: var(--ddd-sky); }
.ddd-topic-icon{
  width:52px; height:52px; border-radius:50%;
  background: var(--ddd-sky-tint); color: var(--ddd-sky);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 1rem; font-family: var(--ddd-font-display); font-weight:700; font-size:1.15rem;
}
.ddd-topic-card h3{ font-size:.98rem; margin:0 0 .3rem; }
.ddd-topic-card p{ font-size:.8rem; margin:0; color: var(--ddd-graphite-300); }

/* =============================================================
   8. RESOURCE / REVIEW CARDS — deliberately NOT "blog post" styled
============================================================= */
.ddd-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.ddd-grid-2{ grid-template-columns: repeat(2,1fr); }

.ddd-card{
  display:flex; flex-direction:column;
  border-radius: var(--ddd-radius-lg);
  overflow:hidden; border: 1px solid var(--ddd-line);
  background: var(--ddd-white);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ddd-card:hover{ transform: translateY(-5px); box-shadow: var(--ddd-shadow-lg); border-color: transparent; }
.ddd-card-thumb{ position:relative; aspect-ratio: 16/11; overflow:hidden; background: var(--ddd-fog); }
.ddd-card-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.ddd-card:hover .ddd-card-thumb img{ transform: scale(1.05); }
.ddd-card-body{ padding: 1.5rem; display:flex; flex-direction:column; flex:1; }
.ddd-card-kicker{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ddd-sky); margin-bottom:.5rem; }
.ddd-card-body h3{ margin-bottom:.5rem; font-size:1.15rem; }
.ddd-card-body h3 a:hover{ color: var(--ddd-sky); }
.ddd-card-excerpt{ font-size:.92rem; color: var(--ddd-graphite-500); flex:1; }
.ddd-card-meta{ display:flex; align-items:center; gap:.6rem; font-size:.76rem; color: var(--ddd-graphite-300); margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--ddd-line); }
.ddd-card-meta .dot{ width:3px;height:3px;border-radius:50%;background:var(--ddd-graphite-300); }

/* =============================================================
   9. OLDER POSTS BUTTON
============================================================= */
.ddd-pagination{ display:flex; justify-content:center; margin: 3.5rem 0 1rem; }

/* =============================================================
   10. SINGLE POST
============================================================= */
.ddd-single-header{ padding: 3.5rem 0 2rem; text-align:center; }
.ddd-single-header .ddd-eyebrow{ justify-content:center; }
.ddd-single-header h1{ max-width: 880px; margin:0 auto .6em; }
.ddd-single-meta{ display:flex; align-items:center; justify-content:center; gap:1.1rem; font-size:.85rem; color: var(--ddd-graphite-500); }
.ddd-single-thumb{ max-width: 1040px; margin: 2.2rem auto; border-radius: var(--ddd-radius-lg); overflow:hidden; box-shadow: var(--ddd-shadow-lg); }
.ddd-single-thumb img{ width:100%; }

.ddd-single-layout{ display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:3.5rem; align-items:flex-start; }
.ddd-single-content{ max-width: 740px; font-size:1.06rem; }
.ddd-single-content h2{ margin-top:1.8em; }
.ddd-single-content h3{ margin-top:1.5em; }
.ddd-single-content a{ color: var(--ddd-sky-dark); border-bottom:1px solid var(--ddd-sky); }
.ddd-single-content a:hover{ opacity:.7; }
.ddd-single-content blockquote{
  margin:2rem 0; padding: 1.2rem 1.6rem; border-left:3px solid var(--ddd-sky);
  background: var(--ddd-sky-tint); font-style: italic; font-size:1.1rem;
}
.ddd-single-content img{ border-radius: var(--ddd-radius-lg); margin:1.5rem 0; }
.ddd-single-content ul,.ddd-single-content ol{ padding-left:1.4rem; margin-bottom:1.2em; }
.ddd-single-content li{ margin-bottom:.4em; color: var(--ddd-graphite-500); }

/* FAQ block */
.ddd-faq{ margin: 2.5rem 0; border-top:1px solid var(--ddd-line); }
.ddd-faq-item{ padding: 1.3rem 0; border-bottom:1px solid var(--ddd-line); }
.ddd-faq-item h4{ font-family: var(--ddd-font-display); font-size:1.02rem; margin:0 0 .5rem; color: var(--ddd-graphite-900); }
.ddd-faq-item p{ margin:0; }

.ddd-share{ display:flex; align-items:center; gap:.8rem; margin:2.5rem 0; padding:1.2rem 0; border-top:1px solid var(--ddd-line); border-bottom:1px solid var(--ddd-line); }
.ddd-share span{ font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color: var(--ddd-graphite-500); }
.ddd-share a{ width:38px;height:38px;border-radius:50%; border:1px solid var(--ddd-line); display:flex;align-items:center;justify-content:center; font-size:.78rem; font-weight:700; }
.ddd-share a:hover{ background: var(--ddd-graphite-900); color:#fff; border-color: var(--ddd-graphite-900); }

.ddd-author-box{ display:flex; gap:1.2rem; align-items:center; background: var(--ddd-off-white); border-radius: var(--ddd-radius-lg); padding:1.6rem; margin: 2.5rem 0; }
.ddd-author-box img{ width:60px;height:60px;border-radius:50%; }
.ddd-author-box h4{ margin:0 0 .3rem; }
.ddd-author-box p{ margin:0; font-size:.88rem; }

.ddd-sidebar{ display:flex; flex-direction:column; gap:2.2rem; }
.ddd-widget{ border:1px solid var(--ddd-line); border-radius: var(--ddd-radius-lg); padding:1.5rem; }
.ddd-widget h3{ font-size:1rem; margin-bottom:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--ddd-line); }
.ddd-widget ul li{ margin-bottom:1rem; }
.ddd-widget ul li:last-child{ margin-bottom:0; }
.ddd-mini-post{ display:flex; gap:.8rem; align-items:flex-start; }
.ddd-mini-post img{ width:60px;height:60px;object-fit:cover;border-radius: var(--ddd-radius); flex-shrink:0; }
.ddd-mini-post h4{ font-size:.88rem; margin:0; line-height:1.4; font-family: var(--ddd-font-body); font-weight:600; }
.ddd-mini-post h4 a:hover{ color: var(--ddd-sky); }

.ddd-related{ background: var(--ddd-off-white); padding: 3.5rem 0; margin-top:3rem; }

.ddd-comments{ max-width:740px; margin:3rem auto 0; }
.comment-list{ margin-bottom:2rem; }
.comment-list li{ margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--ddd-line); }
.comment-form input,.comment-form textarea{ width:100%; padding:.9rem 1rem; margin-bottom:1rem; border:1px solid var(--ddd-line); border-radius: var(--ddd-radius); }
.comment-form textarea{ min-height:140px; }
.comment-form .form-submit input{ width:auto; background: var(--ddd-graphite-900); color:#fff; border:0; padding:.9rem 2.2rem; font-weight:600; letter-spacing:.03em; }

/* =============================================================
   11. FOOTER
============================================================= */
.ddd-footer{ background: var(--ddd-graphite-900); color: #C9CBD1; margin-top:4rem; }
.ddd-footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2.5rem; padding: 4rem 0 3rem; border-bottom:1px solid rgba(255,255,255,.08); }
.ddd-footer-brand img{ height:30px; filter: brightness(0) invert(1); }
.ddd-footer-brand p{ color:#8A8D96; font-size:.92rem; max-width:32ch; margin-top:1rem; }
.ddd-footer-col h4{ color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1.2rem; }
.ddd-footer-col ul li{ margin-bottom:.8rem; }
.ddd-footer-col a{ color:#9A9CA3; font-size:.9rem; }
.ddd-footer-col a:hover{ color: var(--ddd-sky); }
.ddd-footer-social{ display:flex; gap:.8rem; margin-top:1.4rem; }
.ddd-footer-social a{ width:34px;height:34px;border-radius:50%; border:1px solid rgba(255,255,255,.15); display:flex;align-items:center;justify-content:center; color:#fff; font-size:.75rem; }
.ddd-footer-social a:hover{ background: var(--ddd-sky); border-color: var(--ddd-sky); }
.ddd-footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding:1.6rem 0; font-size:.82rem; color:#7C7F87; }
.ddd-footer-bottom a{ color:#7C7F87; }
.ddd-footer-bottom a:hover{ color: var(--ddd-sky); }

/* =============================================================
   12. BREADCRUMBS
============================================================= */
.ddd-breadcrumbs{ font-size:.8rem; padding:.8rem 0; color: var(--ddd-graphite-300); border-bottom: 1px solid var(--ddd-line); }
.ddd-breadcrumbs a{ color: var(--ddd-graphite-500); }
.ddd-breadcrumbs a:hover{ color: var(--ddd-sky); }
.ddd-breadcrumbs span{ color: var(--ddd-graphite-900); font-weight:500; }

/* =============================================================
   13. UTILITIES
============================================================= */
.screen-reader-text{ position:absolute !important; width:1px;height:1px;overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.ddd-skip-link{ position:absolute; left:-9999px; top:0; z-index:9999; background: var(--ddd-graphite-900); color:#fff; padding:1rem 1.5rem; }
.ddd-skip-link:focus{ left:1rem; top:1rem; }

/* =============================================================
   14. RESPONSIVE
============================================================= */
@media (max-width:1024px){
  .ddd-grid{ grid-template-columns: repeat(2,1fr); }
  .ddd-topics-grid{ grid-template-columns: repeat(2,1fr); }
  .ddd-trust-grid{ grid-template-columns: repeat(2,1fr); }
  .ddd-single-layout{ grid-template-columns: 1fr; }
  .ddd-footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:782px){
  .ddd-primary-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,82vw); height:100vh;
    background:#fff; flex-direction:column; align-items:flex-start;
    padding: 6rem 2rem 2rem; box-shadow: -10px 0 40px rgba(0,0,0,.15);
    transform: translateX(100%); transition: transform .3s ease; z-index:1100;
  }
  .ddd-primary-nav.is-active{ transform: translateX(0); }
  .ddd-primary-nav ul{ flex-direction:column; align-items:flex-start; gap:1.6rem; width:100%; }
  .ddd-primary-nav a{ font-size:1.05rem; }
  .ddd-menu-toggle{ display:flex; }
  .ddd-grid, .ddd-topics-grid{ grid-template-columns: 1fr; }
  .ddd-trust-grid{ grid-template-columns: 1fr 1fr; }
  .ddd-footer-top{ grid-template-columns: 1fr; padding: 3rem 0; }
}