/*
Theme Name: Jamal Kaileh — Featured Profile
Theme URI: https://jamalkaileh.ourfeatured.com
Author: Jamal Kaileh
Author URI: https://www.jamalkaileh.com
Description: A humble, SEO-optimized one-page featured profile theme for Jamal Kaileh — Houston construction and real estate operator. Person schema, meta tags, and social profiles built in. Consistent with jamalkaileh.com. Activate and the profile is live — no page setup required.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jamal-kaileh-featured
*/

:root{ --navy:#14232e; --navy2:#22384a; --accent:#3f6b78; --accent-soft:#eaf1f3; --ink:#1e293b; --muted:#5a6672; --line:#e4e8ee; --paper:#fff; --wash:#f6f8fb; }
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{ margin:0; background:var(--wash); color:var(--ink); font-family:"Source Serif 4",Georgia,serif; line-height:1.66; -webkit-font-smoothing:antialiased; }
.jk-wrap{ max-width:900px; margin:0 auto; padding:28px 20px 60px; }
h1,h2,h3,.brand,.nav-button,.card-title,.experience-title,.education-title,.experience-company,.education-school,.education-years,.experience-years,.skill-tag,.hero-location{ font-family:"Archivo","Helvetica Neue",Arial,sans-serif; }

/* hero */
.hero-section{ position:relative; background:linear-gradient(135deg,#14232e 0%,#22384a 55%,#14232e 100%); color:#fff; padding:58px 24px; text-align:center; border-radius:12px; overflow:hidden; }
.hero-overlay{ position:absolute; inset:0; background:radial-gradient(circle at 25% 25%, rgba(63,107,120,.28), transparent 55%); }
.hero-content{ position:relative; max-width:820px; margin:0 auto; }
.hero-title{ font-size:clamp(30px,5vw,46px); font-weight:700; letter-spacing:-.015em; margin:0 0 10px; color:#fff; }
.hero-location{ font-size:clamp(14px,2.4vw,18px); font-weight:600; letter-spacing:.02em; color:#bcd0d6; margin:0 0 12px; }
.hero-description{ font-size:15.5px; color:#cdd9e2; margin:0; font-family:"Source Serif 4",Georgia,serif; }

/* nav */
.nav-buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:24px 0 6px; }
.nav-button{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:8px 18px; text-decoration:none; transition:all .15s; }
.nav-button:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* image + social */
.profile-image-container{ display:flex; justify-content:center; margin:22px 0 12px; }
.profile-image-outer{ padding:5px; background:linear-gradient(135deg,#5a8b9a,#3f6b78); border-radius:50%; }
.profile-image-inner{ background:#fff; border-radius:50%; padding:4px; }
.profile-image{ display:block; width:148px; height:148px; object-fit:cover; border-radius:50%; }
.social-links{ display:flex; justify-content:center; gap:12px; }
.social-link{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--paper); border:1px solid var(--line); color:var(--navy); transition:all .15s; }
.social-link:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.social-icon{ width:18px; height:18px; }

/* cards */
.content-container{ margin:30px auto 0; display:flex; flex-direction:column; gap:20px; }
.content-card{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:26px; }
.card-header{ display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.card-icon{ flex-shrink:0; width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); }
.card-icon .icon{ width:22px; height:22px; }
.card-title{ font-size:19px; font-weight:700; color:var(--navy); margin:0; }
.bio-paragraph{ margin:0 0 14px; font-size:15.5px; }
.bio-paragraph:last-child{ margin-bottom:0; }
.education-content,.experience-content{ display:flex; flex-direction:column; gap:16px; }
.education-item,.experience-item{ padding:4px 0 4px 16px; border-left:3px solid var(--accent); }
.education-title,.experience-title{ font-size:15.5px; font-weight:700; color:var(--navy); margin:0 0 3px; }
.education-school,.experience-company{ font-size:13.5px; font-weight:600; color:var(--accent); margin:0 0 2px; }
.education-years,.experience-years{ font-size:12.5px; color:var(--muted); margin:0 0 5px; letter-spacing:.02em; }
.education-description,.experience-description{ font-size:14.5px; margin:0 0 8px; }
.skill-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.skill-tag{ font-size:11px; letter-spacing:.02em; padding:3px 10px; border-radius:999px; background:var(--accent-soft); color:#274c58; }

/* quiet closing */
.profile-foot{ text-align:center; margin:30px auto 0; font-family:"Archivo",Arial,sans-serif; font-size:13px; letter-spacing:.04em; color:var(--muted); }
.profile-foot a{ color:var(--accent); text-decoration:none; }
.profile-foot a:hover{ color:var(--navy); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:600px){ .content-card{ padding:20px; } .jk-wrap{ padding:20px 16px 44px; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }

/* masthead + footer logo (featured-profile framing) */
.masthead{ text-align:center; padding:4px 0 20px; }
.masthead-logo{ height:46px; width:auto; display:inline-block; }
.hero-kicker{ font-family:"Archivo",Arial,sans-serif; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#8fb3bd; margin:0 0 12px; }
.footer-brand{ text-align:center; margin:34px auto 0; padding-top:28px; border-top:1px solid var(--line); }
.footer-logo{ height:38px; width:auto; }
.footer-name{ font-family:"Archivo",Arial,sans-serif; font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:14px; color:var(--navy); margin:10px 0 2px; }
.footer-loc{ font-family:"Archivo",Arial,sans-serif; font-size:12px; letter-spacing:.08em; color:var(--muted); margin:0 0 8px; }
.footer-link{ margin:0; }
.footer-link a{ font-family:"Archivo",Arial,sans-serif; font-size:13px; letter-spacing:.03em; color:var(--accent); text-decoration:none; }
.footer-link a:hover{ color:var(--navy); }

/* editorial touches */
.lead{ font-size:19px; line-height:1.5; color:var(--navy); margin:0 0 18px; }
.focus-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.focus-chip{ font-family:"Archivo",Arial,sans-serif; font-size:12px; letter-spacing:.03em; padding:7px 15px; border:1px solid var(--line); border-radius:999px; color:var(--navy); background:var(--wash); }
.experience-item{ border-left:3px solid var(--accent); }
.experience-item .experience-title{ font-size:16.5px; }