/*
Theme Name: SSF Poonima
Theme URI: https://shilpasayura.org/
Author: Shilpa Sayura Foundation
Description: A lightweight editorial WordPress theme for SSF/Poonima sites. Built from scratch for modern WordPress and PHP 8.3+, inspired only by classic magazine-style layouts.
Version: 1.0.1
Requires at least: 6.6
Requires PHP: 8.1
Tested up to: 7.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ssf_poonima
Tags: blog, news, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, wide-blocks
*/

:root {
  --ssf-bg: #ffffff;
  --ssf-surface: #f6f7f8;
  --ssf-text: #25282d;
  --ssf-muted: #717780;
  --ssf-border: #e5e7ea;
  --ssf-accent: #2f343a;
  --ssf-max: 1180px;
  --ssf-radius: 2px;
  --ssf-shadow: 0 10px 30px rgba(26, 31, 36, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ssf-bg);
  color: var(--ssf-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:hover { color: #000; }
button, input, textarea, select { font: inherit; }
.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;
}
.screen-reader-text:focus { position: fixed !important; width: auto; height: auto; top: 10px; left: 10px; padding: 10px 14px; background: #fff; z-index: 99999; clip: auto; }

.ssf-container { width: min(calc(100% - 36px), var(--ssf-max)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--ssf-border); background: #fff; }
.site-topbar { border-bottom: 1px solid var(--ssf-border); font-size: 13px; color: var(--ssf-muted); }
.site-topbar .ssf-container { min-height: 42px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.top-menu, .primary-menu, .footer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 22px; }
.top-menu a, .primary-menu a, .footer-menu a { text-decoration: none; }
.branding { padding: 36px 0 30px; text-align: center; }
.custom-logo { max-height: 100px; width: auto; }
.site-title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 5vw, 54px); line-height: 1.1; font-weight: 500; }
.site-title a { text-decoration: none; }
.site-description { margin: 10px 0 0; color: #a0a4aa; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.primary-nav { border-top: 1px solid var(--ssf-border); }
.primary-nav .ssf-container { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.primary-menu { gap: 30px; font-size: 14px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; }
.primary-menu li { position: relative; }
.primary-menu .sub-menu { display: none; position: absolute; z-index: 20; top: 100%; left: 0; min-width: 210px; margin: 0; padding: 10px 0; list-style: none; background: #fff; border: 1px solid var(--ssf-border); box-shadow: var(--ssf-shadow); }
.primary-menu li:hover > .sub-menu, .primary-menu li:focus-within > .sub-menu { display: block; }
.primary-menu .sub-menu a { display: block; padding: 8px 16px; text-transform: none; font-weight: 500; }
.menu-toggle { display: none; padding: 8px 12px; border: 1px solid var(--ssf-border); background: #fff; }
.header-search { margin-left: auto; }
.search-form { display: flex; gap: 8px; }
.search-field { min-width: 0; width: 180px; padding: 8px 10px; border: 1px solid var(--ssf-border); background: #fff; }
.search-submit { padding: 8px 12px; color: #fff; background: var(--ssf-accent); border: 1px solid var(--ssf-accent); cursor: pointer; }

.ssf-hero { margin: 30px auto 34px; background: var(--ssf-surface); box-shadow: var(--ssf-shadow); }
.ssf-hero__link { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr); text-decoration: none; }
.ssf-hero__media { min-height: 420px; background: #eceff1; }
.ssf-hero__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }
.ssf-hero__content { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: clamp(28px, 5vw, 58px); }
.ssf-kicker { margin-bottom: 15px; color: var(--ssf-muted); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
.ssf-hero__title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(29px, 4vw, 42px); line-height: 1.12; font-weight: 500; }
.ssf-meta { margin-top: 17px; color: #989da4; font-size: 13px; }
.ssf-button { display: inline-block; align-self: center; margin-top: 25px; padding: 10px 21px; background: var(--ssf-accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }

.site-content { padding: 0 0 52px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 48px; align-items: start; }
.section-title { margin: 0 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--ssf-text); font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
.posts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
.post-card { min-width: 0; }
.post-card__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ssf-surface); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.post-card__thumb:hover img { transform: scale(1.02); }
.post-card__title { margin: 14px 0 7px; font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1.25; font-weight: 500; }
.post-card__title a { text-decoration: none; }
.post-card__excerpt { color: #5f646c; font-size: 15px; }
.post-card .ssf-meta { margin-top: 0; }

.sidebar { min-width: 0; }
.widget { margin-bottom: 34px; }
.widget-title { margin: 0 0 15px; padding-bottom: 8px; border-bottom: 2px solid var(--ssf-text); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li { padding: 8px 0; border-bottom: 1px solid var(--ssf-border); }

.entry-header { max-width: 830px; margin: 38px auto 26px; text-align: center; }
.entry-title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 6vw, 54px); line-height: 1.12; font-weight: 500; }
.entry-thumbnail { margin: 0 auto 30px; }
.entry-thumbnail img { width: 100%; max-height: 620px; object-fit: cover; display: block; }
.entry-content { font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.entry-content > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: 1050px; }
.entry-content > .alignfull { max-width: none; }
.entry-content h2, .entry-content h3, .entry-content h4 { line-height: 1.25; }
.entry-content a { color: #164f79; }
.entry-footer { max-width: 780px; margin: 28px auto; color: var(--ssf-muted); font-size: 14px; }

.pagination, .nav-links { margin-top: 38px; display: flex; gap: 8px; flex-wrap: wrap; }
.page-numbers, .post-page-numbers { display: inline-block; padding: 7px 11px; border: 1px solid var(--ssf-border); text-decoration: none; }
.page-numbers.current { background: var(--ssf-accent); color: #fff; border-color: var(--ssf-accent); }
.comments-area { max-width: 780px; margin: 38px auto; }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 20px 0; border-bottom: 1px solid var(--ssf-border); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 10px; border: 1px solid var(--ssf-border); }
.comment-form .submit { padding: 10px 18px; border: 0; background: var(--ssf-accent); color: #fff; }

.site-footer { margin-top: 40px; padding: 34px 0; background: #f7f7f7; border-top: 1px solid var(--ssf-border); color: #686e75; font-size: 14px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .ssf-hero__link { grid-template-columns: 1fr; }
  .ssf-hero__media, .ssf-hero__media img { min-height: 320px; }
  .content-grid { grid-template-columns: 1fr; }
  .sidebar { border-top: 1px solid var(--ssf-border); padding-top: 28px; }
  .menu-toggle { display: inline-block; }
  .primary-menu-wrap { display: none; width: 100%; }
  .primary-menu-wrap.is-open { display: block; }
  .primary-nav .ssf-container { flex-wrap: wrap; padding-block: 10px; }
  .primary-menu { flex-direction: column; gap: 0; padding: 8px 0; }
  .primary-menu > li > a { display: block; padding: 9px 0; }
  .primary-menu .sub-menu { position: static; display: block; border: 0; box-shadow: none; padding-left: 15px; }
}

@media (max-width: 640px) {
  .ssf-container { width: min(calc(100% - 20px), var(--ssf-max)); }
  .site-topbar { display: none; }
  .branding { padding: 26px 0 22px; }
  .header-search { width: 100%; }
  .header-search .search-field { width: 100%; }
  .posts-grid { grid-template-columns: 1fr; }
  .ssf-hero { margin-top: 18px; }
  .ssf-hero__media, .ssf-hero__media img { min-height: 230px; }
  .ssf-hero__content { padding: 28px 20px; }
}


/* SSF Poonima 1.0.1 — persistent header/footer navigation */
.site-branding-wrap { display: flex; flex-direction: column; align-items: center; }
.site-logo { margin-bottom: 14px; }
.nav-row { position: relative; }
.primary-menu-wrap { flex: 1 1 auto; min-width: 0; }
.primary-menu { justify-content: center; }
.footer-branding { text-align: center; }
.footer-title { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1.2; }
.footer-title a { text-decoration: none; }
.footer-navigation { margin: 0 0 24px; }
.footer-menu { justify-content: center; gap: 12px 24px; font-size: 13px; }
.footer-meta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; color: #8a8f96; font-size: 12px; }

@media (max-width: 1100px) {
  .primary-menu { gap: 18px; font-size: 12px; }
}

@media (max-width: 900px) {
  .primary-menu { align-items: stretch; }
  .primary-menu-wrap { flex-basis: 100%; order: 3; }
  .header-search { margin-left: auto; }
  .footer-menu { flex-direction: column; align-items: center; gap: 8px; }
}