/* Ryalistic Blog — style.css */
@font-face {
  font-family: 'Ryalistic';
  src: url('assets/font/ryalistic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --cream: #ffffff;
  --ink:   #222222;
  --mid:   #555555;
  --pale:  #f5f5f5;
  --accent:#FFCC00;
  --border:#dddddd;
  --card:  #ffffff;
  --shadow:0 4px 20px rgba(0,0,0,.08);
  --r: 8px;
  --max: 740px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:'Lora',Georgia,serif;
  font-size:1.15rem;line-height:1.85;min-height:100vh}


/* Copybook style grid paper background for inside pages */
body.inside-page {
  background-color: #fbfbf7;
  background-image: 
    linear-gradient(to right, rgba(27, 60, 179, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 60, 179, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
body.inside-page span {
  color: inherit !important;
}

/* ── Header ── */
.site-header{
  background:var(--accent);
  border-bottom:4px solid var(--ink);
  padding:1.6rem 2rem;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  position:relative;
}
.logo{
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .2s;
  text-decoration:none;
}
.logo:hover{opacity:.85}
.logo-img {
  height:48px;
  width:auto;
  display:block;
}
.logo-group {
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.site-tagline {
  font-family:'Lora', Georgia, serif;
  font-size:1.35rem;
  color:var(--ink);
  white-space:nowrap;
  letter-spacing:-0.01em;
}
.site-tagline em {
  font-style:italic;
}
.site-tagline strong {
  font-weight:700;
}
.header-actions {
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.yt-subscribe-btn {
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.85rem;
  color:#ffffff !important;
  background-color:#ff0000;
  padding:0.5rem 1rem;
  border-radius:50px;
  text-decoration:none !important;
  transition:background-color 0.2s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(255,0,0,0.3);
}
.yt-subscribe-btn:hover {
  background-color:#cc0000;
  transform:scale(1.02);
}
.contact-capsule-btn {
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.85rem;
  color:var(--ink) !important;
  background-color:transparent;
  border:2px solid var(--ink);
  padding:0.4rem 1rem;
  border-radius:50px;
  text-decoration:none !important;
  transition:background-color 0.2s, color 0.2s, transform 0.1s;
}
.contact-capsule-btn:hover {
  background-color:var(--ink);
  color:var(--cream) !important;
  transform:scale(1.02);
}
.home-link{
  font-family:'Inter',sans-serif;font-size:.82rem;
  color:var(--ink);text-decoration:none;
  transition:color .2s;
  font-weight: 500;
}
.home-link:hover{color:var(--mid)}

/* ── Index Grid ── */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:2rem;
  max-width:1180px;
  margin:2.8rem auto;
  padding:0 1.5rem;
}

.post-card{
  background:var(--card);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;
  transition:transform .25s,box-shadow .25s;
  border:1px solid var(--border);
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.post-card a{text-decoration:none;color:inherit;display:block}
.card-img{width:100%;aspect-ratio:125/58;overflow:hidden;background:var(--pale)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.post-card:hover .card-img img{transform:scale(1.03)}
.card-body{padding:1.4rem 1.6rem 1.8rem}
.card-title{
  font-family:'Ryalistic', sans-serif;
  font-size:2.8rem;font-weight:normal;line-height:1.1;color:#1b3cb3;
  margin-bottom:0.8rem;
  letter-spacing:-0.03em;
}
.card-meta{
  display:flex;flex-direction:column;gap:0.5rem;
  margin-top:0.8rem;
}
.card-date{
  font-size:0.85rem;font-weight:700;color:var(--mid);
  font-family:'Inter', sans-serif;
}
.card-tags{
  display:none;
}

/* ── Filter & Sort Controls ── */
.controls-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  max-width: 1180px;
  margin: 2.8rem auto 0;
  padding: 0 1.5rem;
  font-family: 'Inter', sans-serif;
}
.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
}
.control-group select {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 0.5rem 2rem 0.5rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}
.control-group select:focus {
  border-color: var(--ink);
}

/* ── Post Layout ── */
.post-header-full {
  max-width:1100px;
  margin:0 auto;
  padding:2rem 1.5rem 1rem;
}
.post-wrap{
  max-width:none;
  margin:0;
  padding:0 2rem 4rem 0;
  /* Single vertical red margin line on the right, like a copybook page */
  border-right: 2px solid #ff4d4d;
}
.post-title{
  font-family:'Ryalistic','Lora',serif;
  font-size:clamp(3.5rem, 9vw, 6.5rem);
  font-weight:normal;
  line-height:0.5;
  letter-spacing:-0.05em;
  margin-bottom:0.8rem;
  color:#1b3cb3; /* ballpen blue */
}
.post-meta {
  display:flex;align-items:center;gap:1rem;margin-bottom:1.8rem;
  font-family:'Inter',sans-serif;
}
.post-meta-date {
  font-weight:700;font-size:1rem;color:#444;
}
.post-meta-tags {
  display:flex;gap:.5rem;flex-wrap:wrap;
}
.post-tag {
  font-size:.78rem;font-weight:normal;
  padding:.15rem .8rem;border-radius:50px;
  font-family:'Inter', sans-serif;
  border: none;
  text-decoration:none !important;
}
.post-tag.tag-atl {
  background-color: #e0f2f1;
  color: #00796b;
}
.post-tag.tag-cp {
  background-color: #fce4ec;
  color: #c2185b;
}
.post-tag.tag-sel {
  background-color: #fff3e0;
  color: #f57c00;
}
.post-tag.tag-sdg {
  background-color: #ede7f6;
  color: #5e35b1;
}
.post-tag.tag-wok {
  background-color: #f1f8e9;
  color: #558b2f;
}
.post-tag.tag-aok {
  background-color: #e8eaf6;
  color: #283593;
}

.post-cover-full {
  width: 100%;
  max-width: 100%;
  margin-bottom: 2rem;
  overflow: hidden;
}
.post-cover-full img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Share Widget ── */
.share-section {
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-family: 'Inter', sans-serif;
}
.share-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.8rem;
}
.share-buttons {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none !important;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.share-btn:hover {
  background: var(--pale);
  border-color: var(--ink);
}

.post-cover{
  display:none;
}

/* ── Navigation Buttons ── */
.prev-next-nav {
  display: flex;
  justify-content: space-between;
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-family: 'Inter', sans-serif;
}
.nav-page-btn {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none !important;
  max-width: 48%;
}
.nav-page-btn .nav-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}
.nav-page-btn .nav-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1b3cb3;
  line-height: 1.3;
}
.nav-page-btn:hover .nav-title {
  text-decoration: underline;
}
.nav-page-btn.prev-btn {
  text-align: left;
}
.nav-page-btn.next-btn {
  text-align: right;
  margin-left: auto;
}

/* ── Article Content ── */
.post-content p{margin-bottom:1.8rem;letter-spacing:-0.003em}
.post-content h2{font-family:'Ryalistic','Lora',serif;font-size:4.8rem;font-weight:normal;margin:2.8rem 0 1.2rem;line-height:0.55;color:#1b3cb3}
.post-content h3{font-family:'Ryalistic','Lora',serif;font-size:3.6rem;font-weight:normal;margin:2.2rem 0 1rem;line-height:0.6;color:#1b3cb3}
.post-content h4{
  font-size:.88rem;font-weight:600;margin:1.8rem 0 .5rem;
  color:var(--mid);text-transform:uppercase;letter-spacing:.07em;
  font-family:'Inter',sans-serif;
}
.post-content blockquote{
  border-left:4px solid var(--accent);
  padding:.8rem 1.3rem;margin:2rem 0;
  background:rgba(255,204,0,.08);
  border-radius:0 var(--r) var(--r) 0;
  font-style:italic;color:var(--mid);
}
.post-content ul,.post-content ol{margin:1rem 0 1.5rem 1.6rem}
.post-content li{margin-bottom:.6rem;line-height:1.7}
.post-content a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.post-content a:hover {
  color: var(--mid);
  text-decoration-color: var(--ink);
}
.post-content hr{border:none;border-top:1px solid var(--border);margin:2.4rem 0}

/* ── Images inside content ── */
.post-content img{
  max-width:100%;height:auto;border-radius:var(--r);
  display:block;margin:2rem auto;
}

.post-content figure,.post-figure{margin:2.2rem 0;text-align:center}
.post-content figcaption,.post-figure figcaption{
  font-size:.83rem;color:var(--mid);margin-top:.55rem;
  font-style:italic;font-family:'Inter',sans-serif;
}
.solar-fig img{max-width:260px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.12))}

/* ── Video / Audio ── */
.post-content video,.post-content audio{
  width:auto;max-width:100%;height:400px;border-radius:var(--r);margin:2rem auto;display:block;
  box-shadow:var(--shadow);
}
.post-figure video,.post-figure audio{width:auto;max-width:100%;height:400px;border-radius:var(--r);display:block;margin:0 auto;}
.audio-figure{
  background:var(--pale);border-radius:var(--r);
  padding:1.2rem 1.5rem;margin:2rem 0;
}
.audio-label{
  font-family:'Inter',sans-serif;font-size:.9rem;
  font-weight:500;margin-bottom:.7rem;color:var(--mid);
}
.audio-figure audio{width:100%}

/* ── YouTube Shorts ── */
.youtube-short iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Footer ── */
.site-footer{
  background:var(--ink);color:rgba(255,255,255,.4);
  text-align:center;padding:1.6rem;
  font-family:'Inter',sans-serif;font-size:.82rem;
  border-top:1px solid #333;
}

/* ── Utils ── */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap}

@media(max-width:760px){
  .blog-grid{grid-template-columns:1fr}
  .post-wrap{padding:0 1rem 3rem; border-right:none}
  .home-link{position:static;display:inline-block;margin-bottom:0.8rem}
  .site-header{flex-direction:column;padding:1.2rem 1rem;align-items:center;text-align:center;gap:1rem}
  .logo-group{flex-direction:column;gap:0.5rem}
  .header-actions{flex-direction:column;gap:0.8rem}
}

/* ── Contact Form ── */
.contact-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-group label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.form-group input, .form-group textarea {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cream);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group textarea:focus {
  border-color: #1b3cb3;
  box-shadow: 0 0 0 3px rgba(27,60,179,0.1);
}
.submit-btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
  background-color: #1b3cb3;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  align-self: flex-start;
}
.submit-btn:hover {
  background-color: #153090;
}