/*<meta />*/

@font-face {
  font-family: "Public Sans Variable";
  src: url("fonts/PublicSans_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans Variable";
  src: url("fonts/PublicSans-Italic_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans Light";
  src: url("fonts/PublicSans_wght.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans_wght.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans Semi Bold";
  src: url("fonts/PublicSans_wght.woff2") format("woff2");
  font-weight: 550;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans Bold";
  src: url("fonts/PublicSans_wght.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans Extra Bold";
  src: url("fonts/PublicSans_wght.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root { /* From Corporate */
  /* PANW palette, copied from the compiled MasterStyleSheet.css so the landing
     page and the Flare portal it hands off to are the same colours. The source
     of truth is less/variables.less in the Flare project; if these drift, that
     file wins. --cyberark-white is kept as an alias because it is referenced in
     four places below and is the one token whose value did not change. */
    --panw-orange: #FA582D;
    --panw-black: #141414;
    --panw-slate: #36424B;
    --panw-warm-gray: #C8C2BE;
    --panw-warm-gray-dark: #7C7875;
    --panw-surface: #F4F4F2;
    --panw-white: #FFFFFF;
    --cyberark-white: #FFFFFF;

  /* Foreground colors (light scheme) */

    --primary-color: #141414;
    --secondary-color: #FA582D;
    --second-color: #FA582D;
    --third-color: #FA582D;
    --fourth-color: #36424B;
    --fifth-color: #7C7875;

    --primary-background: #FFFFFF;
    --secondary-background: #F4F4F2;
    --third-background: #f8f8f8;

    --primary-80: #434343;
    --primary-60: #727272;
    --primary-40: #a1a1a1;
    --primary-20: #d0d0d0;
    --primary-10: #e8e8e8;
    --secondary-80: #fb7956;
    --secondary-60: #fc9b80;
    --secondary-40: #fdbcab;
    --secondary-20: #feded5;
    --secondary-10: #ffeeea;
    --third-80: #fb7957;
    --third-60: #fc9b81;
    --third-40: #fdbcab;
    --third-20: #feded5;
    --third-10: #feeeea;
    --fourth-80: #5e686f;
    --fourth-60: #868e93;
    --fourth-40: #afb3b7;
    --fourth-20: #d7d9db;
    --fourth-10: #ebeced;
    --fifth-80: #969391;
    --fifth-60: #b0aeac;
    --fifth-40: #cbc9c8;
    --fifth-20: #e5e4e3;
    --fifth-10: #f2f2f1;

  /* Font Size */
    --base-font-size:16px;
    --heading-font-size: 25px;

  /* Font Family */
    --variable-font-family: 'Public Sans Variable', Arial, Verdana, 'sans-serif';
    --main-font-family: 'Public Sans', Arial, Verdana, 'sans-serif';
    --light-font-family: 'Public Sans Light', Arial, Verdana, 'sans-serif';
    --semi-bold-font-family: 'Public Sans Semi Bold', Arial, Verdana, 'sans-serif';
    --bold-font-family: 'Public Sans Bold', Arial, Verdana, 'sans-serif';
    --extra-bold-font-family: 'Public Sans Extra Bold', Arial, Verdana, 'sans-serif';
}

html {
    font-size:var(--base-font-size);
    color:var(--primary-color);
}

body {
    font-family: var(--main-font-family);
    background-color:var(--cyberark-white);
}

#whole-container {
    background-color:var(--cyberark-white);
    width:100%;
    max-width:1200px;
    margin:auto;
    padding: 10px 25px 10px 25px;
}

.hidden {
    display:none;
}

nav .corp-logo {
    height:50px;
    background-image: url("img/panw-logo-header.png");
    background-size:180px auto;
    background-repeat:no-repeat;
    background-position:left center;

}

/* The wordmark is a 180x33 raster, so it is pinned to its natural width.
   background-size:contain stretched it to fill the 50px-tall box, which blew
   it up to ~273px, softened it, and ran it underneath this caption. 180px is
   also the width the Flare portal header renders the same file at. */
nav .corp-logo p#logo-title {
    margin-left:200px;
    padding-top:10px;
    font-size:1.25rem;
    font-family:var(--bold-font-family);
}


h1,h2,h3 { /* Shared Heading settings */
    font-family: var(--variable-font-family);
}

h1 {
    font-family:var(--semi-bold-font-family);
    font-weight:300;
}

h2 {/* Section Title */
 font-size:1.6em;
 padding:25px 1px 0;
 margin:0;
 margin-bottom:1px;
 color:var(--primary-color);
 font-weight:200;
 }

 h3 { /* Product Name */
 font-size:1.2em;
 font-weight:300;
 }


div.developers h2, #dev h2  {
 font-size:1.6em;
 padding:25px 0 0 0;
 margin:0;
 padding-bottom:1px;
 margin-bottom:1px;
 color:var(--primary-color);
 font-style:unset;
 font-family:var(--bold-font-family);
 }



 div.developers h3, #dev h3  {
 font-size:1.2em;
 font-style:unset;
 }




p {
    margin-top:0;
    max-width: 99%;
}

header.products {
    padding-top:50px;
}


section {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
    gap: 20px; /* Space between items */
    margin: 20px 0; /* Spacing above and below each section */
    padding: 10px;
    /* background-color: var(--accent-cloud-blue); */
}


.product-box {
    display: flex; /* Use flexbox for consistent row layout */
    align-items: center; /* Vertically align items */
    max-width: 100%; /* Prevent overflow */
    padding: 15px;
    border: 1px solid var(--fifth-40);
    background-color: var(--cyberark-white);
    box-sizing: border-box;
    height: 130px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    font-family: inherit;
}
.product-box h3{
    font-weight:100;
    color:var(--primary-color);
}

.product-box:hover, #tpp-datacenter.active {
    border-color: var(--fourth-color);
}

/* Ensures the image remains the same size and position in all boxes */
.product-image {
    flex: 0 0 60px; /* Fixed width for uniformity */
    height: 60px;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 5px;
    margin-right: 15px; /* Space between image and text */
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-alt {
    background-size:70px 70px;
}

/* Ensures text remains in a single column and takes up most of the space */
.product-text {
    flex: 1; /* Takes up the remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom:15px;
}

.product-box h4 {
    font-weight:unset;
    font-family:var(--light-font-family);
    color:var(--primary-color);
}

.product-box p {
    font-size: .8em;
    font-family: var(--main-font-family);
    color: #333333;
    margin: 0;
}


#tlspc div.product-image { background-image: url('img/TLSProtect.svg'); }
#firefly div.product-image { background-image: url('img/fireflyCA.svg'); }
#k8s div.product-image { background-image: url('img/tlsp_k8.svg'); }
#ztpki div.product-image { background-image: url('img/ztpki.svg'); }
#tpp-datacenter div.product-image { background-image: url('img/TPP.svg'); }
#ssh-datacenter div.product-image { background-image: url('img/SSH.svg'); }
#codesign-datacenter div.product-image { background-image: url('img/CodeSign.svg'); }
#api-cloud-apis div.product-image { background-image: url('img/API_02.svg'); }
#api-datacenter-apis div.product-image { background-image: url('img/API_02.svg'); }#api-guides div.product-image { background-image: url('img/Books.svg'); }
#vCert div.product-image { background-image: url('img/Venafi_Shield.svg'); }
#ngts-docs div.product-image { background-image: url('img/NGTS.svg'); }
#saas-docs div.product-image { background-image: url('img/TLSProtect.svg'); }


footer {
    display: grid; /* Enable grid layout */
    grid-template-rows: auto auto; /* Two rows: auto-sized */
    grid-template-columns: repeat(3, 1fr); /* Three equal-width columns in the second row */
    gap: 20px; /* Space between rows and columns */
    padding: 20px;
    background-color: var(--cyberark-white);
    color: var(--primary-color);
    text-align: center;
}

footer p, footer h3 {
    grid-column: 1 / -1; /* Span all columns in the first row */
    margin: 0; /* Remove default margin */
    text-align: center; /* Center align the text */
    color: var(--primary-color);
}


#datacenter-versions, #ssh-versions, #codesign-versions {
    display: none;
    flex-wrap: wrap; /* Allow items to wrap into rows */
    gap: 20px; /* Space between columns */
    margin-top: 10px;
    padding: 20px;
    border: 1px solid var(--fifth-40);
    background-color: var(--secondary-background);
    border-radius: 5px;
}

#datacenter-versions.active,
#ssh-versions.active,
#codesign-versions.active {
    display:flex; /* Show container when active */
}


#datacenter-versions .version,
#ssh-versions .version,
#codesign-versions .version {
    flex: 1 1 calc(50% - 10px); /* Take up 50% of the width with some spacing */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#datacenter-versions {
    grid-column: 1 / span 2; /* Span the entire width of both product boxes */
}

#ssh-versions {
    grid-column: 2 / span 1;
}

#codesign-versions {
    grid-column: 3 / span 1;
}

#datacenter-versions .version:nth-of-type(1) {
    order: 1;
}

#datacenter-versions .version:nth-of-type(2) {
    order: 2;
}

#datacenter-versions .version:nth-of-type(3) {
    order: 3;
}

#datacenter-versions .version:nth-of-type(4) {
    order: 4;
}

.version h3 {
    margin: 0 0 5px 0;
    font-size: 1.2em;
    color: var(--secondary-color);
}
h3.long { /*adjusting margin for long title*/
    margin-bottom:6px;
}

.version ul li {
    margin: 5px 0;
}

.version ul li a {
    color: var(--primary-color);
    text-decoration: none;
}

.version ul li a:hover {
    text-decoration: underline;
}

footer p.footer-links a {
    color:var(--fourth-80);
    text-decoration:none;
}

footer p.footer-links a:hover {
    color:var(--fourth-80);
    text-decoration:none;
}
footer p.footer-links a:visited, footer p.footer-links a:active {
    color:var(--fourth-80);
    text-decoration:none;
}

footer p.social a i {
    font-size:1.3em;
    border: 1px solid var(--secondary-40);
    border-radius: 5px;
    background-color:var(--primary-color);
    color:var(--cyberark-white);
    padding:4px;
}

.hero {
    width: 100vw; /* Full viewport width */
    margin-left: calc(-50vw + 50%); /* Center the full-width background */
    height: 174px;
    background-color: var(--third-background); /* Full-width background color */
    border-bottom: 1px solid var(--fifth-20);
    border-top: 1px solid var(--fifth-40);
    display: flex;
    justify-content: center; /* Center the content */
}

.hero .hero-content {
    width: 100%;
    max-width: 1200px; /* Match #whole-container */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: url(img/portal-header.svg) center/contain no-repeat;
    padding: 20px;
    background-size:unset;
}

@media (max-width: 850px) {
    header.navigation p {
        display:none;
    }
    section {
        grid-template-columns: 1fr; /* Keep product boxes stacked in one column */
    }

    .product-box {
        flex-wrap: nowrap; /* Prevent wrapping */
        align-items: center; /* Keep items aligned */
        height: auto; /* Allow height to adjust based on content */
        padding: 10px;
		width:90%;
    }

    .product-image {
        flex: 0 0 40px; /* Reduce image size slightly */
        height: 40px;
        background-size: contain;
        margin-right: 10px; /* Reduce space between image and text */
    }

    .product-text {
        flex: 1; /* Allow text to take the remaining space */
        min-width: 0; /* Prevent text from forcing overflow */
        text-align: left;
        overflow-wrap: break-word; /* Ensure long words break properly */
        font-size: 0.9em; /* Reduce text size slightly */
        padding-bottom:12px;
    }

    .product-box h3 {
        font-size: 1em;
        margin-bottom: 3px;
    }

    .product-box p {
        font-size: 0.85em;
        line-height: 1.2;
    }

    #datacenter {
		width:90%;
    }

    #datacenter .product-box,
    #datacenter .dropdown-content {
        margin-bottom:25px;
		grid-column-start:1; /* Makes datacenter product boxes span both columns */
        width:90%;
    }
	#datacenter-versions.active,
    #ssh-versions.active,
    #codesign-versions.active {
	    display:block; /* Show container when active */

	}

    #datacenter-versions .version,
    #ssh-versions .version,
    #codesign-versions .version { /* Makes versions show up in a single column */
        flex:unset;
    }

	#datacenter-versions.inactive,
    #ssh-versions.inactive,
    #codesign-versions.inactive {
		display:none;
	}

    #tpp-datacenter {
        order:1;
    }
    #ssh-datacenter {
        order:3;
    }
    #codesign-datacenter {
        order:5;
    }
    #datacenter-versions { /* Moves hidden box to second position in this layout */
        order:2;
    }
    #ssh-versions { /* Moves hidden box to third position in this layout */
        order:4;
    }
    #codesign-versions { /* Moves hidden box to fourth position in this layout */
        order:5;
    }
}