/*
Theme Name: Devfolio
Theme URI: https://example.com
Author: Website Developer
Description: Portfolio theme for web developers. Shows each website in desktop and phone frames with scrollable previews and a work report. Every page is editable in the WordPress editor.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: devfolio
*/

:root{
  --paper:#edf0f2;
  --card:#ffffff;
  --ink:#16212b;
  --muted:#5a6773;
  --line:#d5dbe1;
  --accent:#0b7a75;
  --accent-ink:#ffffff;
  --sand:#f2b134;
  --radius:10px;
  --wrap:1180px;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em;max-width:72ch}
.dp-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.screen-reader-text{position:absolute;left:-9999px}

/* Header */
.dp-header{position:sticky;top:0;z-index:50;background:rgba(237,240,242,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.dp-header .dp-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.dp-brand{font:700 1.25rem var(--serif);color:var(--ink);text-decoration:none}
.dp-brand img{max-height:44px;width:auto;display:block}
.dp-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.dp-nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;padding:6px 0;border-bottom:2px solid transparent}
.dp-nav a:hover,.dp-nav .current-menu-item>a{border-color:var(--accent)}
.dp-btn,.wp-block-button__link{display:inline-block;background:var(--accent);color:var(--accent-ink)!important;padding:12px 22px;border-radius:var(--radius);font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:.98rem}
.dp-btn:hover,.wp-block-button__link:hover{filter:brightness(1.1)}
.dp-btn--ghost,.is-style-outline .wp-block-button__link{background:transparent;color:var(--ink)!important;border:2px solid var(--ink)}
.dp-burger{display:none;background:none;border:2px solid var(--ink);border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer}

/* Content */
.dp-main{min-height:60vh}
.dp-page{padding:56px 0 80px}
.dp-page>.dp-wrap>*:not(.alignwide):not(.alignfull){max-width:860px}
.alignwide{max-width:var(--wrap)}
.alignfull{max-width:none}
.dp-section{padding:72px 0}

/* Hero (add class "dp-hero" to a Group block) */
.dp-hero{background:var(--ink);color:#fff;padding:96px 24px 88px;margin:0}
.dp-hero>*{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.dp-hero h1{max-width:18ch;margin-bottom:.4em}
.dp-hero p{color:#c9d3dc;font-size:1.15rem}
.dp-hero .dp-eyebrow{color:var(--sand);font-weight:700;font-size:.95rem;margin-bottom:1em}
.dp-hero .wp-block-buttons{margin-top:28px;gap:14px}
.dp-hero .is-style-outline .wp-block-button__link{color:#fff!important;border-color:#fff}
.dp-block{padding:72px 24px;max-width:var(--wrap);margin:0 auto}
.dp-cta{background:var(--accent);color:#fff;padding:72px 24px;text-align:center}
.dp-cta p{margin-left:auto;margin-right:auto}
.dp-cta .wp-block-button__link{background:#fff;color:var(--accent)!important}

/* Project cards */
.dp-grid{display:grid;gap:28px;grid-template-columns:repeat(var(--cols,3),1fr)}
.dp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.dp-card__media{display:block;position:relative;background:#dfe5ea;padding:22px 22px 0;text-decoration:none}
.dp-mini{background:#fff;border-radius:8px 8px 0 0;overflow:hidden;box-shadow:0 8px 24px rgba(22,33,43,.18);aspect-ratio:16/10;position:relative}
.dp-mini .dp-scroll{height:100%}
.dp-mini img{display:block;width:100%}
.dp-mini .dp-live{height:100%}
.dp-minip{position:absolute;right:30px;bottom:0;width:22%;aspect-ratio:9/18;background:#16212b;border-radius:14px 14px 0 0;padding:5px 4px 0;box-shadow:0 8px 24px rgba(22,33,43,.3)}
.dp-minip .dp-scroll{height:100%;border-radius:10px 10px 0 0;overflow:hidden;background:#fff}
.dp-card__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.dp-card__body h3{margin:0}
.dp-card__body h3 a{color:var(--ink);text-decoration:none}
.dp-card__body p{color:var(--muted);font-size:.95rem;margin:0}
.dp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.dp-tag{font-size:.8rem;font-weight:600;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 11px;color:var(--muted)}

/* Device showcase */
.dp-devices{margin:8px 0 40px}
.dp-switch{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;margin-bottom:22px}
.dp-switch button{background:transparent;border:0;padding:8px 18px;font:600 .9rem var(--sans);cursor:pointer;color:var(--ink)}
.dp-switch button[aria-pressed="true"]{background:var(--ink);color:#fff}
.dp-stage{display:flex;align-items:flex-end;justify-content:center;gap:36px;background:#dfe5ea;border-radius:16px;padding:44px 32px 0;overflow:hidden}
.dp-desktop{flex:1 1 auto;max-width:860px;min-width:0;background:#fff;border-radius:10px 10px 0 0;box-shadow:0 14px 40px rgba(22,33,43,.22)}
.dp-chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#e9edf0;border-radius:10px 10px 0 0;border-bottom:1px solid var(--line)}
.dp-chrome i{width:11px;height:11px;border-radius:50%;background:#c3ccd4;display:block}
.dp-addr{margin-left:12px;flex:1;background:#fff;border-radius:6px;padding:3px 12px;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-desktop .dp-screen{height:480px;position:relative;overflow:hidden}
.dp-phone{flex:0 0 250px;background:#16212b;border-radius:34px 34px 0 0;padding:12px 10px 0;box-shadow:0 14px 40px rgba(22,33,43,.35);position:relative}
.dp-phone:before{content:"";display:block;width:70px;height:6px;border-radius:6px;background:#2d3a47;margin:0 auto 9px}
.dp-phone .dp-screen{height:500px;background:#fff;border-radius:22px 22px 0 0;overflow:hidden;position:relative}
.dp-devices[data-view="desktop"] .dp-phone{display:none}
.dp-devices[data-view="phone"] .dp-desktop{display:none}
.dp-scroll{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.dp-scroll img{display:block;width:100%;height:auto}
.dp-live{position:absolute;inset:0;overflow:hidden}
.dp-live iframe{border:0;transform-origin:0 0;background:#fff;position:absolute;left:0;top:0}
.dp-empty{display:grid;place-items:center;height:100%;color:var(--muted);font-size:.9rem;padding:20px;text-align:center}
.dp-hint{font-size:.88rem;color:var(--muted);margin-top:10px}

/* Single project */
.dp-proj-head{padding:56px 0 24px}
.dp-proj-head p{font-size:1.15rem;color:var(--muted)}
.dp-proj-head .dp-btn{margin-top:8px}
.dp-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding-bottom:72px}
.dp-report h2{margin-top:1.6em}
.dp-report h2:first-child{margin-top:0}
.dp-facts{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;align-self:start;position:sticky;top:90px}
.dp-facts h3{font-size:1.05rem}
.dp-facts dl{margin:0}
.dp-facts dt{font-size:.82rem;color:var(--muted);margin-top:14px}
.dp-facts dd{margin:2px 0 0;font-weight:600}
.dp-list{padding-left:1.1em;margin:0 0 1.2em}
.dp-list li{margin-bottom:.35em}
.dp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:12px 0 28px}
.dp-stat{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--radius);padding:16px 18px}
.dp-stat b{display:block;font:700 1.8rem var(--serif)}
.dp-stat span{color:var(--muted);font-size:.9rem}
.dp-nextprev{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:28px 0 56px}

/* Footer */
.dp-footer{background:var(--ink);color:#c9d3dc;padding:48px 0 32px;font-size:.95rem}
.dp-footer a{color:#fff}
.dp-footer .dp-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.dp-footer h4{color:#fff;font-size:1.1rem}
.dp-footer ul{list-style:none;padding:0;margin:0;display:flex;gap:18px;flex-wrap:wrap}
.dp-copy{width:100%;border-top:1px solid #2d3a47;padding-top:20px;color:#8fa0af;font-size:.85rem}

@media(max-width:960px){
  .dp-grid{grid-template-columns:repeat(2,1fr)}
  .dp-layout{grid-template-columns:1fr}
  .dp-facts{position:static}
  .dp-stage{flex-direction:column;align-items:center;gap:28px;padding:28px 16px 0}
  .dp-desktop{width:100%}
}
@media(max-width:700px){
  .dp-burger{display:block}
  .dp-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 24px}
  .dp-nav.is-open{display:block}
  .dp-nav ul{flex-direction:column;gap:10px}
  .dp-grid{grid-template-columns:1fr}
  .dp-desktop .dp-screen{height:360px}
  .dp-hero{padding:64px 20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}