/* ========================================================================
   Provider Experience Cloud – Optimized CSS
   Notes:
   - Uses CSS custom properties for shared tokens.
   - Keeps Experience Cloud/LWC scoping attributes intact.
   - Minimizes !important usage to only when overriding managed styles.
   ======================================================================== */

/* Design tokens (override with your theme as needed) */
:root {
  /* spacing paddings used repeatedly for page content */
  --acc-pad-page-h: 156px;
  --acc-pad-page-h-md: 110px;
  --acc-pad-page-h-sm: 56px;

  /* typography */
  --acc-hero-heading-size: 44px;
  --acc-hero-desc-size: 36px;
  --acc-header-underline-size: 32px;

  /* colors */
  --acc-color-text: #4A4A4A;
  --acc-color-border: #696969;
  --acc-color-blue-100: #EFF5F8;
  --acc-color-blue-200: #DCECF4;
  --acc-color-info-bg: #D7F6F8;
  --acc-color-info-border: #51CFD6;
  --acc-color-warning-bg: #FFF0B6;
  --acc-color-footer: #005e8f;

  /* component sizing */
  --acc-footer-height: 200px;
  --acc-hero-height: 143px;
}

/* ========================================================================
   Community layout tweaks
   ======================================================================== */
.siteforceContentArea .comm-layout-column .ui-widget:not(:last-child),
.siteforceContentArea .cb-section_column .ui-widget:not(:last-child) {
  margin-bottom: 0 !important;
}

.forceCommunitySection .cb-section_column,
.cb-section_column .slds-size_12-of-12 .slds-max-medium-size_12-of-12 {
  padding: 0 !important;
}

.forceCommunityFlowCommunity,
.flowruntimeBody__lwc[lwc-4p1kl1q7p5n] {
  border: 0 !important;
}

.flowruntimeBody__lwc[lwc-4p1kl1q7p5n] {
  padding: 0 !important;
  margin: 0;
}

.navigationBar[lwc-3uma98d0eu4] {
  padding-right: 0;
  padding-bottom: 0;
}

/* Left nav page padding around flow container */
.flowRuntimeForFlexipage {
  padding: 12px 12px 12px var(--acc-pad-page-h) !important;
}

.flowruntimeFlowRuntime {
  border: 1px solid var(--acc-color-border);
  border-radius: 4px;
  padding: 12px;
}

/* ========================================================================
   Custom Navigation (LWC: c-customNavigationCmp)
   ======================================================================== */
.nav[c-customNavigationCmp_customNavigationCmp] .slds-border_top[c-customNavigationCmp_customNavigationCmp] {
  margin: 0 !important;
  padding-left: var(--acc-pad-page-h);
}

.nav[c-customNavigationCmp_customNavigationCmp] {
  margin-bottom: 0 !important;
  font-size: 16px;
  font-weight: 400;
}

.slds-border_bottom[c-customNavigationCmp_customNavigationCmp] {
  border-bottom: 0 !important;
}

.slds-large-size_1-of-8[c-customNavigationCmp_customNavigationCmp] {
  width: 196px !important;
}

.slds-p-around_small[c-customNavigationCmp_customNavigationCmp] {
  padding: 12px;
  background-color: var(--acc-color-blue-200);
}

/* ========================================================================
   Underline headers / Rich text block
   ======================================================================== */
.uiOutputRichTextQuery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  font-size: 18px;
  font-weight: 300;
  padding: 40px 16px 16px var(--acc-pad-page-h);
  margin-bottom: 12px;
}

.uiOutputRichTextQuery .header {
  font-size: var(--acc-header-underline-size);
  font-weight: 600;
}

.forceCommunityThemeHeaderBase .themeBottomBorder {
  height: 0 !important;
}

.forceCommunityThemeLogo .logoImage {
  min-height: 80px;
}

/* Navigation header spacing */
.themeHeaderInner {
  padding: 0 40px;
  width: 100% !important;
}

/* Focus styling for horizontal menu items */
.horizontalMenuItem:focus {
  outline: 1px solid var(--c-colorBlack);
}

[lwc-7t1nfh5vcg1] .slds-gutters {
  padding: 0 !important;
}

/* ========================================================================
   Information box (global)
   ======================================================================== */
.information_box {
  box-sizing: border-box;
  border: 1px solid var(--acc-color-info-border);
  background: var(--acc-color-info-bg);
  border-radius: 4px;
  color: var(--acc-color-text);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 300;
  margin: 16px 16px 0 var(--acc-pad-page-h);
}

.information_box:before {
  content: url("/sfsites/c/resource/HSS_ProviderExperienceCloud_ICONS/icons/Information.svg");
  margin-right: 10px;
}

/* Customized user icon */
.slds-avatar {
  content: url("/sfsites/c/resource/Icon_User");
}

/* ========================================================================
   ProviderHub Outage Banner (c-outagemessagebanner)
   ======================================================================== */
c-outagemessagebanner .slds-card {
  border: 0;
}

c-outagemessagebanner .slds-card__header,
c-outagemessagebanner .slds-card__body {
  margin: 0;
  padding: 0;
}

c-outagemessagebanner .outagebanner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  padding: 16px var(--acc-pad-page-h);
  border-bottom: 2px solid #FFF;
}

c-outagemessagebanner .outagebanner a {
	color: inherit;
}

/* Information banner */
c-outagemessagebanner .outagebanner.information_banner {
  background: #E7F4FA;
  font-size: 16px;
  font-weight: 300;
  color: inherit;
  line-height: 24px;
}

c-outagemessagebanner .outagebanner.information_banner:before {
  content: url("/sfsites/c/resource/HSS_ProviderExperienceCloud_ICONS/icons/Information.svg");
  width: 20px;
  padding: 2px 0 0;
  vertical-align: text-top;
}

/* Warning banner */
c-outagemessagebanner .outagebanner.warning_banner {
  background: var(--acc-color-warning-bg);
  font-size: 16px;
  font-weight: 300;
  color: inherit;
  line-height: 24px;
}

c-outagemessagebanner .outagebanner.warning_banner:before {
  content: url("/sfsites/c/resource/HSS_ProviderExperienceCloud_ICONS/icons/Warning.svg");
  width: 20px;
  padding: 2px 0 0;
  vertical-align: text-top;
}

/* ========================================================================
   Footer
   ======================================================================== */
.siteforceThemeLayoutStarter {
  min-height: 100vh;
}

.body {
  min-height: 710px;
}

img#ACC_Footer_Logo {
  height: 32px;
}

.footer {
  position: relative;
  width: 100%;
  height: var(--acc-footer-height);
  background: var(--acc-color-footer);
  padding: 20px 40px;
}

/* Remove default bullets and pseudo bullets */
.footer ul > li,
.footer ul > li:before {
  list-style-type: none;
  content: none !important;
}

.footer .external-site:after {
  content: url("/sfsites/c/resource/Icon_ExternalLink");
}

.footer ul > li {
  font-size: 16px;
  line-height: 21px;
  text-align: right;
  font-weight: 600;
}

.footer .container {
  background-color: var(--c-colorBlue);
}

/* Footer spacing and alignment */
.footer .footer-nav,
.footer .footer-bottom {
  justify-content: space-between;
  height: 68px;
}

.footer .li-class {
  padding: var(--lwc-spacingNone);
  margin-left: 40px;
}

.footer .footer-spacer {
  height: 24px;
}

.footer .government-logo {
  max-height: 62px;
}

/* Mobile footer adjustments */
@media only screen and (max-width: 500px) {
  .isPageWidthFixed-true {
    padding-bottom: 400px; /* Mobile footer height reserve */
  }

  .footer .footer-nav {
    flex-direction: column;
    align-items: baseline;
    align-content: flex-start;
  }

  .footer .footer-spacer {
    height: var(--lwc-spacingXLarge);
  }

  .footer .li-class {
   margin: var(--lwc-spacingXLarge) 0 0;
  }

  .slds-list_horizontal {
    flex-direction: column;
  }

  .forceCommunityRichText ul,
  .forceCommunityRichText ul li {
    padding-left: var(--lwc-spacingNone) !important;
  }
}

/* ========================================================================
   Global resets / utilities
   ======================================================================== */
html {
  font-size: var(--lwc-fontSize5) !important;
}

/* Hide mobile list view actions (Filter/Sort) */
.forceCommunityActionsContainerMobile {
  display: none;
}

/* Underline link style for ACC tables */
.accLinkUnderline {
  text-decoration: underline;
}

/* ========================================================================
   Custom LWC styles
   ======================================================================== */

/* Hero */
.acc-hero {
  width: 100%;
  height: var(--acc-hero-height) !important;
  padding: 48px var(--acc-pad-page-h) 40px;
}

.acc-hero_heading {
  font-size: var(--acc-hero-heading-size);
  font-weight: 600;
  line-height: 55px;
  text-align: left;
}

.acc-hero_desc {
  padding-right: 30%;
  font-size: var(--acc-hero-desc-size);
  font-weight: 400;
  line-height: 45px;
  text-align: left;
}

.acc-hero .slds-p-top_xx-large {
  padding-top: 0;
}

/* Section display */
.acc-section_field-label {
  font-size: var(--lwc-fontSize5);
}

/* Inputs */
.acc-datepicker button {
  pointer-events: auto;
}

.acc-picklist input {
  cursor: pointer;
}

/* ========================================================================
   Flow styling
   ======================================================================== */

/* Labels and headings */
.flow-wrapper .flowruntimeBody .slds-form-element__label {
  margin-top: var(--acc-c-form-element-spacing-margin, 0.625rem);
  font-size: var(--acc-c-form-element-label-font-size, var(--lwc-fontSize3));
  color: var(--acc-c-form-element-label-color, var(--c-colorBlack));
}

.flow-wrapper .div_heading,
.flow-wrapper .acc-flow_heading {
  font-size: var(--lwc-fontSize10);
  line-height: var(--lwc-lineHeightHeading);
  letter-spacing: var(--lwc-spacingNone);
  text-align: left;
}

.flow-wrapper .acc-flow_heading {
  font-family: var(--lwc-fontFamily, SofiaProLight);
  font-weight: 400;
}

.flow-wrapper .container {
  height: auto; /* Override managed theme height=130px */
}

/* Info/Warning/Success callouts */
.flow-wrapper .information_box,
.flow-wrapper .warning_box,
.flow-wrapper .success_box {
  box-sizing: border-box;
  border-radius: var(--lwc-borderRadiusMedium);
  color: var(--c-colorGreyDark);
  padding: var(--lwc-spacingMedium);
}

.flow-wrapper .information_box {
  border: 1px solid var(--c-colorBlueLight);
  background: var(--c-colorBluePale);
}

.flow-wrapper .warning_box {
  border: 1px solid var(--c-colorWarning);
  background: var(--c-colorWarningTint);
}

.flow-wrapper .success_box {
  border: 1px solid var(--c-colorSuccess);
  background: var(--c-colorSuccessTint);
}

.flow-wrapper .information_box:before {
  content: url("/sfsites/c/resource/HSS_ProviderExperienceCloud_ICONS/icons/Information.svg");
  padding: var(--lwc-spacingMedium);
  vertical-align: text-top;
}

.flow-wrapper .warning_box:before {
  content: url("/sfsites/c/resource/HSS_ProviderExperienceCloud_ICONS/icons/Warning.svg");
  padding: var(--lwc-spacingMedium);
  vertical-align: text-top;
}

.flow-wrapper .success_box:before {
  content: url("/sfsites/c/resource/HSS_ProviderExperienceCloud_ICONS/icons/Success.svg");
  padding: var(--lwc-spacingMedium);
  vertical-align: text-top;
}

/* Card background accent */
.flow-wrapper .slds-card {
  content: " ";
  background: var(--c-colorDialogue);
  background-size: 14px 14px;
  background-repeat: no-repeat;
  padding-left: var(--lwc-spacingMedium);
}

/* Buttons */
.content .slds-button:focus {
  outline: 3px solid var(--c-colorAccessibilityPurple);
  outline-offset: var(--lwc-spacingXxxSmall);
}

.flow-wrapper .slds-button_brand,
.flow-wrapper .slds-button_brand:hover,
.flow-wrapper .slds-button_brand:focus,
.flow-wrapper .slds-button_neutral,
.flow-wrapper .slds-button_neutral:hover,
.flow-wrapper .slds-button_neutral:focus {
  --sds-c-button-radius-border: 24px;
  font-size: var(--acc-c-button-font-size, var(--lwc-varFontSize5));
  padding: var(--acc-c-button-padding, var(--lwc-spacingXxSmall)) var(--acc-c-button-padding, var(--lwc-spacingMedium));
}

.flow-wrapper .slds-button_neutral,
.flow-wrapper .slds-button_neutral:hover,
.flow-wrapper .slds-button_neutral:focus {
  border-color: var(--acc-c-button-color-border, var(--c-colorBlue));
}

/* Rules, hr */
.flow-wrapper .flowruntimeBody hr {
  margin: var(--lwc-spacingXSmall) 0;
}

/* Tooltip icon */
.flow-wrapper .slds-form-element__icon .slds-button_icon {
  border: none;
  width: 10px;
  position: relative;
  top: -8px;
  left: -8px;
}

/* Inputs */
.flow-wrapper .flowruntimeBody input {
  --sds-c-input-text-color: var(--c-colorBlue);
  --sds-c-input-text-color-focus: var(--c-colorBlue);
  --sds-c-input-color-border: var(--c-colorBlue);
  --sds-c-input-color-border-focus: var(--c-colorBlue);
  max-width: var(--acc-c-input-max-width, 350px);
  padding: var(--acc-c-input-padding, var(--lwc-spacingXSmall)) var(--acc-c-input-padding, var(--lwc-spacingSmall));
  font-size: var(--acc-c-input-font-size, var(--lwc-fontSize4));
}

.flow-wrapper .flowruntimeBody input:focus,
.flow-wrapper .flowruntimeBody input:active {
  box-shadow: var(--sds-c-input-shadow-focus, 0 0 3px var(--lwc-brandAccessible, var(--c-colorBlue)));
}

.flow-wrapper .flowruntimeBody .slds-input-has-icon {
  max-width: var(--acc-c-input-max-width, 350px);
}

flowruntime-flow-screen-input .slds-input {
  border-color: var(--c-colorBlack);
}

flowruntime-lwc-body .slds-form-element__label {
  color: var(--c-colorBlack);
}

/* Selects */
.flow-wrapper .slds-select_container {
  max-width: var(--acc-c-select-max-width, 350px);
}

.flow-wrapper .flowruntimeBody select {
  --sds-c-select-text-color: var(--c-colorBlue);
  --sds-c-select-text-color-focus: var(--c-colorBlue);
  --sds-c-select-color-border: var(--c-colorBlue);
  --sds-c-select-color-border-focus: var(--c-colorBlue);
  padding: var(--acc-c-input-padding, var(--lwc-spacingXSmall)) var(--acc-c-input-padding, var(--lwc-spacingSmall));
  font-size: var(--acc-c-select-font-size, var(--lwc-fontSize4));
  height: fit-content !important;
}

/* Textarea */
.flow-wrapper .flowruntimeBody textarea {
  --sds-c-textarea-text-color: var(--c-colorBlue);
  --sds-c-textarea-text-color-focus: var(--c-colorBlue);
  --sds-c-textarea-color-border: var(--c-colorBlue);
  --sds-c-textarea-color-border-focus: var(--c-colorBlue);
}

/* Checkbox/Radio */
.flow-wrapper .flowruntimeBody .slds-checkbox_faux,
.flow-wrapper .flowruntimeBody .slds-checkbox--faux {
  --sds-c-checkbox-color-border: var(--c-colorBlue);
  --sds-c-checkbox-color-border-checked: var(--c-colorBlue);
  --sds-c-checkbox-color-border-focus: var(--c-colorBlue);
}

.flow-wrapper .flowruntimeBody .slds-radio_faux,
.flow-wrapper .flowruntimeBody .slds-radio--faux {
  border-color: var(--c-colorBlue) !important;
}

.flow-wrapper .flowruntimeBody .slds-radio_faux:after {
  background: var(--c-colorBlue) !important;
}

.flow-wrapper .flowruntimeBody .uiInputSelect {
  border-color: var(--c-colorBlue) !important;
}

/* Flow screen layouts */
.flow-wrapper .flowruntime-screen-field .slds-medium-size_8-of-12 {
  padding: 20px 36px 36px !important;
  border: 1px solid var(--c-colorBlue);
  border-radius: 0 10px 10px 0;
  background: var(--c-colorGreyLight);
  min-height: 274px;
}

.flow-wrapper .flowruntime-screen-field .slds-medium-size_4-of-12 {
  padding: 0 !important;
}

.flow-wrapper .forceCommunityFlowCommunity {
  border: 0 !important;
}

/* Progress/path */
.flow-wrapper lightning-progress-step {
  z-index: var(--lwc-zIndexDocked);
}

.slds-is-active .slds-path__title,
.slds-is-complete .slds-path__title {
  color: var(--c-colorWhite);
}

/* Remove extra hero spacing inside flows */
p.acc-hero_desc.slds-p-top_small {
  display: none;
}

/* ========================================================================
   Tab set styles
   ======================================================================== */

lightning-tab-bar a.slds-tabs_default__link {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 8px 24px;
  color: #000 !important;
  font-size: 16px !important;
  line-height: 125%;
}

lightning-tab-bar .slds-tabs_default__nav {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 var(--acc-pad-page-h);
  background: var(--acc-color-blue-100) !important;
  border: 0;
}

lightning-tab-bar li.slds-tabs_default__item {
	margin: 0 !important;
	background: var(--acc-color-blue-200) !important;
}

lightning-tab-bar .slds-tabs_default__nav .slds-is-active {
  background: #fff !important;
  border: 0 !important;
}

lightning-tab-bar .slds-tabs_default__nav .slds-tabs_default__item:after {
	background-color: transparent !important;
}

/* ========================================================================
   Responsive paddings for hero / tabset / flows / flexcards / LWC
   ======================================================================== */
@media only screen and (max-width: 75rem) {
  .acc-hero {
    padding: 48px var(--acc-pad-page-h-md) 40px;
  }

  lightning-tab-bar .slds-tabs_default__nav {
    padding: 0 var(--acc-pad-page-h-md);
  }

  .vendordisplay {
    padding: 32px var(--acc-pad-page-h-md) !important;
  }
  
  .vendor-selector {
    padding: 32px var(--acc-pad-page-h-md) !important;
  }
  
  .ph-breadcrumb {
    padding: 0 var(--acc-pad-page-h-md) 16px !important;
  }

  div.uiOutputRichTextQuery {
    padding: 40px 16px 16px var(--acc-pad-page-h-md);
  }

  .flowRuntimeForFlexipage {
    padding: 12px 12px 12px var(--acc-pad-page-h-md) !important;
  }
  
  c-outagemessagebanner .outagebanner {
    padding: 16px var(--acc-pad-page-h-md);
  }
  
  .themeHeaderInner {
    padding: 0 20px;
  }

  .footer{
    padding: 20px;
  }

  .nav[c-customNavigationCmp_customNavigationCmp] .slds-border_top[c-customNavigationCmp_customNavigationCmp] {
	  padding-left: var(--acc-pad-page-h-md);
  }
}

@media only screen and (max-width: 64rem) {
  .acc-hero {
    padding: 32px var(--acc-pad-page-h-sm);
  }

  lightning-tab-bar .slds-tabs_default__nav {
    padding: 0 var(--acc-pad-page-h-sm);
  }

  .vendordisplay {
    padding: 32px var(--acc-pad-page-h-sm) !important;
  }
  
  .vendor-selector {
    padding: 32px var(--acc-pad-page-h-sm) !important;
  }
  
  .ph-breadcrumb {
    padding: 0 var(--acc-pad-page-h-sm) 16px !important;
  }

  div.uiOutputRichTextQuery {
    padding: 40px 16px 16px var(--acc-pad-page-h-sm);
  }

  .flowRuntimeForFlexipage {
	padding: 12px 12px 12px var(--acc-pad-page-h-sm) !important;
  }
  
  c-outagemessagebanner .outagebanner {
	padding: 16px var(--acc-pad-page-h-sm);
  }
  
  .themeHeaderInner {
	padding: 0 20px;
  }

  .footer{
    padding: 20px;
  }

  .nav[c-customNavigationCmp_customNavigationCmp] .slds-border_top[c-customNavigationCmp_customNavigationCmp] {
	  padding-left: var(--acc-pad-page-h-sm);
  }
}