/*
Theme Name:        Ngaawas
Theme URI:         https://ngaawas.com
Author:            Digital Bisage
Author URI:        https://digitalbisage.com
Description:       A modern, premium real estate WordPress theme for Ngaawas — built for speed, elegance, and conversion. Features announcement bar, full-width layouts, sticky navigation, and a clean design system in earthy greens and warm neutrals.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       ngaawas
Tags:              real-estate, full-width-template, custom-colors, custom-logo, custom-menu, responsive-layout, one-column, blog
*/

/* =============================================
   CSS CUSTOM PROPERTIES
============================================= */
:root {
    --color-bg:           #F4F1E8;
    --color-bg-alt:       #EDEADF;
    --color-white:        #FFFFFF;
    --color-green:        #2D5A27;
    --color-green-mid:    #3a7232;
    --color-green-light:  #4B9344;
    --color-green-tint:   rgba(75,147,68,0.10);
    --color-red:          #E30613;
    --color-red-dark:     #B8000F;
    --color-dark:         #1A1A1A;
    --color-mid:          #444444;
    --color-muted:        #777777;
    --color-faint:        #AAAAAA;
    --color-white-text:   #FFFFFF;
    --color-border:       rgba(45,90,39,0.14);
    --color-border-light: rgba(45,90,39,0.07);
    --shadow-xs:          0 1px 4px rgba(0,0,0,0.06);
    --shadow-sm:          0 2px 12px rgba(0,0,0,0.08);
    --shadow-md:          0 6px 28px rgba(0,0,0,0.10);
    --shadow-lg:          0 14px 48px rgba(0,0,0,0.12);
    --shadow-green:       0 6px 22px rgba(45,90,39,0.22);
    --font:               'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display:       'Playfair Display', 'Georgia', serif;
    --radius-sm:          6px;
    --radius-md:          10px;
    --radius-lg:          16px;
    --radius-xl:          24px;
    --radius-pill:        999px;
    --ease:               cubic-bezier(0.4,0,0.2,1);
    --t:                  all 0.26s cubic-bezier(0.4,0,0.2,1);
}

/* =============================================
   RESET
============================================= */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.72;
    color: var(--color-dark);
    background: var(--color-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================
   TYPOGRAPHY
============================================= */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-dark);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem,   5vw, 3.75rem); }
h2 { font-size: clamp(1.65rem,4vw, 3rem);    }
h3 { font-size: clamp(1.35rem,3vw, 2.25rem); }
h4 { font-size: clamp(1.1rem, 2.5vw,1.75rem);}
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; font-family:var(--font); font-weight:700; }

p {
    font-size: 15px;
    line-height: 1.78;
    color: var(--color-mid);
    margin-bottom: 16px;
}
p:last-child { margin-bottom:0; }

strong,b { font-weight:700; color:var(--color-dark); }
em,i     { font-style:italic; }
small    { font-size:12px; color:var(--color-muted); }

blockquote {
    border-left: 4px solid var(--color-green-light);
    padding: 16px 24px;
    margin: 32px 0;
    background: var(--color-green-tint);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-mid);
}
blockquote p { margin-bottom:0; }

code,pre {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    background: rgba(0,0,0,0.04);
    border-radius: var(--radius-sm);
}
code { padding:2px 6px; }
pre  { padding:20px; overflow-x:auto; }

/* =============================================
   LINKS
============================================= */
a { color:var(--color-green); text-decoration:none; transition:color 0.2s ease; }
a:hover { color:var(--color-green-light); }
a:focus-visible { outline:2px solid var(--color-green-light); outline-offset:3px; border-radius:3px; }

/* =============================================
   IMAGES
============================================= */
img,video,svg { display:block; max-width:100%; height:auto; }

figure { margin:32px 0; }
figcaption { font-size:13px; color:var(--color-muted); text-align:center; margin-top:8px; }

/* =============================================
   LISTS
============================================= */
ul,ol { padding-left:24px; margin-bottom:16px; }
li    { margin-bottom:8px; }
ul.unstyled,ol.unstyled { list-style:none; padding-left:0; }

/* =============================================
   TABLES
============================================= */
table { width:100%; border-collapse:collapse; margin-bottom:32px; font-size:13.5px; }
thead th { background:var(--color-green); color:#fff; padding:12px 16px; text-align:left; font-weight:700; font-size:11px; letter-spacing:0.07em; text-transform:uppercase; }
tbody td { padding:12px 16px; border-bottom:1px solid var(--color-border-light); color:var(--color-mid); }
tbody tr:hover td { background:rgba(75,147,68,0.04); }

/* =============================================
   FORMS
============================================= */
input,textarea,select {
    width:100%; padding:12px 16px;
    font-family:var(--font); font-size:15px;
    color:var(--color-dark); background:var(--color-white);
    border:1.5px solid var(--color-border);
    border-radius:var(--radius-sm); outline:none;
    transition:var(--t); appearance:none; -webkit-appearance:none;
}
input:focus,textarea:focus,select:focus {
    border-color:var(--color-green-light);
    box-shadow:0 0 0 3px rgba(75,147,68,0.15);
}
input::placeholder,textarea::placeholder { color:var(--color-faint); }
label { display:block; font-size:13px; font-weight:600; color:var(--color-mid); margin-bottom:8px; }
textarea { resize:vertical; min-height:120px; }

/* =============================================
   BUTTONS
============================================= */
.btn,button,input[type="submit"],input[type="button"] {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 24px; font-family:var(--font); font-size:13.5px;
    font-weight:700; letter-spacing:0.03em;
    border:2px solid transparent; border-radius:var(--radius-sm);
    cursor:pointer; transition:var(--t); white-space:nowrap;
    text-decoration:none; appearance:none; line-height:1;
}

/* Primary — Red */
.btn-primary,input[type="submit"] {
    background:var(--color-red); color:#fff; border-color:var(--color-red);
}
.btn-primary:hover,input[type="submit"]:hover {
    background:var(--color-red-dark); border-color:var(--color-red-dark);
    color:#fff; transform:translateY(-2px); box-shadow:0 6px 20px rgba(227,6,19,0.28);
}

/* Secondary — Green filled */
.btn-secondary {
    background:var(--color-green); color:#fff; border-color:var(--color-green);
}
.btn-secondary:hover {
    background:var(--color-green-light); border-color:var(--color-green-light);
    color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-green);
}

/* Outline — Green */
.btn-outline {
    background:transparent; color:var(--color-green); border-color:var(--color-green);
}
.btn-outline:hover {
    background:var(--color-green); color:#fff; transform:translateY(-2px);
}

.btn-sm  { padding:8px 16px; font-size:12px; }
.btn-lg  { padding:16px 40px; font-size:15px; }
.btn-full { width:100%; }

/* =============================================
   LAYOUT
============================================= */
#ng-content { width:100%; min-height:60vh; }

.wrap        { width:100%; max-width:1280px; margin:0 auto; padding:0 40px; }
.wrap-narrow { width:100%; max-width:860px;  margin:0 auto; padding:0 40px; }

.section    { padding:96px 0; }
.section-sm { padding:64px 0; }
.section-lg { padding:128px 0; }

/* Grid */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }

/* Flex */
.flex         { display:flex; }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-col     { display:flex; flex-direction:column; }
.flex-wrap    { flex-wrap:wrap; }
.gap-sm { gap:12px; }
.gap-md { gap:24px; }
.gap-lg { gap:40px; }

/* Text */
.text-center { text-align:center; }
.text-left   { text-align:left;   }
.text-right  { text-align:right;  }

/* =============================================
   SECTION LABELS & HEADINGS
============================================= */
.section-label {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 16px; background:var(--color-green-tint);
    border:1px solid var(--color-border); border-radius:var(--radius-pill);
    font-size:11px; font-weight:700; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--color-green); margin-bottom:16px;
    font-family: var(--font);
}
.section-label::before {
    content:''; display:inline-block; width:6px; height:6px;
    background:var(--color-green-light); border-radius:50%; flex-shrink:0;
}

.section-heading {
    font-family:var(--font-display); font-size:clamp(1.65rem,4vw,3rem);
    font-weight:700; color:var(--color-dark); line-height:1.18; margin-bottom:16px;
}
.section-heading span { color:var(--color-green); }

.section-sub {
    font-size:16px; color:var(--color-muted); line-height:1.72; max-width:580px;
}

.section-header-center {
    text-align:center; display:flex; flex-direction:column;
    align-items:center; margin-bottom:64px;
}
.section-header-center .section-sub { margin:0 auto; }

/* =============================================
   CARDS
============================================= */
.card {
    background:var(--color-white); border:1px solid var(--color-border-light);
    border-radius:var(--radius-lg); overflow:hidden;
    transition:var(--t); box-shadow:var(--shadow-xs);
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--color-border); }

.card-img { width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform 0.4s var(--ease); }
.card:hover .card-img { transform:scale(1.03); }

.card-body  { padding:24px; }
.card-title { font-size:1.1rem; font-weight:700; color:var(--color-dark); margin-bottom:8px; font-family:var(--font-display); }
.card-text  { font-size:13.5px; color:var(--color-muted); margin-bottom:16px; }

.badge      { display:inline-block; padding:3px 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.badge-green{ background:var(--color-green-tint); color:var(--color-green); }
.badge-red  { background:rgba(227,6,19,0.08); color:var(--color-red); }

/* =============================================
   PRICE TAG
============================================= */
.price-tag { display:inline-flex; align-items:baseline; gap:4px; }
.price-tag .amount { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--color-green); line-height:1; }
.price-tag .unit   { font-size:13px; color:var(--color-muted); font-weight:500; }
.price-tag .strike { font-size:15px; color:var(--color-faint); text-decoration:line-through; }

/* =============================================
   PROPERTY FEATURES
============================================= */
.prop-features { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--color-border-light); }
.prop-feature  { display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--color-muted); font-weight:600; }
.prop-feature svg { width:15px; height:15px; color:var(--color-green-light); flex-shrink:0; }

/* =============================================
   PAGINATION
============================================= */
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; padding:48px 0; }
.page-numbers { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; color:var(--color-mid); border:1px solid var(--color-border); background:var(--color-white); transition:var(--t); }
.page-numbers:hover,.page-numbers.current { background:var(--color-green); color:#fff; border-color:var(--color-green); }

/* =============================================
   DIVIDERS & HR
============================================= */
hr { border:none; border-top:1px solid var(--color-border-light); margin:32px 0; }

/* =============================================
   WORDPRESS ALIGNMENT
============================================= */
.alignleft   { float:left;  margin:0 24px 16px 0; }
.alignright  { float:right; margin:0 0 16px 24px; }
.aligncenter { display:block; margin:0 auto; text-align:center; }
.alignwide   { margin-left:calc(-1 * 40px); margin-right:calc(-1 * 40px); }
.alignfull   { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

/* =============================================
   WP BLOCK EDITOR
============================================= */
.wp-block-image img    { border-radius:var(--radius-md); }
.wp-block-quote        { border-left:4px solid var(--color-green-light); }
.wp-block-button .wp-block-button__link {
    background:var(--color-red); border-radius:var(--radius-sm);
    font-family:var(--font); font-size:13.5px; font-weight:700;
    padding:12px 24px; transition:var(--t);
}
.wp-block-button .wp-block-button__link:hover { background:var(--color-red-dark); }

/* =============================================
   ENTRY CONTENT
============================================= */
.entry-content { line-height:1.8; }
.entry-content > * + * { margin-top:20px; }
.entry-content h2,.entry-content h3,.entry-content h4 { margin-top:32px; margin-bottom:12px; }

/* =============================================
   ACCESSIBILITY
============================================= */
.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;
}
.screen-reader-text:focus {
    background:var(--color-white); border-radius:var(--radius-sm);
    box-shadow:var(--shadow-md); clip:auto !important; clip-path:none;
    color:var(--color-dark); display:block; font-size:15px; font-weight:700;
    height:auto; left:16px; padding:16px 24px; top:16px; width:auto; z-index:99999;
}

.skip-link {
    position:absolute; top:-100%; left:16px; z-index:99999;
    background:var(--color-green); color:#fff; padding:12px 24px;
    border-radius:0 0 var(--radius-sm) var(--radius-sm);
    font-size:13.5px; font-weight:700; transition:top 0.2s ease;
}
.skip-link:focus { top:0; }

/* =============================================
   SELECTION & SCROLLBAR
============================================= */
::selection { background:var(--color-green-light); color:#fff; }
::-webkit-scrollbar       { width:8px; }
::-webkit-scrollbar-track { background:var(--color-bg-alt); }
::-webkit-scrollbar-thumb { background:var(--color-green); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--color-green-light); }

/* =============================================
   NOTICES
============================================= */
.notice { padding:16px 24px; border-radius:var(--radius-md); margin-bottom:24px; font-size:13.5px; }
.notice-success { background:rgba(75,147,68,0.1);  color:var(--color-green);  border-left:3px solid var(--color-green-light); }
.notice-error   { background:rgba(227,6,19,0.08);  color:var(--color-red);    border-left:3px solid var(--color-red);   }
.notice-info    { background:rgba(45,90,39,0.07);  color:var(--color-dark);   border-left:3px solid var(--color-green); }

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width:1024px) {
    .wrap,.wrap-narrow { padding:0 32px; }
    .grid-4 { grid-template-columns:repeat(2,1fr); }
    .grid-3 { grid-template-columns:repeat(2,1fr); }
    .section    { padding:64px 0; }
    .section-lg { padding:80px 0; }
}

@media (max-width:640px) {
    html { font-size:15px; }
    .wrap,.wrap-narrow { padding:0 20px; }
    .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
    .section    { padding:48px 0; }
    .section-sm { padding:40px 0; }
    .section-lg { padding:64px 0; }
    .section-header-center { margin-bottom:40px; }
    .alignleft,.alignright { float:none; margin:0 0 16px 0; display:block; }
    .alignwide  { margin-left:-20px; margin-right:-20px; }
}

@media print {
    #ng-announce,#ng-header,#ng-footer,.scroll-top,.hamburger,.mob-menu,.mob-overlay { display:none !important; }
    body { background:#fff; color:#000; padding-top:0; }
    a { text-decoration:underline; color:#000; }
}