/*
 * Doc page styles
 */

body {
 font-family: "Effra", "Source-Sans-Pro", sans-serif;
}
 
div.toastTechDocCardLink {
 height: 200px;
 position: relative;
}
 
div.toastTechDocCardLink div.mediaobject {
 position: absolute;
 z-index: 1;
 bottom: 0px;
 right: 0px;
 opacity: 0.2;
}

div.toastTechDocCardLink img {
 opacity: 0.5;
}

.techDocHome .preface .titlepage {
 display: none;
}

/* Background image for techDocHome primary content */
#primaryContent.techDocHome {
 background-image: url('../images/mosaic-BG-tiled.png');
 background-repeat: repeat;
 background-position: top left;
 background-size: auto;
 background-attachment: local;
 position: relative;
 padding-left: 10vw;
 padding-right: 10vw;
}

/* Increase spacing for paragraphs in docHomeAudienceQuickStart and docHomeAudienceTypes */
.docHomeAudienceQuickStart p, .docHomeAudienceTypes p {
 margin-top: 2rem;
 margin-bottom: 2rem;
}

#primaryContent.techDocHome {
 padding-top: 3rem;
}

#primaryContent.techDocHome div.exploreDocumentation {
 padding-top: 3rem;
}

/* Add horizontal line before each section div in techDocHome */
#primaryContent.techDocHome div.exploreDocumentation::before {
 content: '';
 display: block;
 width: 90vw;
 height: 3px;
 background-color: #FF4C00;
 position: absolute;
 left: 50vw;
 transform: translateX(-50%);
 margin-bottom: 3rem;
}

/* Increase font size for call-to-action paragraphs */
p.frontPageCallToAction {
 font-size: 1.1rem;
 margin-top: 1rem;
 margin-bottom: 1.5rem;
}

#primaryContent.techDocHome h3, #primaryContent.techDocHome p.frontPageCallToAction {
    background-color: white;
    border-radius: 0.5rem;
    padding: .5rem;
    display: block;
    width: fit-content;
    margin-top: 0rem;
   }

/* Add solid background to formalpara-block divs in techDocHome */
#primaryContent.techDocHome .docHomePageFormalPara .formalpara-title {
 background-color: white;
 border-radius: 0.5rem;
 padding: .5rem;
 display: inline-block;
 margin-bottom: 0.5rem;
}

#primaryContent.techDocHome .docHomePageFormalPara p.frontPageCallToAction {
 background-color: white;
 border-radius: 0.5rem;
 padding: .5rem;
 display: inline-block;
 margin-top: 0.5rem;
}

/* Set font size for h2 elements in techDocHome */
#primaryContent.techDocHome h2 {
 font-size: 1.25rem;
 color: rgba(102, 102, 102);
}

/* Combined styling for h5 elements and formalpara-title span elements in techDocHome */
#primaryContent.techDocHome h3 {
 font-size: 1.5rem;
 font-family: "Effra", Arial;
 --tw-text-opacity: 1;
 color: rgba(102, 102, 102, var(--tw-text-opacity));
 margin-bottom: 15px;
}

#primaryContent.techDocHome div.exploreDocumentation h3 {
 margin-top: 3rem;
}

/* Combined styling for h5 elements and formalpara-title span elements in techDocHome */
#primaryContent.techDocHome h5,
#primaryContent.techDocHome .formalpara-title span {
 font-size: 1.25rem;
 font-family: "Effra", Arial;
 --tw-text-opacity: 1;
 color: rgba(102, 102, 102, var(--tw-text-opacity));
 margin-top: 5px;
 margin-bottom: 15px;
}

/* Styles for tables in docHomeAudienceTypes */
.docHomeAudienceTypes table {
 border: none;
 border-collapse: separate;
 border-spacing: 0;
 width: 80vw;
 margin: 0;
 margin-left: calc(-40vw + 50%);
 margin-bottom: 4rem;
 margin-top: 3rem;
}

.docHomeAudienceTypes table tr {
 border: none;
 display: flex;
 align-items: stretch;
 width: 80vw;
 gap: 4vw;
 padding: 0 4vw;
}

.docHomeAudienceTypes table td {
 border: none;
 padding: 2rem;
 background-color: white;
 flex: 1;
}

/* Styles for tables in docHomeAudienceQuickStart */
.docHomeAudienceQuickStart table {
 border: none;
 border-collapse: separate;
 border-spacing: 0;
 width: 72vw;
 margin: 0;
 margin-left: calc(-36vw + 50%);
}

.docHomeAudienceQuickStart table tr {
 border: none;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 72vw;
 margin-bottom: 2rem;
}

.docHomeAudienceQuickStart table tr:last-child {
 margin-bottom: 0;
}

.docHomeAudienceQuickStart table td {
 border: none;
 padding: 2rem;
 background-color: white;
 width: 72vw;
}

/* Make docHomeAudience containers appear side by side within their container */
.docHomeAudienceContainer {
 display: flex;
 gap: 2%;
 align-items: stretch;
}

.docHomeAudienceContainer .docHomeAudience {
 width: 48%;
 border: none;
 padding: 2rem;
 background-color: white;
 flex: 1;
 box-sizing: border-box;
 /* Add rounded corners like rounded-lg */
 border-radius: 0.5rem;
 /* Add shadow like shadow-lg */
 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.09), 0 4px 5px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.04);
}

/* Styles for docHomeNextSteps div elements */
div.docHomeNextStepsStandardApiAccess,
div.docHomeNextStepsAnalyticsApiAccess,
div.docHomeNextStepsToastPlatformAdministrator,
div.docHomeNextStepsPartnerApiAccess,
div.docHomeNextStepsCustomApiAccess {
 display: none;
 background-color: #f8f9fa;
 border: 1px solid #e9ecef;
 border-radius: 0.375rem;
 padding: 1.5rem;
 margin-bottom: 1rem;
 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

div.docHomeNextStepsStandardApiAccess:hover,
div.docHomeNextStepsAnalyticsApiAccess:hover,
div.docHomeNextStepsToastPlatformAdministrator:hover,
div.docHomeNextStepsPartnerApiAccess:hover,
div.docHomeNextStepsCustomApiAccess:hover {
 background-color: #ffffff;
 border-color: #d1d5db;
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 transform: translateY(-1px);
 transition: all 0.2s ease-in-out;
}

/* Styles for docHomeAudienceDescription layout */
.docHomeAudienceDescription {
 display: flex;
 align-items: flex-start;
 gap: 1rem;
}

.docHomeCheckboxContainer {
 flex-shrink: 0;
 margin: 0.5rem;
 align-self: flex-start;
}

.docHomeAudienceDescriptionPara {
 flex: 1;
 margin: 0.5rem;
}

/* Custom angle icon styling with Toast branding */
.checkbox-tech-doc-home {
 /* Hide the default checkbox */
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 
 /* Custom angle icon styling */
 width: 20px;
 height: 20px;
 background-color: transparent;
 border: none;
 cursor: pointer;
 position: relative;
 transition: all 0.2s ease-in-out;
}

.checkbox-tech-doc-home::before {
 /* Create angle icon (caret) */
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 width: 8px;
 height: 8px;
 border: solid #ff6900; /* Toast orange angle */
 border-width: 0 2px 2px 0;
 transform: translate(-50%, -50%) rotate(-45deg); /* Point to the right (hidden state) */
 transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.checkbox-tech-doc-home:hover::before {
 border-color: #5069C3; /* Toast blue on hover */
}

.checkbox-tech-doc-home:checked::before {
 transform: translate(-50%, -50%) rotate(45deg); /* Point down (visible state) */
 border-color: #ff6900; /* Reset to Toast orange when checked */
}

.checkbox-tech-doc-home:focus {
 outline: none;
}

.checkbox-tech-doc-home:focus::before {
 border-color: #5069C3; /* Toast blue on focus */
}

.checkbox-tech-doc-home:not(:hover):not(:focus)::before {
 border-color: #ff6900; /* Ensure Toast orange when not hovered or focused */
}