/*
Theme Name: Angel Numbers
Theme URI: https://example.com/angel-numbers
Author: Angel Numbers Team
Author URI: https://example.com
Description: A muted pastel night-mode WordPress theme for angel number meanings. Features large typography, card-based layouts, category-based homepage sections, and SEO-optimized structure with minimal JavaScript.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: angel-numbers
Tags: dark, blog, custom-menu, custom-logo, featured-images, theme-options, translation-ready
*/

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* === VARIABLES === */
:root{
  --bg:#1e1d2a;
  --bg-card:#28273a;
  --bg-card-hover:#2e2d42;
  --text-primary:#d8d5e6;
  --text-secondary:#9e9ab3;
  --text-heading:#e8e5f5;
  --accent-rose:#c9a0a0;
  --accent-sage:#a0b5a0;
  --accent-lavender:#a9a0c9;
  --accent-sand:#c9bea0;
  --accent-sky:#a0b5c9;
  --accent-mauve:#b5a0b5;
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'Instrument Sans',system-ui,sans-serif;
}

/* === BASE === */
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text-primary);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--text-primary);text-decoration:none;transition:color 0.2s}
a:hover,a:focus{color:var(--text-heading)}
img{max-width:100%;height:auto;display:block}

/* === SCREEN READER === */
.screen-reader-text{
  clip:rect(1px,1px,1px,1px);
  position:absolute;
  height:1px;
  width:1px;
  overflow:hidden;
  word-wrap:normal;
}
.screen-reader-text:focus{
  clip:auto;
  display:block;
  height:auto;
  width:auto;
  position:static;
}

/* === NAVIGATION === */
.site-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--bg);
  padding:20px 0;
}
.site-nav .nav-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  gap:32px;
  overflow-x:auto;
  scrollbar-width:none;
}
.site-nav .nav-inner::-webkit-scrollbar{display:none}
.site-nav .menu{
  list-style:none;
  display:flex;
  gap:32px;
  margin:0;
  padding:0;
}
.site-nav .menu li{margin:0}
.site-nav .menu a{
  color:var(--text-secondary);
  font-size:15px;
  font-weight:500;
  letter-spacing:0.02em;
  white-space:nowrap;
}
.site-nav .menu a:hover,
.site-nav .menu a:focus,
.site-nav .menu .current-menu-item a,
.site-nav .menu .current-cat a{
  color:var(--text-heading);
}

/* === HERO / SITE HEADER === */
.site-hero{
  max-width:1200px;
  margin:0 auto;
  padding:80px 32px 60px;
  text-align:center;
}
.site-hero .site-tagline{
  font-size:14px;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--accent-lavender);
  margin-bottom:24px;
}
.site-hero .site-title{
  font-family:var(--serif);
  font-size:clamp(3rem, 7vw, 5.5rem);
  font-weight:400;
  color:var(--text-heading);
  line-height:1.1;
  margin-bottom:28px;
}
.site-hero .site-title a{color:var(--text-heading)}
.site-hero .site-description{
  font-size:clamp(1.1rem, 2vw, 1.35rem);
  color:var(--text-secondary);
  max-width:640px;
  margin:0 auto;
  line-height:1.8;
}

/* === CATEGORY HEADER (Archive) === */
.category-header{
  max-width:1200px;
  margin:0 auto;
  padding:80px 32px 40px;
}
.category-header .section-tag{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.category-header h1{
  font-family:var(--serif);
  font-size:clamp(2.5rem, 5vw, 4rem);
  font-weight:400;
  color:var(--text-heading);
  line-height:1.2;
  margin-bottom:16px;
}
.category-header .category-desc{
  font-size:1.05rem;
  color:var(--text-secondary);
  max-width:600px;
  line-height:1.8;
}

/* === SECTIONS (Front Page) === */
.home-section{
  max-width:1200px;
  margin:0 auto;
  padding:60px 32px 80px;
}
.section-header{margin-bottom:48px}
.section-tag{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.section-title{
  font-family:var(--serif);
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:400;
  color:var(--text-heading);
  line-height:1.2;
}
.section-desc{
  font-size:1.05rem;
  color:var(--text-secondary);
  margin-top:12px;
  max-width:600px;
}

/* === DIVIDER === */
.divider{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}
.divider-line{
  height:1px;
  background:var(--bg-card);
}

/* === GRID === */
.posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:20px;
}

/* === CARD === */
.post-card{
  background:var(--bg-card);
  border-radius:16px;
  padding:36px 32px;
  transition:background 0.25s;
  display:flex;
  flex-direction:column;
}
.post-card:hover{background:var(--bg-card-hover)}

.post-card .card-link{
  display:flex;
  flex-direction:column;
  flex:1;
  color:inherit;
}
.post-card .card-title{
  font-family:var(--serif);
  font-size:clamp(1.7rem, 3vw, 2.2rem);
  font-weight:400;
  line-height:1.2;
  margin-bottom:18px;
}
.post-card .card-excerpt{
  font-size:1.05rem;
  color:var(--text-secondary);
  line-height:1.75;
  flex:1;
}

/* === CARD AUTHOR === */
.card-author{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:24px;
  padding-top:20px;
}
.card-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.card-avatar-letter{
  width:36px;
  height:36px;
  border-radius:50%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-size:15px;
  color:var(--bg);
  font-weight:400;
}
.card-author-info{display:flex;flex-direction:column;gap:1px}
.card-author-name{
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
  line-height:1.3;
}
.card-author-role{
  font-size:12px;
  color:var(--text-secondary);
  line-height:1.3;
  letter-spacing:0.02em;
}

/* === ACCENT COLORS === */
.accent-rose .section-tag,
.accent-rose .card-title,
.accent-rose .category-header .section-tag{color:var(--accent-rose)}
.accent-rose .card-avatar-letter{background:var(--accent-rose)}

.accent-sage .section-tag,
.accent-sage .card-title,
.accent-sage .category-header .section-tag{color:var(--accent-sage)}
.accent-sage .card-avatar-letter{background:var(--accent-sage)}

.accent-lavender .section-tag,
.accent-lavender .card-title,
.accent-lavender .category-header .section-tag{color:var(--accent-lavender)}
.accent-lavender .card-avatar-letter{background:var(--accent-lavender)}

.accent-sand .section-tag,
.accent-sand .card-title,
.accent-sand .category-header .section-tag{color:var(--accent-sand)}
.accent-sand .card-avatar-letter{background:var(--accent-sand)}

.accent-sky .section-tag,
.accent-sky .card-title,
.accent-sky .category-header .section-tag{color:var(--accent-sky)}
.accent-sky .card-avatar-letter{background:var(--accent-sky)}

.accent-mauve .section-tag,
.accent-mauve .card-title,
.accent-mauve .category-header .section-tag{color:var(--accent-mauve)}
.accent-mauve .card-avatar-letter{background:var(--accent-mauve)}

/* === SINGLE POST === */
.single-post-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:40px 32px 80px;
}
.single-featured{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:16px;
  margin-bottom:40px;
}
.single-post-wrap h1{
  font-family:var(--serif);
  font-size:clamp(2.2rem, 5vw, 3.5rem);
  font-weight:400;
  color:var(--text-heading);
  line-height:1.15;
  margin-bottom:32px;
}
.single-content{
  font-size:1.15rem;
  color:var(--text-primary);
  line-height:1.85;
}
.single-content p{margin-bottom:1.5em}
.single-content h2{
  font-family:var(--serif);
  font-size:clamp(1.5rem, 3vw, 2rem);
  font-weight:400;
  color:var(--text-heading);
  margin:2em 0 0.8em;
}
.single-content h3{
  font-family:var(--serif);
  font-size:clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight:400;
  color:var(--text-heading);
  margin:1.5em 0 0.6em;
}
.single-content ul,.single-content ol{
  margin:0 0 1.5em 1.2em;
  color:var(--text-secondary);
}
.single-content blockquote{
  margin:1.5em 0;
  padding:0 0 0 24px;
  color:var(--text-secondary);
  font-style:italic;
  font-size:1.1em;
}

/* === SINGLE AUTHOR BOX === */
.author-box{
  display:flex;
  align-items:center;
  gap:20px;
  margin:48px 0;
  padding:32px 0;
}
.author-box .author-avatar{
  width:72px;
  height:72px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.author-box .author-avatar-letter{
  width:72px;
  height:72px;
  border-radius:50%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-size:28px;
  color:var(--bg);
  font-weight:400;
  background:var(--accent-lavender);
}
.author-box .author-name{
  font-family:var(--serif);
  font-size:1.3rem;
  color:var(--text-heading);
  margin-bottom:4px;
}
.author-box .author-role{
  font-size:14px;
  color:var(--text-secondary);
  letter-spacing:0.02em;
}
.author-box .author-bio{
  font-size:0.95rem;
  color:var(--text-secondary);
  margin-top:8px;
  line-height:1.6;
}

/* === RELATED POSTS === */
.related-posts{
  max-width:1100px;
  margin:0 auto;
  padding:0 32px 80px;
}
.related-posts h2{
  font-family:var(--serif);
  font-size:clamp(1.5rem, 3vw, 2rem);
  font-weight:400;
  color:var(--text-heading);
  margin-bottom:32px;
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:20px;
}

/* === PAGINATION === */
.pagination{
  max-width:1200px;
  margin:0 auto;
  padding:20px 32px 60px;
  display:flex;
  justify-content:center;
  gap:12px;
}
.pagination a,
.pagination span{
  display:inline-block;
  padding:10px 18px;
  background:var(--bg-card);
  color:var(--text-secondary);
  border-radius:8px;
  font-size:15px;
  font-weight:500;
}
.pagination .current{
  color:var(--text-heading);
  background:var(--bg-card-hover);
}
.pagination a:hover{
  background:var(--bg-card-hover);
  color:var(--text-heading);
}

/* === FOOTER === */
.site-footer{
  max-width:1200px;
  margin:0 auto;
  padding:60px 32px;
  text-align:center;
}
.site-footer .footer-text{
  color:var(--text-secondary);
  font-size:15px;
  margin-bottom:24px;
}
.site-footer .footer-text p{margin-bottom:8px}
.site-footer .footer-nav{margin-bottom:20px}
.site-footer .footer-nav .menu{
  list-style:none;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px;
  margin:0;
  padding:0;
}
.site-footer .footer-nav .menu a{
  color:var(--text-secondary);
  font-size:14px;
  font-weight:500;
  letter-spacing:0.02em;
}
.site-footer .footer-nav .menu a:hover{color:var(--text-heading)}
.footer-widgets{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:32px;
  text-align:left;
  margin-bottom:32px;
}
.footer-widgets .widget{color:var(--text-secondary);font-size:14px}
.footer-widgets .widget-title{
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--text-heading);
  margin-bottom:12px;
}
.footer-widgets .widget ul{list-style:none;padding:0;margin:0}
.footer-widgets .widget li{margin-bottom:8px}
.footer-widgets .widget a{color:var(--text-secondary);font-size:14px}
.footer-widgets .widget a:hover{color:var(--text-heading)}

/* === 404 === */
.error-404{
  max-width:800px;
  margin:0 auto;
  padding:120px 32px;
  text-align:center;
}
.error-404 h1{
  font-family:var(--serif);
  font-size:clamp(3rem, 7vw, 5rem);
  color:var(--text-heading);
  margin-bottom:20px;
}
.error-404 p{
  font-size:1.1rem;
  color:var(--text-secondary);
}

/* === RESPONSIVE === */
@media(max-width:600px){
  .site-hero{padding:48px 20px 40px}
  .home-section{padding:40px 20px 60px}
  .posts-grid{grid-template-columns:1fr;gap:16px}
  .post-card{padding:28px 24px}
  .site-nav .nav-inner{padding:0 20px;gap:24px}
  .divider{padding:0 20px}
  .site-footer{padding:40px 20px}
  .single-post-wrap{padding:24px 20px 60px}
  .related-posts{padding:0 20px 60px}
  .category-header{padding:48px 20px 32px}
  .author-box{flex-direction:column;text-align:center}
  .related-grid{grid-template-columns:1fr}
  .pagination{padding:20px 20px 40px}
}

/* === WORDPRESS CORE === */
.alignleft{float:left;margin:0 1.5em 1.5em 0}
.alignright{float:right;margin:0 0 1.5em 1.5em}
.aligncenter{display:block;margin:0 auto 1.5em}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:14px;color:var(--text-secondary);margin-top:8px}
.sticky .post-card{background:var(--bg-card-hover)}
.gallery-caption{font-size:14px;color:var(--text-secondary)}
.bypostauthor .card-author-name{color:var(--text-heading)}