/*
Theme Name: Sharaf Visuals
Author: Sharaf
Description: Minimal portfolio theme built for Elementor. The homepage is a real Elementor page (installed automatically) so every heading, row and link is editable visually. Includes a light/dark toggle, a Writing list driven by blog posts (with a separate blog thumbnail) and a built-in contact form.
Version: 3.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: sharaf-visuals
*/

/* ---------- Colour tokens (light / dark) ---------- */
:root{
  --bg:#ffffff; --text:#141414; --gray:#777777; --gray2:#8c8c8c;
  --border:#e8e8e8; --chip:#f0f0f0; --panel:#f1f1f1; --field:#ffffff; --field-border:#e6e6e6;
  --btn-bg:#171717; --btn-text:#ffffff; --icon:#8a8a8a;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#111111; --text:#f0f0f0; --gray:#a3a3a3; --gray2:#8a8a8a;
  --border:#2c2c2c; --chip:#1f1f1f; --panel:#1a1a1a; --field:#111111; --field-border:#303030;
  --btn-bg:#f0f0f0; --btn-text:#111111; --icon:#9a9a9a;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
/* Elementor Canvas can apply its own page background. Keep the canvas synced with the theme tokens. */
html body.elementor-page,
html body.elementor-page #page,
html body.elementor-page #content,
html body.elementor-page .elementor{background-color:var(--bg)!important;}

/* Point Elementor's global fonts AND colours at the theme, so anything you add in
   Elementor (new headings, text, buttons) automatically follows light/dark mode. */
body[class*="elementor-kit-"]{
  --e-global-typography-primary-font-family:"Inter";--e-global-typography-secondary-font-family:"Inter";
  --e-global-typography-text-font-family:"Inter";--e-global-typography-accent-font-family:"Inter";
  --e-global-color-primary:var(--text);--e-global-color-secondary:var(--text);
  --e-global-color-text:var(--gray);--e-global-color-accent:var(--text);
}
.sv-toggle svg,.sv-thumb svg,.sv-avatar svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Make Elementor widgets inherit the theme typography instead of the kit defaults */
.sv-root .elementor-widget-heading .elementor-heading-title,
.sv-root .elementor-widget-text-editor,
.sv-root .elementor-widget-text-editor p{font:inherit;color:inherit;margin:0;letter-spacing:inherit;text-transform:none}
.sv-root .elementor-widget:not(:last-child){margin-block-end:0;margin-bottom:0}
.sv-root .elementor-button{background-color:var(--btn-bg);color:var(--btn-text);border-radius:8px;font-family:inherit}
.e-con.sv-c{padding:0;margin:0;gap:0;min-width:0}

/* ---------- Page frame (content column = 492px) ---------- */
.sv-wrap,.e-con.sv-root{width:100%;max-width:540px;margin-left:auto;margin-right:auto;padding:72px 24px 96px}
.sv-wrap{display:block}
.e-con.sv-root{display:flex;flex-direction:column;align-items:stretch}

/* ---------- Top bar ---------- */
.sv-topbar,.e-con.sv-topbar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:56px}
.sv-brand,.sv-root .sv-brand{font-size:15px;font-weight:600;line-height:1.3;color:var(--text);text-decoration:none}
html body .sv-toggle{width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;line-height:1}
html body .sv-toggle:hover,html body .sv-toggle:focus{background:var(--chip);color:var(--text);border-color:var(--border)}
.sv-toggle svg{width:15px;height:15px;display:block}
.sv-toggle .sv-moon{display:none}
html[data-theme="dark"] .sv-toggle .sv-sun{display:none}
html[data-theme="dark"] .sv-toggle .sv-moon{display:block}

/* ---------- Hero ---------- */
.sv-avatar{width:64px;height:64px;border-radius:12px;background:var(--chip);color:var(--icon);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:24px}
.sv-root .sv-avatar.elementor-widget{width:64px;height:64px;flex:none;max-width:64px}
.sv-root .sv-avatar.elementor-widget:not(:last-child){margin-bottom:24px}
.sv-avatar .elementor-widget-container{width:100%;height:100%}
.sv-avatar img{width:100%;height:100%;max-width:none;object-fit:cover;display:block;border-radius:12px}
.sv-h1,.sv-root .sv-h1{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--text)}
.sv-root .sv-sub{font-size:16px;line-height:1.7;color:var(--gray);max-width:400px;margin-top:18px}
.sv-root .sv-sub strong{font-weight:400;color:var(--text)}
.sv-root .sv-now{font-size:12px;line-height:1.5;color:var(--gray);margin-top:16px}
.sv-root .sv-now strong{font-weight:500;color:var(--text)}

/* ---------- Sections & rows ---------- */
.sv-section,.e-con.sv-section{display:flex;flex-direction:column;margin-top:64px}
.sv-sechead,.e-con.sv-sechead{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--border)}
.sv-root .sv-sec-l{font-size:14px;font-weight:600;line-height:1.5;color:var(--text)}
.sv-root .sv-sec-r{font-size:12px;line-height:1.5;color:var(--gray2)}
.sv-row,.e-con.sv-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 0;border-bottom:1px solid var(--border)}
.sv-row:last-child,.e-con.sv-row:last-child{border-bottom:0}
html body a.sv-row{color:inherit;text-decoration:none}
.sv-left,.e-con.sv-left{flex:1 1 0;min-width:0;width:auto;display:flex;flex-direction:column;gap:4px}
.sv-title,.sv-root .sv-title{display:block;font-size:14px;font-weight:600;line-height:1.7;color:var(--text)}
.sv-desc,.sv-root .sv-desc{display:block;font-size:13px;line-height:1.75;color:var(--gray);max-width:300px}
.sv-tag,.sv-root .sv-tag{font-size:12px;line-height:1.5;color:var(--gray2);white-space:nowrap;text-align:right;padding-top:4px}
.e-con.sv-topbar>.elementor-widget,.e-con.sv-sechead>.elementor-widget,.e-con.sv-row>.elementor-widget,.e-con.sv-footer>.elementor-widget{width:auto;flex:0 0 auto;max-width:none}
.sv-tag,.sv-thumb{flex:none}

/* Writing thumbnails: the post's "Blog thumbnail" (Featured image in the editor) */
.sv-thumb{width:48px;height:48px;border-radius:8px;background:var(--chip);color:var(--icon);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sv-thumb svg{width:20px;height:20px}
.sv-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Contact / newsletter panel ---------- */
.sv-panel,.e-con.sv-panel{display:flex;flex-direction:column;background:var(--panel);border-radius:12px;padding:22px 22px 18px;margin-top:64px;scroll-margin-top:24px}
.sv-root .sv-panel-title{font-size:14px;font-weight:600;line-height:1.5;color:var(--text)}
.sv-root .sv-panel-text{font-size:13px;line-height:1.6;color:var(--gray);margin-top:4px}
.sv-panel .elementor-widget-shortcode{margin-top:16px}
.sv-form{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0}
.sv-form.sv-inline{flex-direction:row;flex-wrap:nowrap;gap:10px}
html body .sv-form input[type="email"],html body .sv-form input[type="text"],html body .sv-form textarea{width:100%;height:44px;padding:0 12px;border:1px solid var(--field-border);border-radius:8px;background:var(--field);color:var(--text);font:400 13px/1.4 'Inter',system-ui,sans-serif;box-shadow:none;outline:0}
html body .sv-form textarea{height:104px;padding:12px;resize:vertical;line-height:1.5;display:block}
html body .sv-form input::placeholder,html body .sv-form textarea::placeholder{color:var(--gray2);opacity:1}
html body .sv-form.sv-inline input[type="email"]{flex:1 1 auto;width:auto;min-width:0}
html body .sv-form button{align-self:flex-start;flex:none;height:44px;padding:0 20px;border:0;border-radius:8px;background:var(--btn-bg);color:var(--btn-text);font:600 13px/1 'Inter',system-ui,sans-serif;cursor:pointer;box-shadow:none}
html body .sv-form button:hover,html body .sv-form button:focus{background:var(--btn-bg);color:var(--btn-text);opacity:.88}
.sv-helper{min-height:18px;font-size:12px;line-height:1.5;color:var(--gray2);margin:14px 0 0}
.sv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Footer ---------- */
.sv-footer,.e-con.sv-footer{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:64px;padding-top:20px;border-top:1px solid var(--border)}
.sv-root .sv-flinks{font-size:13px;line-height:1.5;color:var(--gray)}
html body .sv-flinks a,html body .sv-menu a{color:var(--gray);text-decoration:none;margin-right:16px;font-size:13px}
html body .sv-flinks a:last-child{margin-right:0}
.sv-menu{list-style:none;display:flex;gap:16px;margin:0;padding:0}
html body .sv-menu a{margin-right:0}
.sv-root .sv-copy,.sv-copy{font-size:12px;line-height:1.5;color:var(--gray2)}

/* ---------- Blog post (single) — no featured image is printed here ---------- */
.sv-back{font-size:12px;color:var(--gray2);text-decoration:none}
.sv-single-title{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.015em;margin:20px 0 8px}
.sv-meta{font-size:12px;color:var(--gray2);margin-bottom:32px}
.sv-content{font-size:15px;line-height:1.75;color:var(--text)}
.sv-content p{margin:0 0 1.2em}
.sv-content h2,.sv-content h3{font-weight:600;line-height:1.35;margin:1.8em 0 .6em}
.sv-content img{max-width:100%;height:auto;border-radius:8px}
.sv-content figure{margin:1.6em 0}
.sv-content figcaption{font-size:12px;color:var(--gray2);margin-top:8px}
html body .sv-content a{color:var(--text);text-decoration:underline}
.sv-empty{font-size:13px;color:var(--gray);padding:18px 0}

@media (max-width:480px){
  .sv-h1,.sv-root .sv-h1{font-size:20px}
  .sv-wrap,.e-con.sv-root{padding-top:40px}
}