/* =========  VARIABLES (optional, easy theming)  ========= */
:root {
    --dp-header-color: #444; /* header text */
    --dp-primary: #00639e;       /* header & main buttons */
    --dp-primary-light: #3495cf; /* lighter variant */
    --dp-accent-green: #3ba946;  /* matches docs screenshots */
    --dp-accent-green-dark: #2e7b34;
    --dp-link: #1155a3;
    --dp-border: #ccc;
    --dp-border-light: #d9d9d9;
    --dp-bg-light: #f0f0f0;
    --dp-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* =========  HEADINGS ========= */
.dpw-body h1{
    font-size:36px;
    margin:20px 0 10px;
    text-align:center;
    color: var(--dp-header-color);
}
.dpw-body h2{
    margin:30px 0 20px;
    text-align:center;
    color: var(--dp-header-color);
}

/* =========  PRODUCTS ========= */
.products{
    display:flex;
    gap:20px;
    justify-content:center;
    margin:20px 0;
    padding:0 20px;
    flex-wrap:wrap;
}
.product{
    flex:1 1 250px;
    max-width:350px;
    border:1px solid var(--dp-border);
    border-radius:5px;
    /*background:var(--dp-bg-light);*/
    background:#f8f8f8;
    padding:20px;
    text-align:center;
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
    box-shadow:var(--dp-shadow);
}
/*
.product:hover{
  border-color:var(--dp-primary);
  box-shadow:var(--dp-shadow);
  transform:translateY(-2px);
}
*/
.product h2{font-size:20px;margin:0 0 10px;}
.product p{/*font-size:14px;*/color:#555;margin:0 0 15px;}
.product a{
    display:inline-block;
    margin:5px 0;
    padding:10px 15px;
    background:var(--dp-primary);
    color:#fff;
    text-decoration:none;
    border-radius:5px;
    transition:background .15s ease,transform .15s ease;
}
.product a:hover{
    background:var(--dp-primary-light);
    /*transform:translateY(-2px);*/
}
/* action (green) */
.product a.action-button{
    background:var(--dp-accent-green);
}
.product a.action-button:hover{
    background:var(--dp-accent-green-dark);
}
/* secondary (blue) */
.product a.action-button + a{
    background:var(--dp-primary-light);
}
.product a.action-button + a:hover{
    background:var(--dp-primary);
}

/* =========  TILES ========= */

/* —— accordion wrapper —— */
.views-accordion{
    max-width:870px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

/* —— card shell —— */
.view-card{
    border:2px solid var(--dp-border-light);
    border-radius:5px;
    overflow:hidden;
    background:#fff;
}
.view-card[open]{border-color:var(--dp-primary);box-shadow:var(--dp-shadow);}

/* —— summary row —— */
.view-card summary{
    list-style:none;
    display:flex;
    align-items:center;
    gap:1rem;
    cursor:pointer;
    padding:.5rem;
    transition:border-color .15s,box-shadow .15s;
    position:relative;            /* anchors the labels */
}

.view-card summary > span {
    display: block;
}

/* ——— 1 · VISUAL FEEDBACK ON HOVER ——— */
.view-card summary:hover{
    background:var(--dp-bg-light);            /* soft tint */
    box-shadow:var(--dp-shadow);              /* same depth as “open” state */
    border-color:var(--dp-primary);           /* subtle cue */
    transition:background .15s,box-shadow .15s,border-color .15s;
}

/* ——— 2 · EXPAND/COLLAPSE ICON ——— */
/* draw a chevron with a 2 px border, rotate it for down/up */
.view-card summary::after{
    content:"";
    width:14px;
    height:14px;
    border:2px solid var(--dp-primary);
    border-top:none;
    border-left:none;
    transform:rotate(45deg);                  /* ▾ */
    position:absolute;
    right:14px;                               /* same gutter as labels */
    top:50%;
    margin-top:-7px;                          /* center vertically */
    transition:transform .25s ease;
}
.view-card[open] summary::after{
    transform:rotate(-135deg);                /* ▴ */
}

/* keep the icon visible on hover tint */
.view-card summary:hover::after{
    border-color:var(--dp-primary);
}


/* —— thumbnail, keeps 4:3 —— */
.thumb{
    flex:0 0 200px;               /* ≈ original width */
    aspect-ratio:4/3;
    overflow:hidden;
    border:1px solid var(--dp-border-light);
    border-radius:3px;
}
.thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top left;
}

/* —— title / right side —— */
.summary-text{
    flex:1 1 auto;
    min-width:0;                 /* let it shrink on mobile */
    padding-right: 30px;
}
.view-title{
    display: block;
    margin: 15px 0;
    font-size:18px;
    font-weight:600;
    line-height:1.3;
}

/* —— corner labels —— */
.labels{
    display: block;
    margin-top: 15px;
    /*      position:absolute;
          top:6px;
          right:8px;*/
}
.label{
    display:inline-block;
    padding:2px 6px;
    font-size:12px;
    color:#fff;
    border-radius:3px;
}
.label-lite{background:var(--dp-accent-green);}
.label-pro {background:var(--dp-primary);}

/* —— expanded details —— */
.view-details{
    border-top:2px solid var(--dp-border-light);
    padding:1rem 1.25rem 1.25rem;
    line-height:1.45;
}
.view-details a{color:var(--dp-link);text-decoration:none;}
.view-details a:hover{text-decoration:underline;}

/* —— focus ring —— */
.view-card summary:focus-visible{
    outline:2px solid var(--dp-primary);
    outline-offset:-2px;
}

.features {
    /*display: inline-flex;*/
    /*flex-wrap: wrap;*/
    /*align-items: baseline;*/
    /*gap: .4rem;*/
    line-height: 1.6;
}

.features > strong {
    margin-right: .1rem;
}

.features span + span::before {
    content: " • ";
}

/* Firefox list-bullet fix */
details > summary::-moz-list-bullet{font-size:0;}

/* =========  TUTORIAL CARDS ========= */
.tutorials{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
}
.tutorial{
    width:400px;
    border:1px solid var(--dp-border);
    border-radius:5px;
    overflow:hidden;
    background:#fff;
    display:flex;
    flex-direction:column;
}
.tutorial-thumb{width:100%;height:200px;overflow:hidden;}
.tutorial-thumb img{width:100%;height:100%;object-fit:cover; object-position: top left;}
.tutorial-text{padding:15px;flex-grow:1;}
.tutorial-text h3{margin:0 0 10px;font-size:18px;}
.tutorial-text p{margin:0 0 10px;font-size:14px;color:#555;}
.tutorial-text a{text-decoration:none;color:var(--dp-link);}
.tutorial-text a:hover{text-decoration:underline;}

/* ─── Trusted-By logo strip ────────────────────────────── */
.section-logos{
    margin-top:40px;
    margin-bottom: 80px;
}

.section-logos h2,
.section-logos h3{
    text-align:center;
}

.section-logos h3.note{
    color:#555;
    font-weight:400;
    font-size:18px;
}

/* the flex wrapper generated by <p> */
.section-logos p{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:40px;                     /* more modern than margin */
    padding:0 10px;
}

.section-logos p img{
    max-width:110px;              /* primary size guard */
    max-height:60px;              /* prevents very tall logos */
    width:auto;
    height:auto;
    flex:0 0 auto;                /* don’t stretch */
}

/* phone: compress a little so two logos fit side-by-side */
@media screen and (max-width:480px){
    .section-logos p img{
        max-width:90px;
        max-height:50px;
    }
}