content.css

/*
    Home to styles relating to consumed content. Includes these types of pages:
        - Learning Path & Tools
            Content boxes
            Tool    normal content
            LP      normal content
            LP      review
            LP      next steps            
*/





/* Box around content (learning paths and tools) */
div.content-box {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;

    margin-top: 16px;

    border-style: solid;
    border-width: 1px;
    border-radius: 5px;

    border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
    background-color: rgba(31,32,35,0.75);  /* var(--arm-color-base) at 75% transparency */
}
html[theme="light"] div.content-box {
    background-color: white;
}


/* Spacing for content, surrounded by markdown-content-div (learning paths and tools) */
div.markdown-content-div {
    padding-top: 16px; /* padding at top by default */
}
div.markdown-content-div > p {      
    margin-left: 16px;
    margin-top: 16px;       /* reverse top and bottom 16 and 0 to better flow text */
    margin-bottom: 0px;
}

div.markdown-content-div > ul,
div.markdown-content-div > ol {
    margin-top: 16px;
    margin-left: 32px;
    margin-bottom: 16px;
}

div.markdown-content-div > div.code-tabpane {
    box-sizing: border-box;
    margin-left: 16px;
    margin-top: 8px;
}
html[theme="dark"]  div.markdown-content-div > div.code-tabpane { 
    --ads-horizontal-tabs-navigation-background-color: var(--arm-color-surface); 
    --ads-horizontal-tabs-tab-content-background-color: var(--arm-color-surface); 
}

/*
div.markdown-content-div > table {
    width: max-content;
    margin-top: 16px;
    margin-left: 16px;
    margin-bottom: 24px;
}
*/
html[theme="light"] div.markdown-content-div > table tbody { background-color: var(--arm-white); }
html[theme="dark"]  div.markdown-content-div > table tbody { background-color: var(--arm-color-base); }


div.markdown-content-div > div.code-toolbar {
    margin-left: 16px;
    margin-right: 16px;         /*provide spacing from right side*/
}

/* If a header is the first child of markdown-content-div, it should add no extra padding (already done by markdown-content-div for all) */
div.markdown-content-div h1,
div.markdown-content-div h2,
div.markdown-content-div h3 {
    margin-top: 48px;
}
div.markdown-content-div h4,
div.markdown-content-div h5,
div.markdown-content-div h6 {
    margin-top: 32px;
}

div.markdown-content-div h3 {   font-weight: 400; } /* Increase h3 font weight to normal to make more readable for regular reading */


/* Increase table font */
table {
    font-size: var(--ads-font-size-small);
}
@media (min-width: 576px) {
    table {
        font-size: var(--ads-font-size-large);
    }
}

/* Fix codeblock spacing in content when only direct decendent of paragraph (not including formatted code blocks, which are in a 'pre' element) (add space before and after, not done right) */
p > code {
    margin-left: 4px;
    margin-right: 4px;
}




/* Notice box */
ads-card.notice-callout {
    width: 80%;
    margin-left: 48px;
    margin-top: 8px;
    margin-bottom: 8px;

    --ads-card-border-color: var(--arm-web-safe-green);
    --ads-card-border-color-hover: var(--arm-web-safe-green);
    --ads-card-border-width: 3px;
}
html[theme='dark'] ads-card.notice-callout {
    --ads-card-border-color: var(--arm-green);
    --ads-card-border-color-hover: var(--arm-green);
}

ads-card.notice-callout p {
    margin: 8px 8px 4px 8px;    /* top right bottom left */
}


/* Images */

img.content-uploaded-image {
    max-width: 100%;
    height: auto;
}

img.content-uploaded-image.centered {
    display: block;
    text-align: center; /* moves alt text if image not displayed */
    font-style: italic;
    margin-right: auto; /* you can replace the vertical '0.7rem' by whatever floats your boat, but keep the horizontal 'auto' for this to work */
    margin-left: auto;
}

.content-image-caption {
    /* have to style the span like a paragraph, required for nesting caption in default markdown configruation */
    display: block; /* or block, depending on the desired layout */
    font-style: italic;
    font-weight: 500;
    margin-top: 0px;
    font-size: 1rem;
}

.content-image-caption.centered {
    text-align: center;
}




/* Review page divs */

div.answer {
    max-width: 100%;
}

div.answer label {
    word-break: break-word; 
    white-space: normal;
}

/* Horizontal Tabs */
/**********************/
.normal-tabpane {
    box-sizing: border-box;
    margin-left: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
    
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;

    background-color:                                  var(--arm-color-surface);
    --ads-horizontal-tabs-navigation-background-color: var(--arm-color-surface); 
}
.normal-horizontal-tabs {
    --ads-horizontal-tabs-tab-color: white;
    --ads-horizontal-tabs-tab-color-active: var(--arm-orange);
    --ads-horizontal-tabs-underline-color: var(--arm-orange);

    --ads-horizontal-tabs-tab-color-hover: var(--arm-green);
    --ads-horizontal-tabs-tab-content-background-color: var(--arm-color-footing);
}

.normal-horizontal-tabs table, .normal-horizontal-tabs p {
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
}
.normal-horizontal-tabs table{
    padding-bottom: 8px;
}
.normal-horizontal-tabs table thead th {
    background-color: var(--arm-color-footing);
    color: var(--arm-light-grey);
}
.normal-horizontal-tabs table thead th, .normal-horizontal-tabs table tbody td {
    border: 1px solid var(--arm-black);
}



/* Tags */
/***********************************/   
html[theme='light'] ads-tag {
    --ads-tag-color: var(--arm-black);
    --ads-tag-border-color: var(--arm-dark-grey);
    --ads-tag-background-color: white;

    --ads-tag-color-hover: var(--arm-blue);
    --ads-tag-border-color-hover: var(--arm-blue);
    --ads-tag-background-color-hover: white;
}



/* select every P and H1,2,3,4,5,6 that is the first child of markdown-content-div to have 0 top margin */
div.markdown-content-div > h1:first-child,
div.markdown-content-div > h2:first-child,
div.markdown-content-div > h3:first-child,
div.markdown-content-div > h4:first-child,
div.markdown-content-div > h5:first-child,
div.markdown-content-div > h6:first-child,
div.markdown-content-div > p:first-child {
    margin-top: 0px;
}