/*
Theme Name: Sun On Our Skin
Theme URI: https://sunonourskin.com
Author: Ayman & Samia
Author URI: https://sunonourskin.com
Description: A warm, sun-soaked, photography-led travel blog theme with full Elementor integration. Palette and typography are controlled with CSS variables and editable in the Customizer (Appearance → Customize → Sun On Our Skin). Headings in Playfair Display, body in DM Sans.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sun-on-our-skin
Tags: blog, travel, elementor, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, full-width-template
*/

/* ===================================================================
   1. DESIGN TOKENS  (edit these in Appearance → Customize, or here)
   =================================================================== */
:root{
  --sos-cream:#FBF7F0;
  --sos-white:#FFFFFF;
  --sos-sand:#F4ECE0;
  --sos-ink:#2B2926;
  --sos-text:#6B665E;
  --sos-meta:#9A9286;
  --sos-terra:#C9542C;
  --sos-terra-hover:#B0461F;
  --sos-link:#A8431F;
  --sos-eyebrow:#C0562F;
  --sos-terra-light:#DD6B45;
  --sos-gold:#E8A33B;
  --sos-teal:#3F9C8E;
  --sos-border:#EDE2D2;

  --sos-font-head:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sos-font-body:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --sos-content:1140px;
  --sos-radius:14px;
  --sos-radius-lg:16px;
  --sos-section-pad:60px;
}

/* ===================================================================
   2. BASE
   =================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sos-cream);
  color:var(--sos-ink);
  font-family:var(--sos-font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--sos-font-head);
  font-weight:600;
  color:var(--sos-ink);
  line-height:1.16;
  letter-spacing:-.005em;
  margin:0 0 .5em;
}
h1{font-size:clamp(32px,5vw,46px);font-weight:700}
h2{font-size:clamp(26px,3.4vw,32px)}
h3{font-size:21px}
h4{font-size:18px}
p{margin:0 0 1.1em}
a{color:var(--sos-link);text-decoration:none}
a:hover{color:var(--sos-terra)}
img{max-width:100%;height:auto;display:block}
hr{border:none;border-top:1px solid var(--sos-border);margin:2em 0}
blockquote{
  border-left:3px solid var(--sos-terra);
  margin:1.5em 0;padding:.2em 0 .2em 22px;
  font-family:var(--sos-font-head);font-style:italic;font-size:1.25em;color:#3A352E;
}
code,pre{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--sos-sand);border-radius:6px}
code{padding:2px 6px;font-size:.9em}
pre{padding:16px;overflow:auto}

.sos-container{max-width:var(--sos-content);margin:0 auto;padding:0 24px}
.sos-section{padding:var(--sos-section-pad) 0}
.sos-bg-cream{background:var(--sos-cream)}
.sos-bg-white{background:var(--sos-white)}
.sos-bg-sand{background:var(--sos-sand)}
.sos-bg-ink{background:var(--sos-ink);color:#EFE6D8}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--sos-ink);color:#fff;padding:10px 16px;z-index:1000}
.skip-link:focus{left:8px;top:8px}

/* ===================================================================
   3. HEADER  (light, sticky, no teal)
   =================================================================== */
.sos-header{
  background:var(--sos-cream);
  border-bottom:1px solid var(--sos-border);
  position:sticky;top:0;z-index:100;
}
.sos-header.is-sticky-off{position:static}
.sos-header__inner{
  max-width:var(--sos-content);margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.sos-logo{font-family:var(--sos-font-head);font-weight:700;font-size:21px;color:var(--sos-ink);line-height:1}
.sos-logo:hover{color:var(--sos-ink)}
.sos-logo img{max-height:44px;width:auto}
.sos-nav{display:flex;align-items:center;gap:20px}
.sos-nav ul{list-style:none;display:flex;gap:20px;margin:0;padding:0}
.sos-nav a{color:#5F5A52;font-size:14px;font-weight:500}
.sos-nav a:hover{color:var(--sos-terra)}
.sos-nav .current-menu-item>a{color:var(--sos-terra)}
.sos-header__tools{display:flex;align-items:center;gap:16px}
.sos-search-toggle{background:none;border:none;cursor:pointer;color:var(--sos-link);font-size:0;padding:0}
.sos-search-toggle svg{width:18px;height:18px}
.sos-menu-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--sos-ink)}
.sos-menu-toggle svg{width:24px;height:24px}
.sos-searchbar{display:none;border-bottom:1px solid var(--sos-border);background:var(--sos-cream)}
.sos-searchbar.open{display:block}
.sos-searchbar form{max-width:var(--sos-content);margin:0 auto;padding:14px 24px;display:flex;gap:8px}
.sos-searchbar input[type=search]{flex:1;border:1px solid var(--sos-border);border-radius:999px;padding:10px 16px;font:inherit;background:#fff}

/* ===================================================================
   4. FOOTER  (dark ink, multi-column)
   =================================================================== */
.sos-footer{background:var(--sos-ink);color:#C9C0B1;padding:42px 0 0}
.sos-footer a{color:#A89F90}
.sos-footer a:hover{color:#fff}
.sos-footer__cols{
  max-width:var(--sos-content);margin:0 auto;padding:0 24px 32px;
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;
}
.sos-footer__brand .sos-logo{color:#fff}
.sos-footer__brand p{font-size:12.5px;color:#A89F90;line-height:1.65;margin-top:10px}
.sos-footer__social{display:flex;gap:14px;margin-top:15px}
.sos-footer__social a{color:#E9DECF}
.sos-footer__social svg{width:18px;height:18px}
.sos-footer h4{color:#fff;font-family:var(--sos-font-body);font-size:13px;font-weight:600;margin-bottom:12px}
.sos-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sos-footer ul a{font-size:12.5px}
.sos-footer__bottom{
  border-top:1px solid #44403A;max-width:var(--sos-content);margin:0 auto;padding:16px 24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11.5px;color:#8C8478;
}

/* ===================================================================
   5. REUSABLE COMPONENTS  (use these classes anywhere / in Elementor)
   =================================================================== */
.sos-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--sos-eyebrow);display:block}
.sos-meta{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sos-meta)}
.sos-btn{
  display:inline-block;font-family:var(--sos-font-body);font-size:13px;font-weight:500;
  padding:12px 24px;border-radius:999px;background:var(--sos-terra);color:#fff;border:none;cursor:pointer;
  transition:background .2s;
}
.sos-btn:hover{background:var(--sos-terra-hover);color:#fff}
.sos-btn--dark{background:var(--sos-ink)}
.sos-btn--ghost{background:transparent;border:1.5px solid var(--sos-terra);color:var(--sos-link)}
.sos-tag{display:inline-block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:4px 10px;border-radius:999px;background:#F4E3D3;color:#A8431F}
.sos-card{background:var(--sos-white);border:1px solid var(--sos-border);border-radius:var(--sos-radius);overflow:hidden;transition:transform .25s}
.sos-card:hover{transform:translateY(-4px)}
.sos-card__body{padding:14px 16px 18px}
.sos-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--sos-border);border-radius:999px;padding:10px 18px;background:#fff;font-size:13.5px;color:var(--sos-ink)}
.sos-pill:hover{border-color:var(--sos-terra);color:var(--sos-terra)}
.sos-tile{position:relative;display:block;border-radius:var(--sos-radius);overflow:hidden;background:var(--sos-sand)}
.sos-tile img{width:100%;height:100%;object-fit:cover}
.sos-tile__cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:rgba(31,28,25,.42);color:#fff}
.sos-tile__cap .country{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.sos-tile__cap .name{font-family:var(--sos-font-head);font-size:19px;color:#fff;display:block}
.sos-pull{font-family:var(--sos-font-head);font-style:italic;font-weight:500;font-size:clamp(20px,3vw,27px);line-height:1.4;color:#3A352E;text-align:center;max-width:520px;margin:0 auto}
.sos-grid{display:grid;gap:18px}
.sos-grid--2{grid-template-columns:repeat(2,1fr)}
.sos-grid--3{grid-template-columns:repeat(3,1fr)}
.sos-grid--4{grid-template-columns:repeat(4,1fr)}

/* numbered "most read" list */
.sos-mostread{list-style:none;margin:0;padding:0}
.sos-mostread li{display:flex;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--sos-border)}
.sos-mostread li:last-child{border-bottom:none}
.sos-mostread .num{font-family:var(--sos-font-head);font-size:34px;color:#E0B89A;width:42px;flex-shrink:0}
.sos-mostread .title{font-family:var(--sos-font-head);font-size:18px;font-weight:600}

/* ===================================================================
   6. BLOG / ARTICLE
   =================================================================== */
.sos-main{padding:48px 0 60px}
.sos-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sos-post-card .sos-card__body h2{font-size:18px;margin:8px 0}
.sos-post-card .thumb{aspect-ratio:16/10;background:var(--sos-sand)}
.sos-post-card .thumb img{width:100%;height:100%;object-fit:cover}

.sos-article{max-width:760px;margin:0 auto}
.sos-article__header{text-align:center;margin-bottom:30px}
.sos-article__title{font-size:clamp(30px,4.5vw,44px)}
.sos-article__meta{justify-content:center;display:flex;gap:10px;align-items:center;margin-top:10px}
.sos-article__featured{margin:0 0 32px;border-radius:var(--sos-radius);overflow:hidden}
.sos-article .entry-content h2{font-size:28px;margin:1.4em 0 .5em}
.sos-article .entry-content h3{font-size:21px;margin:1.2em 0 .4em}
.sos-article .entry-content p{font-size:17px;line-height:1.8}
.sos-article .entry-content a{text-decoration:underline;text-decoration-color:var(--sos-terra);text-decoration-thickness:2px;text-underline-offset:2px}
.sos-article .entry-content img{border-radius:var(--sos-radius);margin:1.5em 0}

.sos-related{margin-top:54px;border-top:1px solid var(--sos-border);padding-top:32px}
.sos-affiliate-note{background:var(--sos-sand);border-left:3px solid var(--sos-terra);border-radius:8px;padding:14px 18px;font-size:13px;color:var(--sos-text);margin:24px 0}

.sos-pagination{display:flex;gap:10px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.sos-pagination .page-numbers{padding:8px 14px;border:1px solid var(--sos-border);border-radius:999px;color:var(--sos-ink)}
.sos-pagination .current{background:var(--sos-terra);color:#fff;border-color:var(--sos-terra)}

/* widgets / comments basics */
.sos-comments{max-width:760px;margin:48px auto 0}
.comment-list{list-style:none;padding:0}
.comment-body{border:1px solid var(--sos-border);border-radius:var(--sos-radius);padding:16px;margin-bottom:16px;background:#fff}

/* ===================================================================
   7. RESPONSIVE
   =================================================================== */
@media(max-width:1024px){
  .sos-footer__cols{grid-template-columns:1fr 1fr}
  .sos-posts{grid-template-columns:repeat(2,1fr)}
  .sos-grid--4{grid-template-columns:repeat(2,1fr)}
  .sos-grid--3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  :root{--sos-section-pad:40px}
  .sos-nav{position:fixed;inset:0 0 0 auto;width:78%;max-width:320px;background:var(--sos-cream);
           flex-direction:column;align-items:flex-start;padding:80px 28px;gap:8px;
           transform:translateX(100%);transition:transform .25s;box-shadow:-12px 0 40px rgba(0,0,0,.12);z-index:99}
  .sos-nav.open{transform:translateX(0)}
  .sos-nav ul{flex-direction:column;gap:14px;width:100%}
  .sos-nav a{font-size:17px}
  .sos-menu-toggle{display:block}
  .sos-posts,.sos-grid--2,.sos-grid--3,.sos-grid--4{grid-template-columns:1fr}
  .sos-footer__cols{grid-template-columns:1fr}
  .sos-article .entry-content p{font-size:16px}
}