/* === Mesa Author — Clean Install (v1.1.0) === */
/* All styling consolidated here. No com_content overrides required. */

:root { --max: 1040px; --radius: 16px; }

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, 'Noto Sans', sans-serif; line-height: 1.6; color: #1a1a1a; }
a { color: inherit; text-decoration: none; }

/* Layout wrappers */
.container { max-width: var(--max); margin: 0 auto; padding: 1.25rem; }
.site-header { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border-bottom: 1px solid #eaeaea; }
.site-header .container { padding-top: 4px; padding-bottom: 4px; } /* slimmer bar */
.site-footer { padding: 2rem 0; }

/* Top navigation */
.site-header .mod-menu,
.placeholder-nav ul { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; }
.site-header .mod-menu > li { margin: 0; position: relative; }
.site-header .mod-menu > li > a { display: block; padding: .35rem .75rem; line-height: 1.2; }
.site-header .mod-menu li ul { position: absolute; left: 0; top: 100%; display: none; background: #fff; border: 1px solid #eee; min-width: 200px; padding: .5rem; z-index: 1000; }
.site-header .mod-menu li:hover > ul { display: block; }
.site-header .mod-menu li ul li a { display: block; padding: .5rem .75rem; }

/* Hero — responsive height, fade, optional scroll cue */
.hero {
  margin-top: 0;
  min-height: clamp(260px, 35vh, 420px);
  background-size: contain;    /* show full image where possible */
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #111;
  position: relative;
}
.hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25)); }
.hero .container { padding: 1.0rem 1.25rem; color: #fff; }

/* Fade-out at the bottom to suggest scroll */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,.65) 100%);
  pointer-events: none;
}

/* Scroll cue badge (add HTML inside your hero module to use it) */
.scroll-cue { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 12px; opacity: .9; }
.scroll-cue a { text-decoration: none; border: 1px solid rgba(255,255,255,.6); padding: .35rem .6rem; border-radius: 999px; color: #fff; background: rgba(0,0,0,.15); backdrop-filter: blur(2px); }

/* Anchor jumps land below sticky header */
#main { scroll-margin-top: 72px; }

/* Pull main content up slightly under hero */
.site-main { margin-top: -40px; }
.site-main .content { padding-top: 16px; }

/* Features */
.features { padding: 1.25rem 0 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature .moduletable, .feature .module { background: #fff; border: 1px solid #eee; border-radius: var(--radius); padding: 1rem; }

/* Main & Sidebar */
.grid { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; }
.site-main .content { max-width: 720px; }
.sidebar { border-left: 1px solid #eee; padding-left: 1rem; }

/* Prefooter & Footer */
.prefooter { background: #fafafa; padding: 2rem 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.site-footer .mod-menu, .prefooter .mod-menu { display: none; } /* hide extra menus; keep login */

/* Blog & Featured (core views, no overrides) */
.com-content-category-blog, .com-content-featured { --gap: 1rem; }
.com-content-category-blog article, .com-content-featured article { border: 1px solid #eee; border-radius: var(--radius); padding: 1rem; margin-bottom: var(--gap); background: #fff; }
.com-content-category-blog .page-header, .com-content-featured .page-header { margin-bottom: .5rem; }
.com-content-category-blog .article-info, .com-content-featured .article-info { display: none; }
.com-content-category-blog img, .com-content-featured img { max-width: 100%; height: auto; border-radius: 10px; }
.com-content-category-blog .pagination, .com-content-featured .pagination { margin-top: 1rem; }
.com-content-category-blog .items-row, .com-content-featured .items-row { gap: 1rem; }

/* Login page card */
.com-users-login form {
  max-width: 360px; margin: 2rem auto; padding: 2rem;
  border: 1px solid #eee; border-radius: 12px; background: #fff;
}
.com-users-login label { display: block; margin-bottom: .25rem; font-weight: 600; }
.com-users-login input[type="text"], .com-users-login input[type="password"] {
  width: 100%; padding: .6rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 8px;
}
.com-users-login button { display: inline-block; padding: .6rem 1rem; border-radius: 8px; background: #111; color: #fff; border: none; cursor: pointer; }
.com-users-login button:hover { background: #333; }

/* Responsive */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .sidebar { border: 0; padding: 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .site-header .mod-menu { gap: 10px; }
}