/* =========================================================
   DemoHAL Brand Tokens
   ========================================================= */
:root{
  --dh-green: #00CC66;
  --dh-red:   #CC0C02;
  --dh-black: #1A1A1A;
  --dh-gray:  #3A3A3A;
  --dh-lite:  #CCCCCC;
  --dh-white: #FFFFFF;
}

/* =========================================================
   Floating Line
   ========================================================= */
.floating-line {
  position: absolute;
  top: 50%;
  left: -200px;
  animation: floatAcross 10s linear infinite;
}
@keyframes floatAcross {
  from { left: -200px; transform: translateY(0); }
  to   { left: 100%;   transform: translateY(-60px); }
}

/* =========================================================
   Cards Grid + Flip Cards (non-Elementor buttons)
   ========================================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cards { grid-template-columns: 1fr; } }

.flip-card {
  display: block;
  position: relative;
  perspective: 1000px;
  text-decoration: none;
  outline: none;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 220px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease, box-shadow 0.3s ease;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.flip-card:hover .flip-inner,
.flip-card:focus .flip-inner,
.flip-card:focus-within .flip-inner {
  transform: rotateY(180deg);
}
.flip-front, .flip-back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 24px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flip-front { background: var(--dh-white); color: #111; }
.flip-back  { background: var(--dh-gray);  color: #e5e7eb; transform: rotateY(180deg); }

.flip-front .icon { width: 56px; height: 56px; margin-bottom: 12px; }
.flip-front h3 { margin: 0; font-size: 18px; line-height: 1.3; text-align: center; }
.flip-back p   { margin: 0; font-size: 16px; line-height: 1.5; text-align: center; }
.flip-card:hover .flip-inner { box-shadow: 0 16px 36px rgba(0,0,0,.12); }

/* =========================================================
   Full-bleed reporting embeds
   ========================================================= */
.demohal-fullbleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.demohal-fullbleed iframe {
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
  display: block;
}

/* =========================================================
   Client Login / WP Login Styling (KEEP)
   ========================================================= */
body.login .button-primary,
body.login input[type="submit"] {
  background: var(--dh-green) !important;
  border-color: var(--dh-green) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.login .button-primary:hover,
body.login input[type="submit"]:hover {
  background: #00b85c !important;
  border-color: #00b85c !important;
}
body.login a { color: var(--dh-green) !important; }
body.login a:hover { color: #00b85c !important; }

body.login .message,
body.login .notice,
body.login .success { border-left-color: var(--dh-green) !important; }

body.login input:focus {
  border-color: var(--dh-green) !important;
  box-shadow: 0 0 0 1px var(--dh-green) !important;
}

/* Notices (front/back-end generic) */
.notice,
.notice-info,
.message { border-left-color: var(--dh-green) !important; }
.notice-info { background: #f3fbf6 !important; }
.notice a { color: var(--dh-green) !important; font-weight: 500; }
.notice a:hover { color: #00b85c !important; }

.tml .tml-action-confirmation.success,
.tml .tml-success,
.tml .tml-message { border-left-color: var(--dh-green) !important; }
.tml a { color: var(--dh-green) !important; }
.tml a:hover { opacity: 0.9; }

/* =========================================================
   Portal / Reporting buttons (KEEP, scoped)
   These only apply inside your portal wrappers (NOT marketing pages)
   ========================================================= */
.dh-btn,
.dh-btn:visited {
  background: var(--dh-red);
  color: var(--dh-white) !important;
  border-color: var(--dh-red);
}
.dh-btn-disabled,
.dh-btn-disabled:hover {
  background: rgba(17,24,39,0.08);
  border-color: rgba(17,24,39,0.10);
  color: rgba(17,24,39,0.55) !important;
  cursor: not-allowed;
}

/* Wrapper areas only */
.demohal-wrapper a,
.demohal-wrapper a:visited,
.demohal-wrapper button {
  background: var(--dh-red);
  color: var(--dh-white) !important;
  border-color: var(--dh-red);
  text-decoration: none;
}
.demohal-wrapper a:hover,
.demohal-wrapper button:hover {
  background: var(--dh-green);
  border-color: var(--dh-green);
  color: var(--dh-white) !important;
}

/* Reporting action area only */
.dh-reporting-actions a,
.dh-reporting-actions a:visited {
  color: var(--dh-white) !important;
}
.dh-reporting-actions a:hover {
  background: var(--dh-green);
  border-color: var(--dh-green);
  color: var(--dh-white) !important;
}

/* =========================================================
   Resource pages (KEEP)
   ========================================================= */
.single-resource .entry-title,
.single-resource h1.entry-title,
.single-resource .wp-block-post-title {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
}
.single-resource .entry-content h2 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
}
.single-resource .entry-meta,
.single-resource .post-meta,
.single-resource .ast-single-post-order,
.single-resource .ast-post-meta,
.single-resource .posted-on,
.single-resource .posted-by {
  display: none !important;
}

/* =========================================================
   Bullets helper (KEEP)
   ========================================================= */
.dh-bullets { text-align: center; }
.dh-bullets ul{
  max-width: 760px;
  margin: 16px auto 0;
  text-align: left;
  padding-left: 0;
  list-style-position: outside;
}
.dh-bullets li{
  margin: 10px 0;
  padding-left: 18px;
  text-indent: -18px;
  line-height: 1.6;
}
.dh-bullets li::marker{ font-size: 0.9em; }

/* =========================================================
   Wide card helper (KEEP)
   ========================================================= */
.dh-wide-card{
  width: min(1280px, calc(100% - 64px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 520px){
  .dh-wide-card{ width: calc(100% - 24px) !important; }
}

/* =========================================================
   OPTIONAL: Layout-only button row helper (SAFE)
   Add class "dh-btn-row" to the container holding the two buttons.
   This does NOT set colors, radius, padding, etc. Elementor stays in charge.
   ========================================================= */
.dh-btn-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.dh-btn-row .elementor-widget-button{ margin:0 !important; }