/*
Theme Name: HMG LLC Custom v4
Theme URI:  https://example.com/hmgllc-custom
Author:     Mike Fisher
Author URI: https://example.com
Description: A lightweight, responsive theme built for the Hess Mountain Group LLC website.
Version:    4.0
License:    GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hmgllc-custom
Tags:       custom-logo, responsive-layout, one-column, two-columns, blog
*/

/* --------------------------------------------------------------
   Google Fonts – Manrope (body) & Literata (headings)
   -------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=Literata:wght@400;700&display=swap');

/* ------------------------------------------------------------------
   Global box‑sizing & base typography
   ------------------------------------------------------------------ */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
    margin: 0;
    font-family: 'Manrope', system-ui, sans-serif;
    line-height: 1.6;
    color: #222;
    background: #fff;
}

/* ------------------------------------------------------------------
   Headings – use the Serif (Literata)
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title,
.site-title {
    font-family: 'Literata', serif;
    font-weight: 400;
}
h1, .site-title { font-weight: 700; }

/* ------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
	position: relative;
}
.site-title {
    font-family: 'Literata', serif;
    font-size: 1.75rem;
    margin: 0;
}
.site-title a {
    text-decoration: none;
    color: inherit;
}

/* Primary navigation (top‑right) */
.primary-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
}
.primary-nav a {
    text-decoration: none;
    color: #222;          /* black‑ish for the header menu */
    font-weight: 600;
}

/* This should be outside of any @media (max-width: ...) blocks */
.primary-nav.toggled {
    display: block !important; 
    /* Add other 'open' styles here like height, opacity, etc. */
}



/* ------------------------------------------------------------------
   Page (single‑column) layout
   ------------------------------------------------------------------ */
.page-content {
    max-width: 60%;               /* ~½ screen on desktop */
    margin: 2rem auto;
}
@media (max-width: 900px) {
    .page-content { max-width: 90%; }
}

/* ------------------------------------------------------------------
   Blog (two‑column) layout
   ------------------------------------------------------------------ */
.blog-wrapper {
    display: flex;
    gap: 2rem;
    margin: 2rem auto;
    max-width: 90%;
}
.blog-main   { flex: 3; }   /* ~¾ width */
.blog-sidebar{ flex: 1; }   /* ~¼ width */

@media (max-width: 800px) {
    .blog-wrapper { flex-direction: column; }
}

/* ------------------------------------------------------------------
   Footer – overall container
   ------------------------------------------------------------------ */
.site-footer {
    background: #f5f5f5;
    padding: 2rem 0;
    font-size: .9rem;
}

/* Flex row that holds the left & right columns */
.footer-main {
    display: flex;
    justify-content: space-between;   /* push columns apart */
    align-items: flex-start;          /* align tops */
    flex-wrap: wrap;                  /* stack on very narrow screens */
    margin-bottom: 1rem;              /* space before copyright line */
}

/* Left column (site info) */
.footer-left {
    flex: 1 1 45%;
    min-width: 260px;
    line-height: 1.5;
}
.footer-left strong,
.footer-left .footer-tagline,
.footer-left br + * {
    display: block;
}
.footer-tagline {
    max-width: 260px;      /* soft‑wrap width */
    line-height: 1.4;
    margin-top: .3rem;
}

/* Right column (footer menu) */
.footer-right {
    flex: 1 1 45%;
    min-width: 260px;
    text-align: right;
}

/* Footer navigation – strip default list styling */
.footer-right .footer-menu,
.footer-right nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-right .footer-menu li,
.footer-right nav ul li {
    margin-bottom: .6rem;
}

/* Footer links – black, with a subtle hover */
.footer-right a {
    color: #000;
    text-decoration: none;
}
.footer-right a:hover {
    color: #555;
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   Copyright line (centered below the two columns)
   ------------------------------------------------------------------ */
.footer-copyright {
    text-align: center;
    font-size: 0.85rem;
    color: #777;
    margin: 0;
}

/* ------------------------------------------------------------------
   Small utility – ensure images (e.g., logo) don’t overflow
   ------------------------------------------------------------------ */
.custom-logo {
    max-height: 60px;   /* adjust if you need a different size */
    width: auto;
    height: auto;
}

/* ==============================================================
   ===  Footer left – uniform vertical spacing
   ============================================================== */
.footer-left > * {
    display: block;
    margin: 0;
    margin-bottom: 0.5rem;   /* adjust to your taste */
}
.footer-tagline { margin-top: 0; }

/* ==============================================================
   ===  Header navigation – tighter item spacing
   ============================================================== */
/* Only apply flex layout on Desktop */
@media (min-width: 769px) {
    .primary-nav ul {
        display: flex;
        gap: 0;
    }
    .primary-nav li {
        margin-right: 0.8rem;
    }
    .primary-nav li:last-child {
        margin-right: 0;
    }
}

/* COMMENTING OUT OLD BLOCK
/* Option A – simple gap reduction (uncomment if you prefer)
/* .primary-nav ul { gap: 0.8rem; }

/* Option B – margin‑based control (uncomment if you prefer)
.primary-nav ul {
    display: flex;
    gap: 0;                     /* disable the default gap
}
.primary-nav li {
    margin-right: 0.8rem;       /* space between items
}
.primary-nav li:last-child {
    margin-right: 0;
}
*/


/* --------------------------------------------------------------
   2️⃣ Hamburger button (mobile only)
   -------------------------------------------------------------- */
.menu-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: none;                 /* hidden on large screens */
    padding: .5rem;
}

/* Visually hidden helper (screen‑reader only) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Draw the three‑line icon */
.hamburger-icon {
    display: block;
    width: 24px;
    height: 2px;
    background: #222;
    position: relative;
	margin: 10px 0; /* Add this to give the button physical size */
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    background: #222;
    position: absolute;
    left: 0;
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after  { top: 8px; }

/* --------------------------------------------------------------
   3️⃣ Mobile‑first adjustments (≤ 768 px)
   -------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Show the hamburger, hide the normal menu */
    .menu-toggle { display: block; }

    /* Collapse the nav – hidden by default */
    .primary-nav {
        position: absolute;
		top: 100%;               /* just below the header */
        right: 0;
        left: 0;
        background: #fff;
        border-top: 1px solid #ddd;
        max-height: 0;           /* closed state */
        overflow: hidden;
        transition: max-height .3s ease-out;
        z-index: 999;            /* sit above page content */
    }

    /* When JS adds .toggled, we expand */
    .primary-nav.toggled {
        max-height: 500px;       /* enough for most menus; adjust if needed */
		overflow: visible;  /* Allows content to be seen */
        transition: max-height .4s ease-in;
		display: block;
		background: #f4f4f4;
		/* padding: 20px; */ /* Be careful: padding can make 'height 0' look weird */
    }

    /* Stack the menu items vertically */
    .primary-nav ul {
        display: flex;
		flex-direction: column;
        gap: 0;                  /* no horizontal gap needed */
    }
    .primary-nav li {
        margin: 0;
        border-bottom: 1px solid #eee;
    }
    .primary-nav a {
        display: block;
        padding: .75rem 1rem;
        color: #222;
        text-decoration: none;
    }
    .primary-nav a:hover {
        background: #f5f5f5;
    }
	
	/* Hide the menu on the bottom when viewed on mobile */
	.footer-right {
        display: none;
    }
}