/* SVGs */

/* To mimic Bootstrap _reboot img { vertical-align: middle } */
/* TODO: Consider for Core-CMS */
/* TODO: Decide whether this is only for footer */
svg {
    vertical-align: middle;
}





/* BUTTONS */

/* To style buttons differently than in body */
.c-footer .c-button,
.c-footer [class*="button--"] {
    --max-width: auto; /* override core-styles.base.css */
    font-size: var(--global-font-size--x-small); /* mimic Botstrap .small and <small> */

    /* TODO: (1) Remove <small> from footer buttons (2) Remove this font-size */
    & small {
        font-size: inherit; /* gracefully deprecate use of <small> */
    }
}





/* LOGOS */

/* To set baseline styles for footer logos */
/* TODO: Evaluate for tup-ui or core-cms CSS */
.c-footer svg {
    fill: var(--global-color-primary--xx-light);
}
.c-footer [class*="logos--"] {
    display: grid;
    gap: var(--gap, 0);
    grid-auto-flow: column;
    justify-content: center;
}
.c-footer .logos--branding {
    --gap: 2rem;

    /* NOTE: Test any changes on all browsers and screen sizes */
    grid-template-columns: repeat( 3, minmax(0, 1fr) );
}
.c-footer .logos--branding a {
    min-height: 60px;
    max-height: 120px;
}

.c-footer [class*="logos--"] a {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* horz align when image narrower than grid cell */
}

/* For independent logo sizes */
.c-footer .logos__tacc svg {
  height: 55%;

  /* To vertically align center as if small text was not present */
  transform: translateY(5%);
}
.c-footer .logos__nsf svg {
  height: 100%;
}
.c-footer .logos__ut svg {
  height: 66.67%;

  /* To vertically align center as if small text was not present */
  transform: translateY(5%);
}

/* To create fake border between logos */
.c-footer [class*="logos--"] a { position: relative }
.c-footer .logos--branding a:not(:first-child)::before {
  height: 75%;

  position: absolute;
  left: calc( -1 * var(--gap)/2 );

  content: '';
  display: block;
  background-color: var(--global-color-primary--xx-light);
  background-clip: content-box;
  width: var(--global-border-width--normal);
  box-sizing: content-box;

  cursor: default;
}

/* To skin social media logo links */
/* WARNING: Developer styles */
.c-footer .logos--social a {
    display: inline-block;
    padding: 1rem; /* rem, because any em value is 0 because font-size: 0 */
}
.c-footer .logos--social a:hover {
    background-color: var(--global-color-primary--x-dark);
}
.c-footer .logos--social svg {
    height: 2.5rem; /* rem, so it scales like text */
}





/* LAYOUT */



/* LAYOUT - All Screens */

.c-footer {
  --pad-vert: 36px;
  --pad-horz: 36px;
}


/* LAYOUT - Narrow Screen */

/* Move all panes to one column */
@media (width < 380px) {
  #cms-footer .col {
    /* FAQ: I copied Bootstrap .col-6 styles and changed 50% to 100% */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}




/* LAYOUT - Wide Screen */

/* To draw a line between "Quick Links" and regular links */
@media (width > 380px) {
    #cms-footer .c-pane--aside {
        border-left: var(--global-border-width--normal) solid var(--global-color-primary--xx-light);
    }
}

/* To draw a box behind common footer content */
/* FAQ: The box stretches to cover the height and right side of the footer */
@media (width >= 992px) {
    #cms-footer .c-pane--common {
        /* To move c-footer vertical padding into this pane */
        margin-block: calc( -1 * var(--pad-vert) );
        padding-block: var(--pad-vert);

        background-color: var(--global-color-primary--x-dark);
    }
    html:not(#page-portal) .c-footer {
        padding-right: revert; /* undo core-styles.cms.css */
    }
    #cms-footer .c-pane--common {
        padding-inline: var(--pad-horz);
    }
    #cms-footer.row:not(.no-gutters) {
        margin-right: 0;
    }
}





/* PER CLIENT */


/* PER CLIENT - HIDE/SHOW */

/* To hide/show CMS/Portal footer */
html#page-portal #cms-footer, /* new id */
html:not(#page-portal) #portal-footer /* trans id */ {
    display: none;
}

/* PER CLIENT - PORTAL */

html:not(#page-portal) .c-footer {
    /* To add a full-width border above CMS footer */
    /* TODO: Evaluate for tup-ui or Core-CMS CSS */
    border-width: var(--global-border-width--thick) 0 0 0;
    border-style: solid;
    border-color: var(--global-color-secondary--light);

    /* To remove padding-block on CMS footer */
    padding-block: unset;
}

/* To reduce size of Portal footer */
html#page-portal .c-footer {
    --pad-vert: 0;
    --pad-horz: 15px; /* WARNING: any less causes unexplained scrollbar */
}
html#page-portal .c-footer p {
    margin-bottom: revert; /* undo Bootstrap */
}

/* To vertically center text */
#portal-footer p {
    margin-block: revert; /* undo Bootstrap */
}



/* PER CLIENT - CMS */

/* To move footer padding into CMS footer */
#cms-footer {
    padding-block: var(--pad-vert);
}

/* To tweak minor styles */
#cms-footer {
    color: var(--global-color-primary--light);
}

/* Add vertical space between panes, except for aside when it is below others */
/* FAQ: Bootstrap 4 grid does not have a way to do so */
#cms-footer .col.c-pane--nav {
    margin-bottom: 2rem;
}

/* To make text color match on regular text and hyperlinks */
#cms-footer .c-pane--common,
#cms-footer .c-pane--common a {
    color: var(--global-color-primary--xx-light);
}