/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://technoape.tech
 Description:  Child theme for GeneratePress, matched to Techno Ape / ApeOS brand (colors, fonts, header, footer)
 Author:       Techno Ape
 Author URI:   https://technoape.tech
 Template:     generatepress
 Version:      1.0.0
*/

/* ============ BRAND VARIABLES — copied exactly from technoape.tech ============ */
:root{
  --ink:#1B211F;
  --ink-soft:#565F5C;
  --paper:#FBFAF6;
  --paper-2:#F3EFE4;
  --white:#FFFFFF;
  --muted:#63697A;
  --accent:#107A10;
  --accent-light:#3FAE3F;
  --accent-bg:#E3F3E3;
  --line:#E7E2D3;
  --footer-bg:#1B211F; /* footer stays this fixed dark shade in both themes — decoupled from --ink so --ink can flip for dark mode text without breaking the footer */
  --radius:14px;
  --shadow-lg:0 24px 50px -24px rgba(22,35,63,0.18);
  --shadow-sm:0 10px 26px -16px rgba(22,35,63,0.14);
  --blog-width:1080px; /* <-- change THIS to widen or narrow the blog listing + sidebar. Try 1000px, 1100px, etc. (increased 20% from 900px) */
}

/* ============ BASE TYPOGRAPHY — matches homepage exactly ============ */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--paper) !important;
  color:var(--ink-soft) !important;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Fraunces',serif;
  font-weight:600;
  line-height:1.14;
  margin:0 0 .5em;
  color:var(--ink);
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

.container{ max-width:1180px; margin:0 auto; padding:0 28px; }

/* Buttons — same style as homepage CTAs, for use inside blog posts if needed */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:15.5px;
  padding:16px 28px;border-radius:9px;border:none;cursor:pointer;
  text-decoration:none;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 12px 26px -12px rgba(16,122,16,0.5); }

/* ============ SITE HEADER — exact copy from technoape.tech ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(16,122,16,0.95);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.15);
  transition:background .3s ease, border-color .3s ease;
}
.site-header.is-scrolled{
  background:rgba(16,122,16,0.95);border-bottom-color:rgba(255,255,255,0.15);
}
.site-header-row{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1180px;margin:0 auto;padding:16px 28px;
}
.site-logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;
  font-family:'Fraunces',serif;font-weight:600;font-size:18px;transition:color .3s ease;
}
.site-logo svg{ height:22px;width:auto;display:block; }
.site-logo img{ height:32px;width:auto;display:block; }
.site-nav-links{ display:flex;gap:30px;align-items:center; }
.site-nav-links a{ color:rgba(255,255,255,0.78);text-decoration:none;font-size:14px;font-weight:500;transition:color .3s ease; }
.site-nav-links a:hover{ color:#fff; }
.site-header-cta{ display:flex;align-items:center;gap:16px; }
.nav-toggle{ display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer; }
@media (max-width:900px){
  .site-nav-links{ display:none; }
  .nav-toggle{ display:block; }
}
/* leave body room for the fixed header on blog pages */
body{ padding-top:74px; }

/* ============ FOOTER — exact copy from technoape.tech ============ */
footer.site-footer{ background:var(--footer-bg);color:rgba(255,255,255,0.55);padding:64px 0 28px;font-size:14px; }
.footer-grid{ display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-logo{ display:flex;align-items:center;gap:10px;color:#fff;font-family:'Fraunces',serif;font-weight:600;font-size:19px;text-decoration:none;margin-bottom:14px; }
.footer-logo svg,.footer-logo img{ height:22px;width:auto; }
.site-footer p{ color:rgba(255,255,255,0.5);font-size:13.5px;max-width:280px; }
.site-footer h4{ color:#fff;font-family:'Inter',sans-serif;font-size:14px;font-weight:700;margin-bottom:16px; }
.site-footer ul{ list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px; }
.site-footer a{ color:rgba(255,255,255,0.55);text-decoration:none; }
.site-footer a:hover{ color:var(--accent-light); }
.footer-address{ display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:rgba(255,255,255,0.55);line-height:1.5; }
.footer-address svg{ flex-shrink:0;margin-top:2px;color:var(--accent-light); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:rgba(255,255,255,0.35); }

/* ============ FLOATING WHATSAPP BUTTON — exact copy from technoape.tech, with an explicit
   fixed square so GeneratePress's own anchor/box-sizing rules can't distort it into an oval ============ */
/* Floating WhatsApp button: round, pulsing halo, expands to a pill on hover */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:9999;display:flex;align-items:center;gap:0;box-sizing:content-box;padding:14px;border-radius:50%;background:#25D366;color:#fff !important;text-decoration:none !important;white-space:nowrap;box-shadow:0 14px 28px -10px rgba(0,0,0,.35);transition:padding .22s ease,border-radius .22s ease,transform .18s ease,box-shadow .18s ease;}
.wa-float svg{width:26px;height:26px;flex-shrink:0;}
.wa-float .wa-float-label{max-width:0;opacity:0;overflow:hidden;font-family:'Inter',sans-serif;font-weight:700;font-size:14.5px;transition:max-width .22s ease,opacity .18s ease,margin-left .22s ease;}
.wa-float:hover{border-radius:30px;padding:14px 20px 14px 14px;transform:translateY(-2px);box-shadow:0 18px 34px -8px rgba(0,0,0,.4);}
.wa-float:hover .wa-float-label{max-width:220px;opacity:1;margin-left:10px;}
.wa-float-pulse{position:absolute;inset:0;border-radius:50%;background:#25D366;animation:waPulse 2.4s ease-out infinite;z-index:-1;pointer-events:none;}
.wa-float:hover .wa-float-pulse{display:none;}
@keyframes waPulse{0%{transform:scale(1);opacity:.55;}100%{transform:scale(1.9);opacity:0;}}
@media (max-width:640px){.wa-float{right:16px;bottom:16px;}.wa-float:hover{padding:14px;border-radius:50%;}.wa-float:hover .wa-float-label{max-width:0;opacity:0;margin-left:0;}}
@media (prefers-reduced-motion:reduce){.wa-float-pulse{animation:none;display:none;}}

/* ============ BLOG-SPECIFIC READABILITY (new — not on homepage) ============ */
.blog-content{ max-width:760px;margin:0 auto;padding:120px 28px 80px; }
.blog-content img{ border-radius:var(--radius);margin:1.5em 0; }
.blog-content h2{ margin-top:1.4em; }
.blog-content blockquote{
  border-left:3px solid var(--accent);margin:1.5em 0;padding:0.2em 1.2em;
  color:var(--ink-soft);font-style:italic;
}
.blog-content pre,code{ background:var(--paper-2);border-radius:6px; }
.blog-content pre{ padding:16px;overflow-x:auto; }

/* ============ BLOG ARCHIVE / LISTING PAGE — contains the post loop no matter
   what GeneratePress's own Customizer container setting is doing, and turns
   each post into a branded card ============ */

/* Force the whole content area into a contained, centered column */
.site-content,
#content,
.site-content .container,
#primary,
#main{
  max-width:var(--blog-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:28px !important;
  padding-right:28px !important;
  padding-top:28px !important;
  box-sizing:border-box;
  width:100% !important;
  float:none !important;
  background:var(--paper) !important;
}

/* GeneratePress normally lays #primary and #secondary side-by-side as flex
   columns (sidebar = a narrow fraction of the container). Force them to
   stack full-width instead, so the sidebar matches the post cards' width. */
.site-content .container{
  display:block !important;
}
#primary,
#secondary{
  width:100% !important;
  flex:none !important;
}

/* Post cards — targets both classic (.hentry/article.post) and block-theme markup */
article.type-post,
.blog article,
#main article{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 32px;
  margin-bottom:28px;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
article.type-post:hover,
#main article:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
}

/* Featured image — full-bleed inside the card, rounded top corners only */
article.type-post > a > img,
article.type-post .post-image img,
#main article img{
  width:100%;height:auto;object-fit:cover;
  border-radius:var(--radius) var(--radius) 0 0;
  margin:-28px -32px 20px;
  max-width:calc(100% + 64px);
}

/* Titles — Fraunces, matches homepage headings */
article.type-post .entry-title,
#main article .entry-title,
#main article h2{
  font-family:'Fraunces',serif;
  font-size:26px;
  font-weight:600;
  margin-bottom:8px;
}
article.type-post .entry-title a,
#main article .entry-title a{
  color:var(--ink);
  text-decoration:none;
}
article.type-post .entry-title a:hover{ color:var(--accent); }

/* Meta line — date/author/categories */
article.type-post .entry-meta,
#main article .entry-meta{
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:var(--muted);
  margin-bottom:14px;
}
article.type-post .entry-meta a{ color:var(--muted);text-decoration:none; }
article.type-post .entry-meta a:hover{ color:var(--accent); }

/* Excerpt text */
article.type-post .entry-summary,
article.type-post .entry-content,
#main article .entry-summary,
#main article .entry-content{
  font-family:'Inter',sans-serif;
  font-size:15.5px;
  color:var(--ink-soft);
  line-height:1.65;
}

/* Sidebar (Search / Recent Posts / Recent Comments widgets) — de-emphasized, sits below on mobile */
#secondary,
.widget-area{
  max-width:var(--blog-width);margin:0 auto 60px;padding:0 28px;
}
#secondary .widget,
.widget-area .widget{
  background:var(--paper-2);
  border-radius:var(--radius);
  padding:28px 32px;      /* matches article.type-post exactly */
  margin-bottom:20px;
}
#secondary .widget h2,
#secondary .widget-title,
.widget-area .widget-title{
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--muted);
  margin-bottom:12px;
}

/* ============ MOBILE — tighten outer padding so post cards fill most of the
   screen width while keeping their own rounded-corner boxed look ============ */
@media (max-width:600px){
  .site-content,
  #content,
  .site-content .container,
  #primary,
  #main{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  #secondary,
  .widget-area{
    padding-left:10px;
    padding-right:10px;
  }
  article.type-post,
  .blog article,
  #main article{
    padding:20px 20px;         /* less internal padding so text has more room too */
    border-radius:12px;        /* slightly tighter corners look better at narrow widths */
  }
  #secondary .widget,
  .widget-area .widget{
    padding:20px 20px;         /* matches article cards on mobile */
    border-radius:12px;
  }
  article.type-post .entry-title,
  #main article .entry-title,
  #main article h2{
    font-size:21px;            /* homepage-scale headings are too large for narrow mobile cards */
  }
}
/* Smaller Recent Posts / Recent Comments widgets */

/* Widget headings */
.widget-title,
.sidebar .widget .widget-title,
.footer-widgets .widget-title,
.widget .wp-block-heading,
.wp-block-group > h2.wp-block-heading {
  font-size: 18px !important;
  line-height: 1.3;
}

/* Widget list items and links */
.widget_recent_entries li,
.widget_recent_entries a,
.widget_recent_comments li,
.widget_recent_comments a,
.wp-block-latest-posts li,
.wp-block-latest-posts a,
.wp-block-latest-comments li,
.wp-block-latest-comments a {
  font-size: 14px !important;
  line-height: 1.5;
}

/* Post dates and comment meta */
.widget_recent_entries .post-date,
.wp-block-latest-posts__post-date,
.wp-block-latest-comments__comment-meta {
  font-size: 12px !important;
}

/* Hide Recent Comments for now */
.widget_recent_comments,
.widget_block:has(.wp-block-latest-comments),
.wp-block-group:has(> .wp-block-latest-comments) {
  display: none !important;
}

/* Post column stays stacked and unchanged */
@media (min-width: 769px) {
  .site-content {
    flex-direction: column !important;
  }

  .content-area {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    float: none !important;
  }
}

/* ============ SIDEBAR WIDTH = POST CARD WIDTH (desktop + mobile) ============
   The post cards sit inside nested containers that each add side padding, so
   they end up narrower than the page container. The sidebar sits outside those
   containers, so it gets the same total inset here instead.
   If the sidebar is still a few px off from the cards, change ONLY these two
   numbers: --card-inset is the space on each side of the cards. */
:root{ --card-inset:56px; }
@media (max-width:600px){ :root{ --card-inset:20px; } }

.widget-area,
#secondary,
#right-sidebar,
#left-sidebar,
.is-right-sidebar,
.is-left-sidebar{
  width:100% !important;
  max-width:var(--blog-width) !important;
  margin:0 auto 60px !important;
  padding:0 var(--card-inset) !important;
  box-sizing:border-box !important;
  float:none !important;
  flex:none !important;
}

.widget-area .inside-right-sidebar,
.widget-area .inside-left-sidebar{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

.widget-area .widget,
#secondary .widget{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box;
}

/* Stop block widgets (Recent Posts) from being centred/indented inside the box */
.widget-area .widget > *,
.widget-area .wp-block-group__inner-container > *,
.widget-area .is-layout-constrained > *{
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}



/* ============ SIDEBAR: Recent Posts first, Search bar below it; hide the "Search" label ============ */
.widget-area .inside-right-sidebar,
.widget-area .inside-left-sidebar,
#secondary{
  display:flex !important;
  flex-direction:column !important;
}
.widget-area .widget{ order:1; }
.widget-area .widget_search,
.widget-area .widget:has(.wp-block-search),
.widget-area .widget_block:has(.wp-block-search){ order:2; }

/* Hide the word "Search" above the bar (the button already says it) */
.wp-block-search__label,
.widget_search .widget-title,
.widget_search label:not(.screen-reader-text) > span:first-child{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}