/*
Theme Name: BalconyHaven (Optimized)
Theme URI: https://balconyhaven.com
Author: Isaac / Jolyti
Description: Clean two-column blog theme with a calm Green palette (centralized colors).
Version: 1.0.0
License: GPLv2 or later
Text Domain: balconyhaven
*/

/* =========================================================
   1) THEME TOKENS — EDIT COLORS HERE
   ========================================================= */
:root{
  /* Brand / Hero */
  --brand-bg:#0F2A44;            /* deep navy */
  --brand-title:#FFFFFF;
  --brand-tagline:#D6E3F1;       /* soft warm blue */

  /* Navigation */
  --nav-bg:#F3F6FA;              /* warm off-white */
  --nav-link:#1C2E40;
  --nav-link-hover:#3E6EA8;      /* muted royal blue */

  /* Page */
  --page-bg:#FBFCFE;
  --page-text:#1C2E40;
  --text-muted:#6C7C8F;

  /* Surfaces */
  --card-bg:#FFFFFF;
  --surface:#F1F5FA;

  /* Borders & shadows */
  --border:#E0E6EF;
  --border-strong:#CAD6E5;
  --shadow:0 12px 28px rgba(15,42,68,0.14);

  /* Buttons / CTAs */
  --btn-bg:#3E6EA8;              /* warm navy-blue */
  --btn-text:#FFFFFF;
  --btn-hover-bg:#2C5588;
  --btn-hover-text:#FFFFFF;

  /* Sidebar */
  --side-head-bg:#F1F5FA;
  --side-head-text:#1C2E40;

  /* Footer */
  --footer-link-hover:#8FB3E6;   /* soft highlight blue */

  /* Radius */
  --radius:14px;
  --radius-pill:999px;

  /* Whites / overlays */
  --white-75:#FFFFFFBF;
  --white-14:#FFFFFF24;
  --white-12:#FFFFFF1F;
}


/* =========================================================
   2) BASE
   ========================================================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;
  background:var(--page-bg);
  color:var(--page-text);
  line-height:1.65;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--nav-link-hover); text-decoration:none; }
a:hover{ color:var(--btn-hover-bg); }

.container{ width:min(1100px,92%); margin:0 auto; }
.site-content,.main-col,.entry-content{ overflow:visible; min-width:0; }

/* Elementor full width */
body.elementor-page .site-content .container,
body.elementor-page .site-content .grid,
body.elementor-page .site-content .main-col{
  width:100% !important;
  max-width:none !important;
}

/* Gutenberg wide/full */
.alignfull{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.alignwide{
  width:min(1200px,96%);
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   3) TOPBAR (optional)
   ========================================================= */
.topbar{
  background:var(--brand-bg);
  color:var(--brand-title);
  font-size:13px;
}
.topbar-inner{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
}
.topbar a{ color:var(--brand-title); }
.topbar a:hover{ color:var(--footer-link-hover); }

.topbar-links{ display:flex; gap:14px; flex-wrap:wrap; }
.topbar-icons{ display:flex; gap:10px; align-items:center; }

.icon-pill{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-pill);
  background:var(--white-12);
  border:1px solid var(--white-14);
}

/* =========================================================
   4) HEADER + NAV
   ========================================================= */
.site-header.site-header--solid{
  background:linear-gradient(
    to bottom,
    var(--brand-bg) 0%,
    var(--brand-bg) 68%,
    var(--nav-bg) 68%,
    var(--nav-bg) 100%
  );
  border-bottom:1px solid var(--border);
}

.site-header.site-header--solid .branding{
  padding:36px 0 18px;
  text-align:center;
}

.site-header .site-title{
  margin:0;
  font-size:clamp(40px,4.2vw,56px);
  line-height:1.05;
  letter-spacing:.3px;
}
.site-header .site-title a{ color:var(--brand-title); }

.site-header .site-description{
  margin:10px 0 0;
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--brand-tagline);
}

.main-nav{
  background:var(--nav-bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.main-nav .nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.main-nav .menu,
.main-nav ul.menu{
  margin:0;
  padding:12px 0;
  list-style:none;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.main-nav a{
  color:var(--nav-link);
  display:inline-block;
  padding:8px 12px;
}
.main-nav a:hover{ color:var(--nav-link-hover); }

.main-nav .current-menu-item > a,
.main-nav .current_page_item > a{
  color:var(--nav-link-hover);
}

/* Nav search */
.nav-search{ position:relative; display:flex; align-items:center; }

.nav-search-btn{
  background:transparent;
  border:0;
  padding:8px 10px;
  cursor:pointer;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--nav-link);
}
.nav-search-btn:hover{ color:var(--nav-link-hover); }
.nav-search-btn img{ width:18px; height:18px; display:block; }

/* Search panel uses [hidden] (toggled by JS) */
.nav-search-panel[hidden]{ display:none; }
.nav-search-panel:not([hidden]){
  display:block;
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:min(320px,80vw);
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
  z-index:9999;
}
.nav-search-panel input[type="search"]{ width:100%; margin:0; }
.nav-search-panel .search-submit{ margin-top:10px; }

/* =========================================================
   5) LAYOUT
   ========================================================= */
.site-content{ padding:34px 0 40px; }

.grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:26px;
}
@media (max-width:920px){
  .grid{ grid-template-columns:1fr; }
}

/* =========================================================
   6) POSTS (cards)
   ========================================================= */
.post-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:grid;
  grid-template-columns:260px 1fr;
  margin-bottom:22px;
  position:relative;
}
@media (max-width:720px){
  .post-card{ grid-template-columns:1fr; }
}

.post-thumb{
  background:var(--surface);
  min-height:190px;
  overflow:hidden;
  position:relative;
  z-index:1;
}
.post-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.post-body{ padding:18px 18px 20px; position:relative; z-index:1; }

.post-title{ margin:0 0 8px; font-size:22px; line-height:1.25; }
.post-excerpt{ margin:0 0 14px; color:var(--text-muted); }
.post-meta{ font-size:12px; color:var(--text-muted); margin:0 0 10px; }

/* Single post/page typography */
.post-content h1,.post-content h2,.post-content h3{ line-height:1.25; margin:18px 0 10px; }
.post-content p{ margin:0 0 14px; color:var(--page-text); }
.post-content a{ color:var(--nav-link-hover); text-decoration:underline; text-underline-offset:3px; }
.post-content a:hover{ color:var(--btn-hover-bg); }

/* =========================================================
   7) BUTTONS + FORM INPUTS
   ========================================================= */
.btn,
.button,
.wp-block-button__link,
.search-submit,
.wpcf7 input.wpcf7-submit,
.wpcf7 button.wpcf7-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:10px;
  background:var(--btn-bg);
  color:var(--btn-text);
  font-size:15px;
  font-weight:600;
  letter-spacing:.2px;
  border:none;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.btn:hover,
.button:hover,
.wp-block-button__link:hover,
.search-submit:hover,
.wpcf7 input.wpcf7-submit:hover,
.wpcf7 button.wpcf7-submit:hover{
  background:var(--btn-hover-bg);
  color:var(--btn-hover-text);
  transform:translateY(-1px);
}

input[type="search"],input[type="text"],input[type="email"]{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
}
button,input[type="submit"]{ cursor:pointer; }

/* =========================================================
   8) SIDEBAR WIDGETS + CUSTOM ABOUT/DISCLAIMER
   ========================================================= */
.widget{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:18px;
  color:var(--page-text);
}

.widget-title{
  margin:0 0 12px;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-muted);
}

.sidebar .widget-title--bar{
  background:var(--side-head-bg);
  color:var(--side-head-text);
  text-align:center;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:1.2px;
  padding:14px 12px;
  margin:-16px -16px 16px;
  border-radius:var(--radius) var(--radius) 0 0;
}

.sidebar-card{ background:transparent; border:0; padding:0; }

.sidebar-avatar{ display:flex; justify-content:center; margin:6px 0 14px; }
.sidebar-avatar img{
  width:140px;
  height:140px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid var(--btn-bg);
}

.sidebar-text{ margin:0 0 12px; font-size:14px; line-height:1.65; color:var(--page-text); }
.widget_about_custom .sidebar-text{ text-align:center; }
.widget_disclaimer_custom .sidebar-text{ text-align:left; color:var(--text-muted); font-size:13.5px; line-height:1.7; }

.sidebar-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:220px;
  height:52px;
  margin:16px auto 0;
  background:var(--btn-bg);
  color:var(--btn-text);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  border-radius:10px;
}
.sidebar-cta:hover{ background:var(--btn-hover-bg); color:var(--btn-hover-text); }

/* Recent posts mini */
.recent-posts-mini{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.recent-posts-mini__link{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:12px;
  align-items:center;
}
.recent-posts-mini__thumb img{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:10px;
}
.recent-posts-mini__thumb--fallback{
  width:54px;
  height:54px;
  border-radius:10px;
  background:var(--surface);
  display:block;
}
.recent-posts-mini__title{
  font-size:14px;
  line-height:1.25;
  color:var(--page-text);
}
.recent-posts-mini__link:hover .recent-posts-mini__title{ color:var(--nav-link-hover); }

/* =========================================================
   9) PAGINATION — Warm + Disabled states + Dots styling
   ========================================================= */
.navigation.pagination,
.pagination,
.pagination-split{ margin:40px 0; }

/* Layout (WP default) */
.navigation.pagination .nav-links,
.pagination .nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
}

/* Base pills (numbers + prev/next) */
.navigation.pagination .page-numbers,
.pagination .page-numbers,
.pagination-split .page-numbers,
.navigation.pagination .prev,
.navigation.pagination .next,
.pagination .prev,
.pagination .next,
.pagination-split__prev a,
.pagination-split__next a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:44px;
  padding:0 16px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

/* Numbers default */
.navigation.pagination .page-numbers,
.pagination .page-numbers,
.pagination-split .page-numbers{
  background:var(--surface);
  color:var(--nav-link);
}

/* Hover only for links */
.navigation.pagination a.page-numbers:hover,
.pagination a.page-numbers:hover,
.pagination-split a.page-numbers:hover,
.navigation.pagination a.prev:hover,
.navigation.pagination a.next:hover,
.pagination a.prev:hover,
.pagination a.next:hover,
.pagination-split__prev a:hover,
.pagination-split__next a:hover{
  background:var(--btn-bg);
  color:var(--btn-text);
  border-color:var(--btn-bg);
  transform:translateY(-1px);
}

/* Prev/Next default (outline, calm) */
.navigation.pagination .prev,
.navigation.pagination .next,
.pagination .prev,
.pagination .next,
.pagination-split__prev a,
.pagination-split__next a{
  background:transparent;
  color:var(--brand-bg);
  gap:8px;
  padding:0 18px;
}

/* Current page (calm highlight) */
.navigation.pagination .page-numbers.current,
.pagination .page-numbers.current,
.pagination-split .page-numbers.current{
  background:var(--card-bg);
  color:var(--brand-bg);
  border:1px solid var(--border-strong);
  box-shadow:0 4px 12px rgba(31,77,46,.12);
  cursor:default;
  transform:none;
}

/* Dots (…) — WordPress outputs this when mid_size/end_size are set in PHP */
.navigation.pagination .page-numbers.dots,
.pagination .page-numbers.dots{
  background:transparent;
  border:0;
  color:var(--text-muted);
  cursor:default;
  min-width:auto;
  height:auto;
  padding:0 6px;
  transform:none;
  box-shadow:none;
}

/* Disabled prev/next (usually rendered as span) */
.navigation.pagination span.prev,
.navigation.pagination span.next,
.pagination span.prev,
.pagination span.next,
.navigation.pagination span.page-numbers.prev,
.navigation.pagination span.page-numbers.next,
.pagination span.page-numbers.prev,
.pagination span.page-numbers.next{
  background:transparent;
  color:var(--text-muted);
  border-color:var(--border);
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  pointer-events:none;
}

/* Keep WP Prev left / Next right */
.navigation.pagination .prev,
.pagination .prev{ margin-right:auto; }
.navigation.pagination .next,
.pagination .next{ margin-left:auto; }

/* Custom split pagination */
.pagination-split{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  width:100%;
}
.pagination-split__prev{ justify-self:start; }
.pagination-split__nums{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.pagination-split__next{ justify-self:end; }

@media (max-width:640px){
  .navigation.pagination .prev,
  .navigation.pagination .next,
  .pagination .prev,
  .pagination .next,
  .pagination-split__prev a,
  .pagination-split__next a{
    width:100%;
    margin:0;
    justify-content:center;
  }
}

/* =========================================================
   10) PAGES (page.php): one clean card
   ========================================================= */
body.page .site-content article.widget{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 20px;
  overflow:hidden;
}

body.page .site-content article.widget > .post-title,
body.page .site-content .entry-title{
  color:var(--brand-bg);
  margin:0 0 14px;
  line-height:1.2;
}

/* Prevent inner wrappers becoming extra cards */
body.page .site-content article.widget .post-content,
body.page .site-content article.widget .entry-content{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  color:var(--page-text) !important;
}
body.page .site-content article.widget .post-content [class*="wp-block"]{ background:transparent !important; }
body.page .site-content article.widget .post-content > *:last-child,
body.page .site-content article.widget .entry-content > *:last-child{ margin-bottom:0; }

/* =========================================================
   11) FOOTER + FOOTER MENU
   ========================================================= */
.site-footer{
  background:var(--brand-bg);
  color:var(--brand-title);
  padding:26px 0;
  border-top:1px solid var(--white-14);
}
.site-footer a{ color:var(--brand-title); }
.site-footer a:hover{ color:var(--footer-link-hover); }

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.site-footer .footer-menu ul,
footer.site-footer .footer-menu nav.footer-nav ul.footer-menu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:flex-end;
  align-items:center;
}

.site-footer .footer-menu a,
footer.site-footer .footer-menu nav.footer-nav ul.footer-menu-list > li > a{
  display:inline-block;
  padding:8px 12px;
  border-radius:var(--radius-pill);
  color:var(--brand-title);
  text-decoration:none;
}
.site-footer .footer-menu a:hover,
footer.site-footer .footer-menu nav.footer-nav ul.footer-menu-list > li > a:hover{
  background:transparent;
  color:var(--footer-link-hover);
}

@media (max-width:720px){
  footer.site-footer .footer-menu nav.footer-nav ul.footer-menu-list,
  .site-footer .footer-menu ul{ justify-content:center; }
}

/* =========================================================
   SIDEBAR WIDGETS — FORCE CARD WRAP (ALL PAGES)
   ========================================================= */
.site-content aside .sidebar .widget,
aside.sidebar .widget,
aside[aria-label="Sidebar"] .sidebar .widget{
  background:var(--card-bg) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;
  padding:16px !important;
  margin-bottom:18px !important;
}

.site-content aside .sidebar .widget-title,
aside.sidebar .widget-title,
aside[aria-label="Sidebar"] .sidebar .widget-title{
  margin:0 0 12px !important;
  font-size:14px !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  color:var(--text-muted) !important;
}