/content/dam/soi/en/web/aging/resources/css/custom.css

/******************Weglot***********************************/

/*Restrict form width to remain within parent container 
   - form set to cover full width of pg. (used for translation purposes)*/
   .guideContainerNode {
    max-width: 100%;
}
/*WeGlot Keyboard Focus*/
.wg-drop.wg-mouse-click>div:focus 
{ 
    outline: 3px solid #1CA6DF; 
}

/****************** GLOBAL ****************************************/

/* Removes width restraints on text components */
.cmp-text {
    max-width: 100%;
}

/* Centers Text in Container */
.text-center {
    text-align: center !important;
}

/* Set attributes for color bar above H1 title text */
.title .cmp-title h1::before {
    width: 5.9375rem;
    content: " ";
    height: .375rem;
    position: absolute;
    top: 0;
    left: 0;
}

/* Set Global Header/Footer Color */
.cmp-global-header, .cmp-global-footer {
    background-color: #56101b;
}

.guideContainerNode .mobileLayout {
    display: none !important;
}

.afCheckBoxItem {
    width: 100%;
}

.guideWidgetLabel.right label,
.guideWidgetLabel.left label {
    line-height: 24px;
}

.guideContainerNode .red {
    color: #E21121;
}

.guideContainerNode .bold {
    font-weight: bold;
}

@media only screen and (min-width : 200px) {}

@media only screen and (min-width : 320px) {}

@media only screen and (max-width : 768px) {
    .afToolbarButton .guidebutton button .iconButton-icon {
        display: none!important;
    }
    .afToolbarButton .guidebutton button .iconButton-label {
        display: block!important;
    }
    .afToolbarButton .guidebutton button.submit {
        margin-right: 0!important;
    }
}

@media only screen and (min-width : 769px) {}

@media only screen and (min-width : 1200px) {}

@media only screen and (min-width : 1600px) {}



/* Fix word-break issue in tables to break on word */
.remove-word-break a {
    word-break: break-word !important;
}

/* Temporary fix for dynamic image sizes in Desktop view for Service Listing component */
@media only screen and (min-width : 769px) {
    .services .cmp-services__card-image img {
        height: 200px;
        width: auto;
    }
    .services .cmp-services__card-image {
        text-align: -webkit-center;
    }
}

/* Rounded corners + border styles */

/* Basic rounded corners */
.rounded-corners {
    border-radius: 12px; /* Adjust value for more or less rounding */
}

/* Fully circular (use for square elements like images or icons) */
.circle-shape {
    border-radius: 50%;
}

/* Rounded corners with border */
.rounded-border {
    border-radius: 12px;
    border: 2px solid #ccc; /* Light gray border */
}

/* Rounded corners with colored border */
.rounded-border-primary {
    border-radius: 12px;
    border: 2px solid #0078d4; /* Example: Microsoft blue */
}

/* Rounded corners with shadow and border */
.rounded-border-shadow {
    border-radius: 12px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Light, subtle border */
.border-light {
  border: 1px solid #ddd;          /* soft gray */
  border-radius: 8px;               /* rounded corners */
  padding: 12px;                    /* breathing room inside the card */
  background: #fff;                 /* optional: keeps image edges clean */
}

/* If the card is clickable, show a strong focus ring */
.border-light:focus,
.border-light:focus-visible {
  outline: 3px solid #1CA6DF;       /* accessible focus */
  outline-offset: 2px;
}

/* Hairline border when you want barely-there separation */
.border-hairline {
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 12px;
}

/* Light border with a gentle shadow for depth */
.border-light-shadow {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  padding: 14px;
  background: #fff;
}


.img-bounded {
  display: block;
  border-radius: 12px;           /* round the card itself */
  overflow: hidden;              /* clip image to card corners */
  background: #eeeeee;           /* card background */
  padding: 0;                    /* remove white frame */
}

.img-bounded img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;             /* ensures image fills space */
  border-radius: 0;              /* let parent handle rounding */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* subtle depth */
}

/* Thin, light gray border */
.border-thin {
  border: 1px solid #ccc;
}

/* Medium border for emphasis */
.border-md {
  border: 2px solid #bbb;
}

/* Darker neutral border */
.border-dark {
  border: 1px solid #666;
}

/* No border (to override other styles if needed) */
.border-none {
  border: none !important;
}

/* Faint yellow border (accessible with black text nearby) */
.border-yellow {
  border: 1px solid #FFF4CC; /* pale, soft yellow */
}

/* Brand-friendly soft palette options (pick one you like) */
.border-yellow-cream { border: 1px solid #FFF8DC; }
.border-yellow-warm  { border: 1px solid #FAF3C0; }
.border-beige        { border: 1px solid #FDF6E3; }
.border-pale         { border: 1px solid #FFFBE6; }
}

.rounded-sm { border-radius: 4px; }
.rounded-md { border-radius: 8px; }
.rounded-lg { border-radius: 16px; }
}

.img-pad-0  { padding: 0; }
.img-pad-4  { padding: 4px; }
.img-pad-8  { padding: 8px; }
.img-pad-12 { padding: 12px; }
}

.shadow-none { box-shadow: none; }

.shadow-sm {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
}

.shadow-md {
  box-shadow: 0 4px 6px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.08);
}

.shadow-lg {
  box-shadow: 0 10px 15px rgba(0,0,0,0.12), 0 4px 6px rgba(0,0,0,0.10);
}

/* Make images scale responsively while preserving aspect ratio */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Simple framed style combining border + padding + rounded corners */
.img-frame {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  background: #fff; /* optional: helps the frame pop on colored backgrounds */
}

/* Hover emphasis (subtle) */
.img-hover:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
  transform: translateY(-1px);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.my-image-border {
  border: 1px solid #ccc;
  border-radius: 4px;
}
/* ===== Brand + neutrals tuned for a page background of #eeeeee ===== */
:root {
  --bg: #ffffff;            /* card background on #eeeeee pages */
  --border: #d9c6ca;        /* light border harmonized with #8c2232 */
  --text: #1f2937;          /* body text */
  --heading: #0f172a;       /* heading text */
  --accent: #8c2232;        /* agency red */
  --focus: rgba(140, 34, 50, 0.55); /* soft red focus ring */
}

/* ===== Shared card base ===== */
.report-abuse,
.report-fraud {
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin: 16px;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  white-space: pre-line;   /* respect plain-text line breaks */
  position: relative;
}

/* First visual line styled like a heading (works without inner HTML) */
.report-abuse::first-line,
.report-fraud::first-line {
  font-size: clamp(1.25rem, 3.6vw, 1.75rem);
  font-weight: 700;
  color: var(--heading);
}

/* Paragraph spacing (if AEM outputs <p> elements) */
.report-abuse > p,
.report-fraud > p {
  margin: 8px 0;
}

/* ===== Unified button/CTA styling for both cards ===== */
.report-abuse > p:last-child,
.report-fraud > p:last-child,
.report-abuse a[href^="tel:"],
.report-fraud a[href^="tel:"] {
  display: inline-block;
  width: 100%;
  min-height: 48px;               /* ≥44px touch target */
  padding: 10px 12px;
  margin-top: 6px;
  border-radius: 10px;

  background: rgba(140, 34, 50, 0.08);  /* subtle red tint */
  color: var(--accent);

  /* Force identical font styling */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700 !important; /* ensure bold */
  font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
  line-height: 1.2;
  letter-spacing: 0.02em;

  border: 1px solid var(--border);
  text-align: center;
  text-decoration: none !important; /* remove underline from links */
}

/* Hover/active/focus states */
.report-abuse > p:last-child:hover,
.report-fraud > p:last-child:hover,
.report-abuse a[href^="tel:"]:hover,
.report-fraud a[href^="tel:"]:hover {
  background: rgba(140, 34, 50, 0.12);
  cursor: pointer;
}
.report-abuse > p:last-child:active,
.report-fraud > p:last-child:active,
.report-abuse a[href^="tel:"]:active,
.report-fraud a[href^="tel:"]:active {
  background: rgba(140, 34, 50, 0.16);
}
.report-abuse a[href^="tel:"]:focus,
.report-fraud a[href^="tel:"]:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Tablet/Desktop refinements */
@media (min-width: 600px) {
  .report-abuse,
  .report-fraud {
    max-width: 720px;
    margin: 24px auto;
    padding: 20px;
  }
  .report-abuse > p:last-child,
  .report-fraud > p:last-child,
  .report-abuse a[href^="tel:"],
  .report-fraud a[href^="tel:"] {
    width: auto;   /* don’t span full width on larger screens */
    padding: 10px 16px;
  }
}

/* Optional: Dark mode tweaks */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111315;
    --border: #3a2a2d;
    --text: #e5e7eb;
    --heading: #ffffff;
  }
  .report-abuse > p:last-child,
  .report-fraud > p:last-child,
  .report-abuse a[href^="tel:"],
  .report-fraud a[href^="tel:"] {
    background: rgba(140, 34, 50, 0.25); /* slightly stronger tint for dark bg */
    border-color: #5b171f;
  }
}
/* =========================================
   THEME VARIABLES (customize as needed)
   ========================================= */
:root {
  --cta-bg: #0078d4;              /* Primary background (MS-style blue) */
  --cta-bg-hover: #0062ad;        /* Hover background */
  --cta-bg-active: #004f8a;       /* Active background */
  --cta-text: #ffffff;            /* Text color */
  --cta-border: #0078d4;          /* Border color */
  --cta-border-hover: #005a9e;    /* Hover border */
  --cta-focus-ring: #ffbf47;      /* Focus outline for accessibility */
  --cta-shadow: 0 2px 6px rgba(0,0,0,0.15);
  --cta-shadow-hover: 0 4px 10px rgba(0,0,0,0.18);
  --cta-radius: 6px;
  --cta-padding-block: 12px;      /* Vertical padding */
  --cta-padding-inline: 20px;     /* Horizontal padding */
  --cta-font-weight: 600;
  --cta-font-size: 1rem;          /* 16px default; scales with root */
  --cta-letter-spacing: 0.3px;
  --cta-transition: 150ms ease-out;
}

/* Optional: dark theme */
:root[data-theme="dark"],
[data-theme="dark"] {
  --cta-bg: #3390ff;
  --cta-bg-hover: #1e7be6;
  --cta-bg-active: #1761b8;
  --cta-text: #0b0b0b;            /* dark theme readable text on light button */
  --cta-border: #1e7be6;
  --cta-border-hover: #1761b8;
  --cta-focus-ring: #ffd166;
}

/* =========================================
   BASE CTA STYLES (AEM Teaser + Button)
   ========================================= */

/* CTA as link inside Teaser */
.cmp-teaser .cmp-teaser__action-link,
.cmp-teaser .cmp-teaser__action-link:link,
.cmp-teaser .cmp-teaser__action-link:visited,
/* CTA rendered using Core Button (if used) */
.cmp-teaser .cmp-button,
.cmp-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* space for icon + text */
  padding: var(--cta-padding-block) var(--cta-padding-inline);
  border: 2px solid var(--cta-border);
  border-radius: var(--cta-radius);
  background-color: var(--cta-bg);
  color: var(--cta-text);
  text-decoration: none;
  font-weight: var(--cta-font-weight);
  font-size: var(--cta-font-size);
  letter-spacing: var(--cta-letter-spacing);
  line-height: 1.25;
  box-shadow: var(--cta-shadow);
  transition:
    background-color var(--cta-transition),
    border-color var(--cta-transition),
    box-shadow var(--cta-transition),
    transform var(--cta-transition),
    color var(--cta-transition);
  cursor: pointer;
  /* Prevent layout shift if icon appears */
  white-space: nowrap;
}

/* Hover / pointer interactions */
.cmp-teaser .cmp-teaser__action-link:hover,
.cmp-teaser .cmp-button:hover,
.cmp-button:hover {
  background-color: var(--cta-bg-hover);
  border-color: var(--cta-border-hover);
  box-shadow: var(--cta-shadow-hover);
  transform: translateY(-1px);
}

/* Active (pressed) */
.cmp-teaser .cmp-teaser__action-link:active,
.cmp-teaser .cmp-button:active,
.cmp-button:active {
  background-color: var(--cta-bg-active);
  transform: translateY(0);
  box-shadow: none;
}

/* Focus-visible for keyboard users (accessibility) */
.cmp-teaser .cmp-teaser__action-link:focus-visible,
.cmp-teaser .cmp-button:focus-visible,
.cmp-button:focus-visible {
  outline: 3px solid var(--cta-focus-ring);
  outline-offset: 3px;
}

/* Disabled (supports aria-disabled or .is-disabled) */
.cmp-teaser .cmp-teaser__action-link[aria-disabled="true"],
.cmp-teaser .cmp-button[aria-disabled="true"],
.cmp-button[aria-disabled="true"],
.cmp-teaser .cmp-teaser__action-link.is-disabled,
.cmp-teaser .cmp-button.is-disabled,
.cmp-button.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Optional: CTA with icon (place an <svg> or <span> inside) */
.cmp-teaser .cmp-teaser__action-link .cta-icon,
.cmp-button .cta-icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
}

/* =========================================
   VISUAL VARIANTS (outline, ghost, inverse)
   ========================================= */

/* Outline variant: transparent background, colored border */
.cmp-teaser .cta--outline,
.cmp-button.cta--outline {
  background-color: transparent;
  color: var(--cta-border);
  border-color: var(--cta-border);
}
.cmp-teaser .cta--outline:hover,
.cmp-button.cta--outline:hover {
  background-color: rgba(0, 120, 212, 0.08);
  color: var(--cta-border-hover);
  border-color: var(--cta-border-hover);
}

/* Ghost variant: text-only emphasis */
.cmp-teaser .cta--ghost,
.cmp-button.cta--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--cta-border);
  box-shadow: none;
}
.cmp-teaser .cta--ghost:hover,
.cmp-button.cta--ghost:hover {
  color: var(--cta-border-hover);
  text-decoration: underline;
}

/* Inverse variant: for dark backgrounds */
.cmp-teaser .cta--inverse,
.cmp-button.cta--inverse {
  background-color: #ffffff;
  color: #1a1a1a;
  border-color: #ffffff;
}
.cmp-teaser .cta--inverse:hover,
.cmp-button.cta--inverse:hover {
  background-color: #f0f0f0;
  border-color: #f0f0f0;
}

/* =========================================
   RESPONSIVE TWEAKS
   ========================================= */
@media (max-width: 480px) {
  .cmp-teaser .cmp-teaser__action-link,
  .cmp-teaser .cmp-button,
  .cmp-button {
    width: 100%;              /* full-width CTA on small screens */
    padding: 12px 16px;
    font-size: 0.95rem;
  }
}

/* =========================================
   REDUCED MOTION (accessibility)
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  .cmp-teaser .cmp-teaser__action-link,
  .cmp-teaser .cmp-button,
  .cmp-button {
    transition: none;
    transform: none;
    box-shadow: var(--cta-shadow);
  }
}
/* =========================
   Senior HelpLine Contact Card
   Accessible + Mobile-First
   ========================= */

/* -------- Design Tokens (swap these to match ilaging.illinois.gov) -------- */
:root {
  /* Colors */
  --hl-bg: #ffffff;          /* Card background */
  --hl-surface: #f6f7f9;     /* Page background */
  --hl-text: #0a0a0a;        /* Primary text */
  --hl-muted: #374151;       /* Secondary text (Gray-700) */
  --hl-primary: #1346a5;     /* Link & icon color (replace with site brand blue) */
  --hl-border: #e5e7eb;      /* Card border */
  --hl-focus: #ffbf47;       /* High-visibility focus outline */

  /* Typography & layout */
  --hl-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --hl-radius: 14px;
  --hl-shadow: 0 2px 10px rgba(0,0,0,0.06);
  --hl-maxw: 64rem;         /* ~1024px max width */
  --hl-gap: 1rem;
  --hl-icon-size: 28px;
  --hl-line: 1.6;
}

/* -------- Base -------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 100%; }
body {
  margin: 0;
  font-family: var(--hl-font);
  color: var(--hl-text);
  background: var(--hl-surface);
  line-height: var(--hl-line);
}

a { color: var(--hl-primary); text-decoration: underline; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--hl-focus); outline-offset: 3px; border-radius: 6px; }

/* Visually hidden utility */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------- Card Container -------- */
.hl-card {
  margin: 1.25rem auto;
  padding: 1.25rem;
  background: var(--hl-bg);
  border-radius: var(--hl-radius);
  box-shadow: var(--hl-shadow);
  border: 1px solid var(--hl-border);
  max-width: var(--hl-maxw);
}

.hl-title {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  margin: 0 0 1rem 0;
}

/* -------- Items List -------- */
.hl-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hl-gap);
}

/* Item */
.hl-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.875rem;
  align-items: start;
  padding: 0.75rem 0.6rem;
  border-radius: 12px;
}
.hl-item:hover { background: #fafafa; }

/* Icon */
.hl-icon {
  width: var(--hl-icon-size);
  height: var(--hl-icon-size);
  color: var(--hl-primary);
  margin-top: 2px;
  flex-shrink: 0;
}
.hl-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Content */
.hl-content { min-width: 0; }
.hl-heading {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}
.hl-value {
  margin: 0;
  color: var(--hl-muted);
  font-size: 1rem;
}
.hl-value address { font-style: normal; }

/* Larger tap targets for links */
.hl-value a {
  display: inline-block;
  padding: 2px 2px;
  border-radius: 6px;
}

/* -------- Responsive -------- */
@media (min-width: 768px) {
  .hl-list {
    grid-template-columns: 1fr 1fr; /* two columns on tablet/desktop */
  }
  .hl-item { padding: 0.9rem 0.75rem; }
}

@media (min-width: 1024px) {
  .hl-title { margin-bottom: 1.25rem; }
  .hl-list { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
}

/* -------- High Contrast -------- */
@media (prefers-contrast: more) {
  :root { --hl-border: #000; --hl-shadow: none; }
  .hl-card { border-width: 2px; }
  a { text-decoration-thickness: 2px; }
}

/* -------- Reduced Motion -------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .hl-item:hover { background: transparent; }
}

/* -------- Print -------- */
@media print {
  body { background: #fff; }
  .hl-card { box-shadow: none; border: 1px solid #000; }
  a { color: #000; text-decoration: underline; }
}