/* =========================================================================================
  Miami-Dade County — Housing & Community Development (HCD)
  Business Tools and Operational Modules
----------------------------------------------------------------------------------------------

  WHEREAS Clause:
    Whereas certain components of this software and related documentation may be interpreted
    as “work made for hire” due to their use in support of HCD operations; and whereas
    David Gray, Full Stack Business Architect, is the sole creator and author of the
    underlying source code, logic, architecture, data models, and system design; it is hereby
    affirmed that all intellectual property rights, title, and interest are expressly reserved
    by the creator, irrespective of any work-for-hire characterization.

----------------------------------------------------------------------------------------------
  Date of Development: 2025-11-08 — All rights reserved.
============================================================================================= */

/* ——— Miami-Dade County look & feel (no layout changes) ——— */
:root{
  --md-blue:#0072bc;         /* logo blue */
  --md-green:#5ba646;        /* logo green */
  --ink:#0f172a;             /* slate-900 */
  --ink-2:#334155;           /* slate-700 */
  --muted:#64748b;           /* slate-500 */
  --bg:#f6f8fb;              /* soft page bg */
  --card:#ffffff;
  --line:#e5e7eb;
  --shadow:0 10px 24px rgba(2,8,23,.06);
}

html,body{
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
    linear-gradient(180deg, #fff 0%, var(--bg) 100%) fixed;
  margin:0;
  max-width: 1160px;
  margin: 0 auto;
}

header[role="banner"]{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px;
  background:#fff;
  border-bottom:4px solid var(--md-blue);
}

/* Use the attached logo without changing markup */
.hcd-logo{
  inline-size:132px; block-size:48px;
  background:url("/assets/images/miami-dade-county-logo.png") no-repeat left center / contain; /* <-- adjust path if needed --> */
  flex:0 0 auto;
}

/* Title block next to logo */
header .brand{
  font-weight:700; letter-spacing:.2px;
  color:var(--ink);
}
header h1{ margin:0; font-size: clamp(1.125rem, 1.6vw, 1.5rem); }

/* Hero band */
.hero{
  margin:28px 20px 14px;
  padding:18px 18px;
  background-color: #f5f9ff;
  background-image: linear-gradient(90deg, #e0edf9 0%, #e2f7ea 100%);
  background-repeat: no-repeat;
  border:1px solid var(--line);
  border-left:6px solid var(--md-green);
  border-radius:14px;
  box-shadow: var(--shadow);
}
.hero h2{
  margin:.2rem 0 .4rem; font-size:1.1rem; color:var(--md-blue);
}
.hero h3{
  text-align:justify;
}
.hero .muted{ color:var(--ink-2); font-weight:500; }

/* Section headings */
#apps-title{
  margin:24px 20px 8px;
  font-size:1.05rem;
  color:var(--md-blue);
  border-left:6px solid var(--md-blue);
  padding-left:10px;
}

/* Cards grid — uses existing .grid container and .card items */
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding: 0 20px 24px;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-top:5px solid var(--md-blue);
  border-radius:14px;
  padding:16px 16px 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card h4{ margin:.2rem 0 .35rem; font-size:1.05rem; color:var(--ink); }
.card .muted{ margin:0 0 .8rem; color:var(--muted); }
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); border-top-color:var(--md-green); }

/* Buttons */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  background:var(--md-blue);
  background-image:linear-gradient(90deg, var(--md-blue), color-mix(in srgb, var(--md-blue) 85%, #fff));
  color:#fff; font-weight:600;
  padding:10px 14px; border-radius:999px; border:0;
  box-shadow: 0 4px 14px rgba(0,114,188,.18);
  transition: filter .15s ease, transform .05s ease;
}
.btn:hover{ 
  background:var(--md-green);
  background-image:linear-gradient(90deg, var(--md-green), color-mix(in srgb, var(--md-green) 85%, #fff));
}
.btn:active{ transform: translateY(1px); }
.btn:focus{ outline:3px solid color-mix(in srgb, var(--md-green) 40%, #fff); outline-offset:2px; }

/* Footer */
footer{
  margin: 18px 20px 28px; padding: 20px 0 20px 0 ;
  color:#fff;
  border-top:4px solid var(--md-green);
  border-bottom:4px solid var(--md-green);
  background:var(--md-blue);
}
footer h6{ margin:0; font-weight:600; font-size:.9rem; text-align:center; }

/* =========================================================
   HOST GUARD OVERLAY
   ======================================================= */

/* lock scroll when overlay active */
body.host-guard-active{
  overflow:hidden;
}

/* full-screen dim layer */
.host-guard{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.86); /* slate-900 with opacity */
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

/* visible state is added by JS when host is NOT myphcd.org */
.host-guard.visible{
  opacity:1;
  pointer-events:auto;
}

/* inner panel */
.host-guard-panel{
  max-width:540px;
  width:100%;
  background:#ffffff;
  color:var(--ink);
  border-radius:18px;
  padding:22px 22px 18px;
  box-shadow:var(--shadow);
  border-top:5px solid var(--md-blue);
  border-left:4px solid var(--md-green);
}

.host-guard-panel h2{
  margin:0 0 .6rem;
  font-size:1.15rem;
  color:var(--md-blue);
}

.host-guard-text{
  margin:.25rem 0;
  font-size:.94rem;
  color:var(--ink-2);
  text-align:justify;
}

/* actions row */
.host-guard-actions{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

/* tweak buttons for overlay */
.host-guard-btn-internal{
  /* primary look already provided by .btn */
}

.host-guard-btn-public{
  background:transparent;
  background-image:none;
  color:var(--md-blue);
  border:1px solid var(--md-blue);
  box-shadow:none;
}
.host-guard-btn-public:hover{
  background:#f1f5f9;
  color:var(--md-blue);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  * { transition:none !important; animation:none !important; }
}
.mouse { cursor:pointer; }