/* =========================================================
OzSpy minimal CSS (clean, no bloat)
- Keeps: full-width black nav + full-width black footer (no desktop scrollbar)
- Keeps: hero + .fullwidth sections full-bleed
- Removes: old blue menu/footer traces, duplicate blocks, debug/legacy bits
========================================================= */

/* Brand vars (optional, but handy) */
:root {
  --oz-green: #7ac142;
  --oz-blue: #00529b;
  --oz-black: #111;
  --oz-text: #333;
  --oz-max: 1300px;
  --oz-inner: 1100px;
}

/* Prevent 1px overflow when using 100vw breakouts */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

/* Page is full width (nav/footer can truly span full width) */
body {
  margin: 0 !important;
  max-width: none !important;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: var(--oz-text);
}

p { font-family: "Roboto", sans-serif; }

a {
  color: #00529b; /* slightly darker blue */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Constrain your actual content (Cassiopeia wrappers) */
.site-grid,
.container-component,
.component-content {
  max-width: var(--oz-max);
  margin-left: auto;
  margin-right: auto;
}

/* Header: remove gradient */
.container-header {
  background-image: none !important;
  background-color: #fff;
}

/* Logo styling */
.logo img {
  background-color: #fff;
  padding: 5px;
}
.brand-logo { box-shadow: 0 0 5px #fff; }

/* Brand text next to logo */
.container-header .navbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.navbar-brand::after {
  content: "OzSpy Security Solutions";
  margin-left: 14px;
  font-size: 16px;
  font-weight: 400;
  color: #111;
}

/* =========================================================
NAV (black WP-style, full width)
========================================================= */
.container-nav {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--oz-black) !important;
  border-bottom: 2px solid var(--oz-green) !important;
  
}

/* Make the menu span full width (not constrained) */
.container-nav .metismenu {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 15px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  background: transparent !important;
  
}

/* Menu item styling */
.container-nav .metismenu-item,
.container-nav .metismenu-item a {
  background: transparent !important;
  color: #fff !important;
  font-size:15px;
}
.container-nav .metismenu-item > a {
  padding: 9px 14px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  font-size:15px;
}

/* Dropdown items */
.container-nav .mm-collapse a,
.container-nav .mm-show a {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

/* Top-level dropdown toggler buttons (e.g. Candidate Zone, Admin) */
.container-nav .metismenu-item > button.mod-menu__separator {
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  padding: 9px 14px !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
}

.container-nav .metismenu-item > a:hover,
.container-nav .metismenu-item > a:focus {
  box-shadow: inset 0 -2px 0 var(--oz-green) !important;
}

/* Dropdowns */
.container-nav .mm-collapse,
.container-nav .mm-show,
.container-nav .mm-collapse a,
.container-nav .mm-show a {
  background: var(--oz-black) !important;
  color: #fff !important;
  font-size:15px;
}

/* Top-level dropdown toggler buttons (covers separator + heading variants) */
.container-nav .metismenu-item > button.mod-menu__separator,
.container-nav .metismenu-item > button.mod-menu__heading {
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  padding: 9px 14px !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
}


/* =========================================================
HOVER + ACTIVE STATE (OzSpy Green)
========================================================= */

/* Hover state */
.container-nav .metismenu-item > a:hover,
.container-nav .metismenu-item > a:focus {
  color: var(--oz-green) !important;
  box-shadow: inset 0 -2px 0 var(--oz-green) !important;
}

/* Active / Current page state */
.container-nav .metismenu-item.current > a,
.container-nav .metismenu-item.active > a,
.container-nav .metismenu-item.mm-active > a,
.container-nav .metismenu-item > a[aria-current="page"] {
  color: var(--oz-green) !important;
  box-shadow: none !important;
}

/* If dropdown parent is active */
.container-nav .metismenu-item.mm-active > button,
.container-nav .metismenu-item.active > button {
  color: var(--oz-green) !important;
}


/* =========================================================
FOOTER (black WP-style, full width container, spaced columns)
========================================================= */

.container-footer {
  width: 100% !important;
  margin: 0 !important;
  background: var(--oz-black) !important;
  color: #fff !important;
  border-top: 2px solid var(--oz-green) !important;
}

.container-footer a { 
  color: #fff !important; 
}

.container-footer a:hover { 
  text-decoration: underline !important; 
}

/* Keep footer content constrained to site width */
.container-footer .footer,
.container-footer .container,
.container-footer .container-fluid,
.container-footer .grid-child {
  max-width: var(--oz-max) !important;
  margin: 0 auto !important;
  text-align: left;
}

/* Main footer row */
.container-footer .mod-footer {
  display: flex !important;
  width: 100% !important;
  flex-direction: row !important;
  justify-content: space-between !important;  /* evenly spreads columns */
  align-items: flex-start !important;         /* top align */
  gap: 40px;                                  /* spacing between columns */
}

/* Individual columns */
.container-footer .mod-footer > * {
  flex: 1 1 0 !important;   /* equal flexible columns */
  min-width: 0 !important;  /* prevents overflow forcing wrap */
  text-align: left !important;
  align-self: flex-start !important;
}

.footer-heading {
  font-size: 18px;
  font-weight: 500;
}



/* Mobile stacking */
@media (max-width: 768px) {
	.container-footer .mod-footer {
		flex-direction: column !important;
		gap: 24px;
	}
}

.container-footer .grid-child {
	align-items: flex-start !important;
}



/* =========================================================
FULL-BLEED SECTIONS (hero + .fullwidth)
These break out to viewport width, while content stays constrained via .inner
========================================================= */
.fullwidth,
.hero-wrap,
.hero-cta {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
}

/* Inner container */
.fullwidth .inner,
.hero-overlay .inner,
.hero-cta .inner {
  max-width: var(--oz-inner);
  margin: 0 auto;
  padding: 0 18px;
  text-align: center;
}

/* Blue band / authority band */
.fullwidth-blue {
  background-color: var(--oz-blue);
  color: #fff;
  padding: 18px 0;
}
.fullwidth-band {
  background: #f7f7f7;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 0;
}
.fullwidth-band h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  color: #111827;
}
.fullwidth-band p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #1f2937;
}

/* Remove top gap above hero on featured/article views */
.view-featured main,
.view-featured .site-grid,
.view-featured .container-component,
.view-featured .component-content,
.view-article main,
.view-article .site-grid,
.view-article .container-component,
.view-article .component-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.view-featured .item-page > p:first-child,
.view-article .item-page > p:first-child,
.item-page > *:first-child,
.item-page p:first-child {
  margin-top: 0 !important;
}

/* =========================================================
HERO
========================================================= */
.hero-wrap {
  position: relative;
  background: #000;
  overflow: hidden;
  line-height: 0;      /* kills the 1px baseline/subpixel gap */
  font-size: 0;        /* extra safety on some browsers */
}

.hero-overlay,
.hero-overlay .inner {
  font-size: 15px;     /* restores text (since hero-wrap is now font-size:0) */
  line-height: 1.4;
}

.hero-img {
  display: block;
  width: 100% !important;
  height: auto;
  filter: brightness(0.65);
}



.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.30);
}

.hero-overlay .inner {
  position: relative;
  color: #fff;
  padding-top: 30px;
  padding-bottom: 30px;
}

.hero-overlay h1 {
  margin: 0 !important;
  font-size: clamp(24px, 4.2vw, 44px) !important;
  line-height: 1.12 !important;
}
.hero-sub {
  margin: 12px 0 0;
  font-size: clamp(14px, 2.1vw, 18px) !important;
}
.hero-proof {
  margin: 18px auto 0;
  max-width: 900px;
  font-size: 25px;
  font-weight:500;
  line-height: 1.45;
  opacity: 0.95;
}
.hero-proof-sub {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.95;
}

/* CTA band under hero */
.hero-cta {
  background: #165a9c;
  padding: 25px 0;
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-cta-note {
  margin-top: 10px;
  font-size: clamp(12px, 1.8vw, 13px) !important;
  opacity: 0.95;
}

/* Mobile: crop ~10% each side so hero feels less compressed */
@media (max-width: 768px) {
  .hero-img {
    height: clamp(280px, 55vw, 420px);
    object-fit: cover;
    object-position: center;
    transform: scale(1.1);
    transform-origin: center;
  }
}

/* =========================================================
Menu module (your .menu-container)
========================================================= */
.menu-container { display: flex; }
.menu-container .module {
  flex: 1;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
.menu-container .module ul {
  display: inline-block;
  padding: 0;
  margin: 0;
}
.menu-container .module li {
  display: inline-block;
  padding: 10px 20px;
}
.menu-container .module li a {
  text-decoration: none;
  color: #000;
}

/* =========================================================
Alerts
========================================================= */
.myNotification {
  border-radius: 5px;
  border: 1px solid gold;
  color: grey;
  padding: 8px;
}


.mybutton {
  border: none;
  border-radius: 4px;
  background-color: green;
  color: #fff;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  cursor: pointer;
  width: 400px;
  max-width: 90%;
  animation: fadein 2s;
  -moz-animation: fadein 2s;
  -webkit-animation: fadein 2s;
  -o-animation: fadein 2s;
}
.mybutton:hover { opacity: 1; }

/* =========================================================
Tables
========================================================= */
table {
  border-collapse: collapse;
  width: 100%;
}
th, td { padding: 8px; }
th { background-color: #f5f5f5; }

.tableclass {
  border: 1px solid black;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 4px;
}
.tableclass td,
.tableclass th {
  border: 0;
  padding: 8px;
}
.tableclass tr:nth-child(even) { background-color: #f2f2f2; }


/* Mobile hero: keep height + crop sides (no “squashed” look) */
@media (max-width: 768px) {
  .hero-wrap {
    height: clamp(300px, 58vw, 420px) !important; /* keeps some height */
    overflow: hidden !important;
  }

  /* Catch img and picture img */
  .hero-wrap img,
  .hero-wrap picture img,
  .hero-wrap .hero-img {
    width: 100% !important;
    height: 100% !important;          /* key: fill the hero-wrap height */
    max-width: none !important;
    object-fit: cover !important;      /* crop instead of shrink */
    object-position: center !important;
    display: block !important;
  }

  /* Optional: if you still want ~10% extra side crop */
  .hero-wrap img,
  .hero-wrap picture img,
  .hero-wrap .hero-img {
    transform: scale(1.08) !important;  /* trims ~10% each side */
    transform-origin: center !important;
  }
}

/* All article images full width 
.item-page img {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  display: block;
}*/




/* --- Undo any header grid-child constraining (so menu can stay full width) --- */
header.container-header.full-width > .grid-child {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* --- Constrain ONLY the logo row inside the header --- */
header.container-header.full-width .navbar-brand {
  max-width: 1300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  width: 100% !important;
}

/* Keep nav bar full width, but constrain menu items to the site container */
.container-nav .navbar {
  width: 100% !important;
}

.container-nav .navbar > .container,
.container-nav .navbar > .container-fluid,
.container-nav .navbar > .container-lg,
.container-nav .navbar > .container-md,
.container-nav .navbar > .container-sm,
.container-nav .navbar > .container-xl,
.container-nav .navbar > .container-xxl {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* If there isn't a .container wrapper, clamp the collapse wrapper itself */
.container-nav .navbar-collapse {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Keep UL from stretching full width so it sits naturally in the container */
.container-nav ul.metismenu {
  width: auto !important;
}
/* =========================================================
Global HR + Heading adjustments
========================================================= */

/* HR styling */
hr {
  max-width: 80%;
  margin: 40px auto;           /* padding above and below */
  border: 0;
  border-top: 2px solid #ccc;  /* 2px grey */
}

/* Headings weight */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}


/* =========================================================
FORCE form styling (wide version)
========================================================= */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="tel"],
textarea,
select,
.form-control,
.form-select {
  font-size: 15px !important;
  width: 100% !important;          /* full width of container */
  max-width: 1100px !important;    /* wider cap */
  padding: 16px 20px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Select height */
select,
.form-select {
  min-height: 40px !important;
}
/* =========================================================
Article images
Default: normal (do not force width/position)
Only images you explicitly mark as hero go full-bleed
========================================================= */

/* Default: leave images alone (stop forcing 100vw) */
.item-page img {
  max-width: 100%;
  height: auto;
}

/* Full-bleed ONLY when the IMAGE itself has the class */
.item-page img.hero-image {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  display: block !important;
}

/* =========================================================
Article HERO images (support class on wrapper OR on img)
Scoped to .item-page so nothing sitewide gets touched
========================================================= */

/* If hero-image is on a wrapper (most common in Joomla editors) */
.item-page .hero-image {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
}

/* Make the image fill that full-bleed wrapper */
.item-page .hero-image img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

/* If hero-image is directly on the image */
.item-page img.hero-image {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  display: block !important;
  height: auto !important;
}

/* =========================================================
Mobile crop for ARTICLE hero images (trim ~10% each side)
Applies only to .item-page hero-image images
========================================================= */
@media (max-width: 768px) {
  /* Give the hero wrapper a fixed-ish height so cropping can happen */
  .item-page .hero-image {
    height: clamp(300px, 58vw, 420px) !important;
    overflow: hidden !important;
  }

  /* Make the image fill the wrapper and crop */
  .item-page .hero-image img,
  .item-page img.hero-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;

    /* trims ~10% each side */
    transform: scale(1.06) !important;
    transform-origin: center !important;
  }
}

/* remove <p> from sourcerer output */
.com-content-article__body > p:first-child {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Simple FAQ styling */
.faq-section h2 {
    margin-bottom: 20px;
}

.faq-section h3 {
    margin-top: 22px;
    margin-bottom: 6px;
    font-weight: 500;
    font-size:18px;
}

.faq-section p {
    margin-bottom: 16px;
    line-height: 1.6;
}

.faq-section h3::before {
    content: "Q: ";
    font-weight: 600;
}

.faq-section p::before {
    content: "A: ";
    font-weight: 600;
}