/*
Theme Name: Sewmini Portfolio
Theme URI: https://example.com
Author: Sewmini Imalsha
Description: A light portfolio theme for a WordPress developer and QA engineer. Developer look at the top, tester look at the bottom. Works with Elementor (Canvas, Full Width and Theme Builder). Pick the palette in Customize > Portfolio settings.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sewmini-portfolio
*/

:root{
  --bg:#F4F1EA;--ink:#1C2420;--muted:#5C6B65;--accent:#3F7D6B;--accent-text:#2F6455;--on-dark:#8FD1B9;
  --highlight:#D9E8E2;--border:#DDD7C8;--thumb:#E6E0D3;--g1:#C4DFD3;--g2:#EFE2C2;--line:rgba(63,125,107,.13);
  --lg1:#2F6455;--lg2:#56B79A;--lg3:#3F7D6B;
  --c1:#7C5FA8;--c1t:#E9E3F2;--c2:#3F7D6B;--c2t:#D9E8E2;--c3:#C8503F;--c3t:#F6DDD7;
}
body.palette-coral{
  --bg:#FAFAF8;--ink:#14161A;--muted:#6B7078;--accent:#E8473C;--accent-text:#C93A30;--on-dark:#FF8A80;
  --highlight:#FFE9E6;--border:#E4E3DE;--thumb:#EEEBE6;--g1:#FFD2CB;--g2:#EDE9F7;--line:rgba(232,71,60,.10);
  --lg1:#C93A30;--lg2:#FF8A80;--lg3:#E8473C;
  --c1:#5B6BD6;--c1t:#E6E9FA;--c2:#1F8A70;--c2t:#D9F0E9;--c3:#D93A2F;--c3t:#FFE3DF;
}
.sp-dev,.sp-test{--sp-bg:var(--bg);--sp-muted:var(--muted);--sp-accent:var(--accent);--sp-hl:var(--highlight);--sp-g1:var(--g1);--sp-g2:var(--g2);--sp-line:var(--line);position:relative;overflow:hidden;box-sizing:border-box}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 Inter,system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.page-content{padding-top:2rem;padding-bottom:3rem}
.page-content h1{margin-bottom:1rem}
.entry{margin-bottom:2rem}

/* ---------- header ---------- */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 0}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:600}
.logo{display:inline-block;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;font-size:2.1rem;line-height:1;letter-spacing:-.03em;padding-right:.12em;color:var(--accent-text);
  background:linear-gradient(115deg,var(--lg1) 0%,var(--lg3) 32%,var(--lg2) 48%,var(--lg3) 64%,var(--lg1) 100%);background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 2.4s ease-out .4s 1 forwards}
.brand:hover .logo{animation:shine 1.2s ease-out 1 forwards}
@keyframes shine{from{background-position:100% 0}to{background-position:0 0}}
.main-nav{display:flex;gap:2rem;color:var(--muted);font-size:.95rem}
.main-nav a:hover{color:var(--accent-text)}
.btn{display:inline-block;border-radius:999px;padding:.7rem 1.4rem;font-weight:500;border:1px solid var(--ink);background:var(--ink);color:#fff;transition:background .2s}
.btn:hover{background:var(--accent-text);border-color:var(--accent-text)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--highlight);border-color:var(--accent)}

/* ---------- hero ---------- */
.hero{text-align:center;padding:4.5rem 0 3.5rem;max-width:50rem;margin:0 auto}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:1.15;margin:1.25rem 0 1.5rem}
.hero .lead{color:var(--muted);font-size:1.1rem;max-width:34rem;margin:0 auto 2rem}
.btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.tags{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}
.eyebrow{display:inline-block;padding:.4rem 1rem;border-radius:999px;background:var(--highlight);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.eyebrow.qa-b{background:var(--accent-text);border-color:var(--accent-text);color:#fff;box-shadow:0 6px 18px -8px var(--accent)}
.eyebrow.qa-b::before{content:"\2713\00a0"}
.rot{display:inline-grid;perspective:700px}
.rot>.eyebrow{grid-area:1/1;justify-self:center;backface-visibility:hidden}
.rot .a{animation:flipA 7s ease-in-out infinite}
.rot .b{animation:flipB 7s ease-in-out infinite}
@keyframes flipA{0%,44%{transform:rotateX(0);opacity:1}50%,94%{transform:rotateX(90deg);opacity:0}100%{transform:rotateX(0);opacity:1}}
@keyframes flipB{0%,44%{transform:rotateX(-90deg);opacity:0}50%,94%{transform:rotateX(0);opacity:1}100%{transform:rotateX(-90deg);opacity:0}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:1rem;padding-bottom:3.5rem}
.step{padding:1.4rem 1rem 1.3rem;text-align:center;border-radius:18px;background:var(--t);border:1px solid color-mix(in srgb,var(--c) 22%,transparent)}
.step .ic{width:3rem;height:3rem;border-radius:14px;background:var(--c);display:grid;place-items:center;margin:0 auto .9rem}
.step svg{width:1.5rem;height:1.5rem;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.step h3{font-size:1rem;font-weight:600}
.step p{font-size:.82rem;color:var(--muted);margin-top:.15rem}
.s1{--c:var(--c1);--t:var(--c1t)}.s2{--c:var(--c2);--t:var(--c2t)}.s3{--c:var(--c3);--t:var(--c3t)}
.step.on{--c:var(--on-dark);--t:var(--ink);border-color:var(--ink)}
.step.on svg{stroke:var(--ink)}
.step.on h3{color:var(--on-dark)}
.step.on p{color:#C9D3CE}

/* ---------- work, cta, footer ---------- */
#work{padding-top:3.5rem}
.label{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.thumb{aspect-ratio:10/7;border-radius:18px;background:var(--thumb);margin-bottom:.9rem}
.work:first-child .thumb{background:var(--ink)}
.work h3{font-size:1rem;font-weight:600}
.work p{font-size:.88rem;color:var(--muted)}
.cta{margin:3.5rem 0;background:var(--ink);color:#fff;border-radius:24px;text-align:center;padding:2.75rem 1.5rem}
.cta h2{font-size:1.6rem;line-height:1.3}
.cta p{color:#C9D3CE;margin:.4rem 0 1.4rem}
.cta .btn{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink);font-weight:600}
.cta .btn:hover{background:#fff;border-color:#fff}
.site-footer{border-top:1px solid var(--border);padding:1.5rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.92rem}
.dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:#3DDC84;margin-right:.6rem}

@media(max-width:760px){
  .main-nav{display:none}
  .steps{grid-template-columns:1fr 1fr;gap:.6rem}
  .works{grid-template-columns:1fr}
  .hero{padding:3rem 0 2.5rem}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .logo{animation:none!important;background-position:50% 0}
  .rot{display:inline-flex;gap:.6rem;flex-wrap:wrap;justify-content:center}.rot .a,.rot .b{animation:none}
}

/* ---------- developer (top) and tester (bottom) backgrounds ----------
   Also usable in Elementor: add the CSS classes  sp-dev sp-code  to the top
   container and  sp-test sp-code  to the bottom container. */
/* TOP: developer look = soft glows + code grid fading out */
.sp-dev {
  background:
    radial-gradient(52rem 30rem at 90% -8%, var(--sp-g1), transparent 65%),
    radial-gradient(40rem 26rem at -6% 18%, var(--sp-g2), transparent 65%),
    radial-gradient(ellipse 80% 75% at 50% 15%, transparent, var(--sp-bg) 75%),
    linear-gradient(var(--sp-line) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(90deg, var(--sp-line) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    var(--sp-bg);
}

/* BOTTOM: tester look = dashed line + ruled lines in the side margins only */
.sp-test {
  border-top: 2px dashed var(--sp-accent);
  background:
    repeating-linear-gradient(to bottom, transparent 0 2.2rem, var(--sp-line) 2.2rem calc(2.2rem + 1px))
      left top / max(0px, calc(50% - 38rem)) 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 2.2rem, var(--sp-line) 2.2rem calc(2.2rem + 1px))
      right top / max(0px, calc(50% - 38rem)) 100% no-repeat,
    linear-gradient(to bottom, var(--sp-bg), color-mix(in srgb, var(--sp-hl) 55%, var(--sp-bg)));
}

/* OPTIONAL faint margin text (class: sp-code), wide screens only.
   Fills the side margins top to bottom: code at the top, tests and checks at the bottom. */
.sp-code::before,
.sp-code::after {
  display: none;
  position: absolute;
  top: 7rem;
  bottom: 2rem;
  width: max(0px, calc(50% - 37rem));
  overflow: hidden;
  white-space: pre;
  font: 500 .8rem/1.9 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--sp-muted);
  opacity: .45;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.sp-code::before { left: 2.5%; }
.sp-code::after  { right: 2.5%; }
.sp-test.sp-code::before,
.sp-test.sp-code::after { top: 4.4rem; line-height: 2.2rem; }
@media (min-width: 1360px) {
  .sp-code::before,
  .sp-code::after { display: block; }
}
.sp-dev.sp-code::before  { content: "// functions.php\00000aadd_action(\00000a  'after_setup_theme',\00000a  'sewmini_setup'\00000a);\00000a\00000afunction sewmini_setup() {\00000a  add_theme_support(\00000a    'title-tag'\00000a  );\00000a  add_theme_support(\00000a    'post-thumbnails'\00000a  );\00000a  register_nav_menus([\00000a    'primary' => 'Main'\00000a  ]);\00000a}\00000a\00000aadd_action(\00000a  'wp_enqueue_scripts',\00000a  'sewmini_assets'\00000a);\00000a\00000aadd_filter(\00000a  'excerpt_length',\00000a  fn() => 24\00000a);\00000a\00000aadd_shortcode(\00000a  'cta',\00000a  'sewmini_cta'\00000a);\00000a\00000afunction sewmini_cta() {\00000a  return render('cta');\00000a}\00000a\00000aremove_action(\00000a  'wp_head',\00000a  'wp_generator'\00000a);\00000a\00000aadd_theme_support(\00000a  'custom-logo'\00000a);"; }
.sp-dev.sp-code::after   { content: "<?php\00000aget_header();\00000a\00000awhile (have_posts()) {\00000a  the_post();\00000a  the_content();\00000a}\00000a\00000aget_footer();\00000a\00000afunction sewmini_assets() {\00000a  wp_enqueue_style(\00000a    'sewmini',\00000a    get_stylesheet_uri()\00000a  );\00000a  wp_enqueue_script(\00000a    'sewmini-js',\00000a    get_theme_file_uri(\00000a      '/app.js'\00000a    )\00000a  );\00000a}\00000a\00000aregister_post_type(\00000a  'project',\00000a  ['public' => true]\00000a);\00000a\00000a$posts = new WP_Query([\00000a  'post_type' => 'project',\00000a  'posts_per_page' => 3\00000a]);\00000a\00000aif ($posts->have_posts()) {\00000a  // loop projects\00000a}\00000a\00000awp_reset_postdata();\00000a\00000a// theme.json loaded\00000a?>"; }
.sp-test.sp-code::before { content: "test('checkout works', () => {\00000a  cy.visit('/shop');\00000a  cy.get('.add').click();\00000a  cy.get('#pay').click();\00000a  cy.url().should(\00000a    'include',\00000a    '/thank-you'\00000a  );\00000a});\00000a\00000a\2713\00a0 layout renders\00000a\2713\00a0 links resolve\00000a\2713\00a0 forms submit\00000a\2713\00a0 images have alt text\00000a\2713\00a0 no console errors\00000a\2713\00a0 sitemap is valid\00000a\2713\00a0 404 page works\00000a\2713\00a0 search works\00000a\2713\00a0 cart updates\00000a\2713\00a0 emails send\00000a\2713\00a0 redirects correct\00000a\2713\00a0 checkout completes"; }
.sp-test.sp-code::after  { content: "\00000a\2713\00a0 mobile 375px\00000a\2713\00a0 tablet 768px\00000a\2713\00a0 desktop 1440px\00000a\2713\00a0 speed under 2s\00000a\2713\00a0 contrast AA\00000a\2713\00a0 keyboard nav\00000a\2713\00a0 focus visible\00000a\2713\00a0 forms validate\00000a\2713\00a0 SSL active\00000a\2713\00a0 backups run\00000a\2713\00a0 plugins updated\00000a\2713\00a0 no broken images\00000a\2713\00a0 cache cleared\00000a\2713\00a0 menu on mobile\00000a\2713\00a0 cookie banner\00000a\2713\00a0 WCAG checks\00000a\2713\00a0 Lighthouse 95+\00000a\2713\00a0 ready to ship"; }