/*
Theme Name: BD24 News
Theme URI: https://example.com/bd24-news
Author: Your Name
Author URI: https://example.com
Description: An editorial, high-density WordPress news theme with a deep navy & crimson red brand system, built for Bengali/English news portals. Ships with a full Customizer color system so every brand color can be changed without touching code.
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: LICENSE
Text Domain: bd24-news
Tags: news, blog, custom-colors, custom-menu, custom-logo, featured-images, translation-ready, threaded-comments

BD24 News WordPress Theme is released under the terms of GNU GPL v2 or later.
*/

/* =========================================================
   1. CSS CUSTOM PROPERTIES (color tokens — all overridable
   live from Appearance → Customize → Theme Colors)
   ========================================================= */
:root{
  --color-primary:            #001736;
  --color-primary-container:  #002b5c;
  --color-on-primary:         #ffffff;
  --color-on-primary-container:#7594cb;

  --color-secondary:           #bc0000;
  --color-secondary-container: #e41f13;
  --color-on-secondary:        #ffffff;
  --color-on-secondary-container:#fffbff;

  --color-tertiary:            #161818;
  --color-tertiary-container:  #2a2c2c;
  --color-on-tertiary:         #ffffff;
  --color-tertiary-fixed-dim:  #c6c6c7;

  --color-sports-accent:       #3f5f92; /* surface-tint */

  --color-background:          #fbf9f8;
  --color-surface:              #fbf9f8;
  --color-surface-dim:          #dcd9d9;
  --color-surface-bright:       #fbf9f8;
  --color-surface-container-lowest:#ffffff;
  --color-surface-container-low:#f6f3f2;
  --color-surface-container:    #f0eded;
  --color-surface-container-high:#eae8e7;
  --color-surface-container-highest:#e4e2e1;
  --color-surface-variant:      #e4e2e1;

  --color-on-surface:           #1b1c1c;
  --color-on-surface-variant:   #43474f;
  --color-outline:              #747780;
  --color-outline-variant:      #c4c6d0;

  --font-headline:'Noto Serif', 'SolaimanLipi', serif;
  --font-body:'Work Sans','Noto Sans Bengali', sans-serif;
  --font-label:'Inter','Noto Sans Bengali', sans-serif;

  --container-max: 1200px;
  --gutter: 20px;
  --margin-desktop: 24px;
  --margin-mobile: 16px;
  --section-gap: 40px;
  --stack-sm: 8px;
  --stack-md: 16px;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--color-background);
  color:var(--color-on-surface);
  font-family:var(--font-body);
  font-size:16px;
  line-height:24px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,h5,p{margin:0;}

.container{
  width:100%;
  max-width:var(--container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--margin-mobile);
  padding-right:var(--margin-mobile);
}
@media(min-width:768px){
  .container{padding-left:0;padding-right:0;}
}
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;
  word-wrap:normal!important;
}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-primary);color:#fff;padding:10px 16px;z-index:99999;}
.skip-link:focus{left:8px;top:8px;}

/* =========================================================
   3. TOP BAR
   ========================================================= */
.topbar{
  width:100%;
  background:var(--color-surface-container-low);
  border-bottom:1px solid var(--color-outline-variant);
  padding:8px var(--margin-mobile);
  font-family:var(--font-label);
  font-size:12px;
  font-weight:500;
  line-height:14px;
  color:var(--color-on-surface-variant);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
@media(min-width:768px){.topbar{padding:8px var(--margin-desktop);}}
.topbar__meta{display:flex;align-items:center;gap:var(--stack-sm);}
.topbar__icon{font-size:16px;line-height:1;}
.topbar__social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--color-on-surface-variant);
  transition:color .15s ease;
}
.topbar__social-icon:hover{color:var(--color-secondary);}
.topbar__social-icon svg{display:block;}

/* =========================================================
   4. HEADER / BRANDING
   ========================================================= */
.site-header{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--stack-md) var(--margin-mobile);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--stack-md);
  background:var(--color-surface);
  flex-wrap:wrap;
}
@media(min-width:768px){.site-header{padding:var(--stack-md) 0;flex-wrap:nowrap;}}
.site-branding{display:flex;flex-direction:column;}
.site-branding a{display:flex;flex-direction:column;}
.site-title{
  font-family:var(--font-headline);
  font-size:32px;
  font-weight:700;
  line-height:40px;
  color:var(--color-primary);
  margin:0;
}
.site-title .accent{color:var(--color-secondary);}
.site-description{
  font-family:var(--font-label);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-on-surface-variant);
  margin-top:4px;
}
.custom-logo-link img{max-height:64px;width:auto;}
.header-ad{
  display:none;
  width:600px;
  max-width:100%;
  height:80px;
  background:var(--color-surface-variant);
  border:1px solid var(--color-outline-variant);
  align-items:center;
  justify-content:center;
  color:var(--color-on-surface-variant);
  font-size:14px;
  overflow:hidden;
}
@media(min-width:768px){.header-ad{display:flex;}}

/* =========================================================
   5. PRIMARY NAVIGATION
   ========================================================= */
.site-nav{
  background:var(--color-primary);
  border-bottom:1px solid var(--color-outline-variant);
  width:100%;
  color:var(--color-on-primary);
  position:relative;
  z-index:50;
}
.site-nav__inner{
  max-width:var(--container-max);
  margin:0 auto;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:0 var(--margin-mobile);
  min-height:48px;
}
@media(max-width:767px){
  .primary-menu-wrap{order:3;flex-basis:100%;}
  .primary-menu-wrap.is-open{display:block;}
}
@media(min-width:768px){.site-nav__inner{padding:0;}}
.nav-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:0;
  color:var(--color-on-primary);
  padding:12px 4px;
  font-family:var(--font-label);
  font-size:14px;
  font-weight:600;
}
@media(min-width:768px){.nav-toggle{display:none;}}
.primary-menu-wrap{display:none;}
.primary-menu-wrap.is-open{display:block;}
@media(min-width:768px){.primary-menu-wrap{display:block;}}

.primary-menu{
  display:flex;
  flex-direction:column;
}
@media(min-width:768px){.primary-menu{flex-direction:row;height:48px;}}
.primary-menu li{position:relative;}
.primary-menu li > a{
  display:flex;
  align-items:center;
  height:100%;
  min-height:44px;
  padding:0 16px;
  font-family:var(--font-label);
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--color-on-primary);
  transition:background-color .15s ease,color .15s ease;
  white-space:nowrap;
}
.primary-menu li > a:hover,
.primary-menu li.current-menu-item > a,
.primary-menu li.current-menu-ancestor > a{
  background:var(--color-secondary-container);
  color:var(--color-on-secondary-container);
}
.primary-menu li.menu-item-highlight > a{
  background:var(--color-secondary);
  color:var(--color-on-secondary);
  font-weight:700;
}
.nav-search{
  display:flex;
  align-items:center;
  height:48px;
}
.nav-search__toggle{
  background:transparent;
  border:0;
  color:var(--color-on-primary);
  height:100%;
  padding:0 16px;
  display:flex;
  align-items:center;
}
.nav-search__toggle:hover{background:var(--color-primary-container);}
.nav-search-form{
  display:none;
  position:absolute;
  right:var(--margin-mobile);
  top:100%;
  background:var(--color-surface);
  border:1px solid var(--color-outline-variant);
  padding:8px;
  gap:6px;
}
.nav-search-form.is-open{display:flex;}
.nav-search-form input[type="search"]{
  border:1px solid var(--color-outline);
  padding:8px 10px;
  font-family:var(--font-label);
  min-width:200px;
}
.nav-search-form button{
  background:var(--color-secondary);
  color:var(--color-on-secondary);
  border:0;
  padding:0 14px;
  font-weight:600;
}

/* =========================================================
   6. MATERIAL SYMBOLS ICON HELPER
   ========================================================= */
.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal;
  font-style:normal;
  font-size:20px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-feature-settings:'liga';
  font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   7. LAYOUT: MAIN GRID
   ========================================================= */
.site-main-wrap{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--section-gap) var(--margin-mobile);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gutter);
}
@media(min-width:1024px){
  .site-main-wrap{grid-template-columns:repeat(12,1fr);padding:var(--section-gap) 0;}
  .content-area{grid-column:span 9;}
  .widget-area{grid-column:span 3;}
}
.content-area{display:flex;flex-direction:column;gap:var(--section-gap);}
.widget-area{display:flex;flex-direction:column;gap:var(--section-gap);}

/* =========================================================
   8. HERO SECTION
   ========================================================= */
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gutter);
  background:var(--color-surface);
}
@media(min-width:768px){.hero-grid{grid-template-columns:repeat(12,1fr);}}
.hero-main{position:relative;cursor:pointer;overflow:hidden;}
@media(min-width:768px){.hero-main{grid-column:span 8;}}
.hero-main__media{
  position:relative;
  width:100%;
  height:400px;
  background-size:cover;
  background-position:center;
  background-color:var(--color-surface-container-high);
  overflow:hidden;
}
.hero-main__caption{
  position:absolute;left:0;bottom:0;width:100%;
  background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  padding:var(--stack-md);
}
.hero-main__title{
  font-family:var(--font-headline);
  font-size:24px;
  font-weight:700;
  line-height:32px;
  color:#fff;
  transition:color .15s ease;
}
.hero-main:hover .hero-main__title{color:var(--color-secondary-container);}

.hero-list{display:flex;flex-direction:column;gap:var(--stack-md);}
@media(min-width:768px){.hero-list{grid-column:span 4;}}
.hero-list__item{display:flex;gap:var(--stack-sm);align-items:flex-start;cursor:pointer;}
.hero-list__thumb{width:100px;height:75px;object-fit:cover;flex-shrink:0;background:var(--color-surface-container-high);}
.hero-list__title{
  font-size:16px;line-height:24px;color:var(--color-on-surface);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .15s ease;
}
.hero-list__item:hover .hero-list__title{color:var(--color-primary);}
.hero-list__divider{width:100%;height:1px;background:rgba(196,198,208,.3);}

/* =========================================================
   9. SECTION / CATEGORY HEADER
   ========================================================= */
.section-block{display:flex;flex-direction:column;gap:var(--stack-md);}
.section-header{
  border-top:4px solid var(--color-secondary);
  border-bottom:1px solid var(--color-outline-variant);
  padding-top:8px;
  padding-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.section-header__left{display:flex;align-items:center;gap:8px;}
.section-header .material-symbols-outlined{color:var(--color-secondary);}
.section-header--nav{border-top-color:var(--color-primary);}
.section-header--nav .material-symbols-outlined{color:var(--color-primary);}
.section-header--sports{border-top-color:var(--color-sports-accent);}
.section-header--dark{border-top-color:var(--color-secondary);border-bottom-color:rgba(255,255,255,.15);}
.section-title{
  font-family:var(--font-headline);
  font-size:20px;
  font-weight:600;
  line-height:28px;
  color:var(--color-on-surface);
}
.section-header--dark .section-title{color:var(--color-on-tertiary);}
.section-more{
  font-family:var(--font-label);
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--color-tertiary-fixed-dim);
  display:flex;align-items:center;gap:4px;
}
.section-more:hover{color:#fff;}

/* =========================================================
   10. BENTO (Politics / National) GRID
   ========================================================= */
.bento-grid{display:grid;grid-template-columns:1fr;gap:var(--gutter);}
@media(min-width:768px){.bento-grid{grid-template-columns:1fr 1fr;}}
.bento-feature{cursor:pointer;margin-bottom:8px;}
.bento-feature img{width:100%;height:180px;object-fit:cover;margin-bottom:8px;background:var(--color-surface-container-high);}
.bento-feature__title{
  font-family:var(--font-headline);
  font-size:18px;font-weight:600;line-height:24px;
  color:var(--color-on-surface);
  transition:color .15s ease;
}
.bento-feature:hover .bento-feature__title{color:var(--color-secondary);}
.bento-list{display:flex;flex-direction:column;gap:12px;}
.bento-list__item{
  border-bottom:1px solid var(--color-outline-variant);
  padding-bottom:8px;
  cursor:pointer;
}
.bento-list__item a,
.bento-list__item h4{
  font-size:16px;line-height:24px;color:var(--color-on-surface-variant);
  transition:color .15s ease;
}
.bento-list__item:hover a,
.bento-list__item:hover h4{color:var(--color-primary);}

/* =========================================================
   11. SPORTS / CARD GRID (4-up)
   ========================================================= */
.card-grid{display:grid;grid-template-columns:1fr;gap:var(--gutter);}
@media(min-width:640px){.card-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:768px){.card-grid{grid-template-columns:repeat(4,1fr);}}
.news-card{display:flex;flex-direction:column;gap:8px;cursor:pointer;}
.news-card img{width:100%;height:140px;object-fit:cover;background:var(--color-surface-container-high);}
.news-card__title{
  font-size:16px;line-height:24px;font-weight:700;color:var(--color-on-surface);
  transition:color .15s ease;
}
.news-card:hover .news-card__title{color:var(--color-primary);}

/* =========================================================
   12. SIDEBAR / WIDGETS
   ========================================================= */
.ad-slot{
  width:100%;
  background:var(--color-surface-variant);
  border:1px solid var(--color-outline-variant);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-on-surface-variant);
  font-family:var(--font-label);
  font-size:12px;
  text-align:center;
  padding:8px;
}
.ad-slot--md{height:250px;}
.ad-slot--lg{height:400px;}

.widget{margin-bottom:var(--section-gap);}
.widget:last-child{margin-bottom:0;}
.widget-title{
  font-family:var(--font-headline);
  font-size:18px;font-weight:600;
  margin-bottom:var(--stack-md);
  border-top:4px solid var(--color-secondary);
  padding-top:8px;
}

.tab-widget{background:var(--color-surface);border:1px solid var(--color-outline-variant);}
.tab-widget__tabs{display:flex;width:100%;background:var(--color-surface-container-low);border-bottom:1px solid var(--color-outline-variant);}
.tab-widget__tab{
  flex:1;padding:12px;text-align:center;
  font-family:var(--font-label);font-size:14px;font-weight:700;
  color:var(--color-on-surface-variant);background:transparent;border:0;
}
.tab-widget__tab.is-active{background:var(--color-primary);color:var(--color-on-primary);}
.tab-widget__panels{padding:8px;height:400px;overflow-y:auto;}
.tab-widget__panel{display:none;flex-direction:column;gap:8px;}
.tab-widget__panel.is-active{display:flex;}
.tab-list__item{
  display:flex;gap:var(--stack-sm);align-items:center;
  padding:8px 0;border-bottom:1px solid rgba(196,198,208,.3);
  cursor:pointer;
}
.tab-list__item:last-child{border-bottom:0;}
.tab-list__thumb{width:60px;height:45px;object-fit:cover;flex-shrink:0;background:var(--color-surface-container-high);}
.tab-list__title{font-size:14px;line-height:20px;color:var(--color-on-surface);transition:color .15s ease;}
.tab-list__item:hover .tab-list__title{color:var(--color-primary);}

/* generic text widget inside sidebar */
.widget ul{display:flex;flex-direction:column;gap:8px;}
.widget ul li{border-bottom:1px solid var(--color-outline-variant);padding-bottom:8px;font-size:14px;}
.widget select,.widget input[type="text"],.widget input[type="search"]{
  width:100%;border:1px solid var(--color-outline);padding:8px;font-family:var(--font-label);
}

/* =========================================================
   13. VIDEO SECTION (dark)
   ========================================================= */
.video-section{width:100%;background:var(--color-tertiary);padding:var(--section-gap) 0;color:var(--color-on-tertiary);}
.video-section .container{display:flex;flex-direction:column;gap:var(--stack-md);}
.video-card{position:relative;cursor:pointer;}
.video-card__media{position:relative;width:100%;height:160px;overflow:hidden;background:var(--color-tertiary-container);}
.video-card__media img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .15s ease;}
.video-card:hover .video-card__media img{opacity:1;}
.video-card__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.video-card__play .material-symbols-outlined{
  font-size:48px;color:#fff;background:rgba(0,0,0,.5);border-radius:50%;padding:8px;
  transition:background-color .15s ease;
}
.video-card:hover .video-card__play .material-symbols-outlined{background:var(--color-secondary);}
.video-card__title{font-size:16px;line-height:24px;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* =========================================================
   14. FOOTER
   ========================================================= */
.site-footer{
  background:var(--color-tertiary);
  width:100%;
  padding:40px var(--margin-mobile);
  display:flex;flex-direction:column;align-items:center;gap:var(--stack-md);
  border-top:4px solid var(--color-secondary);
  color:var(--color-on-tertiary);
  font-size:14px;line-height:20px;
}
@media(min-width:768px){.site-footer{padding:40px var(--margin-desktop);}}
.footer-columns{
  display:flex;flex-direction:column;justify-content:space-between;width:100%;
  max-width:var(--container-max);gap:var(--section-gap);
  border-bottom:1px solid rgba(116,119,128,.3);
  padding-bottom:var(--section-gap);
}
@media(min-width:768px){.footer-columns{flex-direction:row;}}
.footer-col{display:flex;flex-direction:column;gap:var(--stack-md);width:100%;}
@media(min-width:768px){.footer-col{width:33.3333%;}}
.footer-brand{
  font-family:var(--font-headline);font-size:20px;font-weight:700;color:#fff;
}
.footer-brand .accent{color:var(--color-secondary);}
.footer-about{color:var(--color-tertiary-fixed-dim);line-height:1.6;}
.footer-contact{color:var(--color-tertiary-fixed-dim);display:flex;flex-direction:column;gap:var(--stack-sm);}
.footer-contact strong{color:#fff;}
.footer-apps{align-items:flex-start;}
@media(min-width:768px){.footer-apps{align-items:flex-end;}}
.footer-apps h4{color:#fff;font-weight:700;}
.app-buttons{display:flex;gap:8px;flex-wrap:wrap;}
.app-btn{
  background:#000;border:1px solid var(--color-outline-variant);border-radius:4px;
  padding:8px 16px;display:flex;align-items:center;gap:8px;color:#fff;
}
.app-btn:hover{background:#1a1a1a;}
.app-btn .app-btn__label{text-align:left;}
.app-btn small{display:block;font-size:10px;line-height:1;text-transform:uppercase;}
.app-btn strong{display:block;font-size:14px;line-height:1.3;}

.footer-links{
  display:flex;flex-direction:column;align-items:center;gap:var(--stack-sm);
  width:100%;max-width:var(--container-max);
  font-family:var(--font-label);font-size:12px;color:var(--color-tertiary-fixed-dim);
}
.footer-nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}
.footer-nav a:hover{text-decoration:underline;color:var(--color-secondary);}
.footer-copyright{text-align:center;}

/* =========================================================
   15. SINGLE / PAGE / ARCHIVE CONTENT
   ========================================================= */
.entry-header{margin-bottom:var(--stack-md);}
.entry-title{
  font-family:var(--font-headline);font-weight:700;
  font-size:28px;line-height:1.3;color:var(--color-on-surface);
  margin-bottom:8px;
}
.entry-meta{
  font-family:var(--font-label);font-size:12px;color:var(--color-on-surface-variant);
  display:flex;gap:12px;flex-wrap:wrap;
}
.entry-thumbnail{margin-bottom:var(--stack-md);}
.entry-thumbnail img{width:100%;height:auto;}
.entry-content{font-size:17px;line-height:1.8;color:var(--color-on-surface);}
.entry-content p{margin-bottom:1.2em;}
.entry-content h2,.entry-content h3{font-family:var(--font-headline);margin:1.4em 0 .6em;}
.entry-content img{margin:1em 0;}
.entry-content a{color:var(--color-primary);text-decoration:underline;}
.entry-content blockquote{
  border-left:4px solid var(--color-secondary);padding-left:16px;
  font-style:italic;color:var(--color-on-surface-variant);margin:1.5em 0;
}
.entry-tags{margin-top:var(--stack-md);display:flex;gap:8px;flex-wrap:wrap;font-size:13px;}
.entry-tags a{background:var(--color-surface-container-low);padding:4px 10px;border:1px solid var(--color-outline-variant);}
.post-navigation{display:flex;justify-content:space-between;gap:16px;margin-top:var(--section-gap);padding-top:var(--stack-md);border-top:1px solid var(--color-outline-variant);font-size:14px;}
.post-navigation a{color:var(--color-primary);font-weight:600;}

.archive-header,.page-header{margin-bottom:var(--section-gap);border-top:4px solid var(--color-secondary);padding-top:8px;}
.archive-title,.page-title{font-family:var(--font-headline);font-size:24px;font-weight:700;}
.archive-description{color:var(--color-on-surface-variant);margin-top:4px;}

.pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--section-gap);}
.pagination a,.pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;
  border:1px solid var(--color-outline-variant);
  font-family:var(--font-label);font-size:14px;
}
.pagination .current{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary);}
.pagination a:hover{background:var(--color-surface-container-low);}

.comments-area{margin-top:var(--section-gap);padding-top:var(--section-gap);border-top:1px solid var(--color-outline-variant);}
.comment-list{list-style:none;margin:0 0 var(--stack-md);padding:0;}
.comment-list .children{list-style:none;margin-left:32px;padding:0;}
.comment-body{padding:var(--stack-md) 0;border-bottom:1px solid var(--color-outline-variant);}
.comment-author{font-weight:700;font-size:14px;}
.comment-meta a{color:var(--color-on-surface-variant);font-size:12px;}
.comment-form input,.comment-form textarea{
  width:100%;border:1px solid var(--color-outline);padding:10px;font-family:var(--font-body);margin-bottom:12px;
}
.comment-form .submit,
.search-form button,
.btn,
button.btn-primary,
input#submit,
input[type="submit"]{
  background:var(--color-primary);color:var(--color-on-primary);border:0;
  padding:10px 24px;font-family:var(--font-label);font-weight:600;letter-spacing:.03em;
  border-radius:0;
}
.comment-form .submit:hover,.btn:hover,input#submit:hover{background:var(--color-secondary);}

/* =========================================================
   15b. SHARE BUTTONS / RELATED POSTS / INFINITE SCROLL
   ========================================================= */
.share-buttons{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:var(--section-gap);padding-top:var(--stack-md);
  border-top:1px solid var(--color-outline-variant);
}
.share-buttons__label{
  font-family:var(--font-label);font-size:13px;font-weight:600;
  color:var(--color-on-surface-variant);margin-right:4px;
}
.share-buttons__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  background:var(--color-surface-container-low);
  border:1px solid var(--color-outline-variant);
  color:var(--color-on-surface-variant);
  transition:background-color .15s ease,color .15s ease;
}
.share-buttons__icon:hover{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary);}
.share-buttons__icon--facebook:hover{background:#1877f2;border-color:#1877f2;color:#fff;}
.share-buttons__icon--twitter:hover{background:#000;border-color:#000;color:#fff;}
.share-buttons__icon--whatsapp:hover{background:#25d366;border-color:#25d366;color:#fff;}
.share-buttons__icon--linkedin:hover{background:#0a66c2;border-color:#0a66c2;color:#fff;}
.share-buttons__copy{cursor:pointer;font-family:inherit;}
.share-buttons__copy.is-copied{background:var(--color-secondary);border-color:var(--color-secondary);color:#fff;}

.related-posts{margin-top:var(--section-gap);}
.card-grid--3{grid-template-columns:1fr;}
@media(min-width:640px){.card-grid--3{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.card-grid--3{grid-template-columns:repeat(3,1fr);}}

.infinite-scroll{margin-top:var(--section-gap);}
.infinite-scroll__status{
  text-align:center;font-family:var(--font-label);font-size:13px;
  color:var(--color-on-surface-variant);padding:var(--stack-md) 0;
}
.infinite-scroll__sentinel{height:1px;}
.infinite-scroll__divider{
  border:0;border-top:4px double var(--color-outline-variant);
  margin:var(--section-gap) 0;
}
.entry-article-inline{margin-top:var(--stack-md);}
.entry-article-inline .entry-title a{color:inherit;text-decoration:none;}
.entry-article-inline .entry-title a:hover{color:var(--color-primary);}

/* =========================================================
   16. 404 / SEARCH
   ========================================================= */
.error-404{text-align:center;padding:80px var(--margin-mobile);}
.error-404 h1{font-family:var(--font-headline);font-size:64px;color:var(--color-secondary);}
.search-form{display:flex;gap:8px;max-width:480px;}
.search-form input[type="search"]{flex:1;border:1px solid var(--color-outline);padding:10px;}

/* =========================================================
   17. UTILITIES
   ========================================================= */
.full-bleed{width:100%;}
.text-center{text-align:center;}
.hidden{display:none;}
@media(max-width:767px){.hide-mobile{display:none;}}
@media(min-width:768px){.hide-desktop{display:none;}}