/*
Theme Name: Aesthetic Recipes
Theme URI: https://www.instagram.com/aesthetic_recipes_/
Author: Aesthetic Recipes
Author URI: https://www.instagram.com/aesthetic_recipes_/
Description: An elegant, editorial, all-white WordPress theme for a professional food, travel & lifestyle blog. No page builder, no bloat — pure HTML & CSS built for speed.
Version: 2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: aesthetic-recipes
*/

/* ==========================================================================
   1. DESIGN TOKENS — pure white, monochrome, editorial
   ========================================================================== */
:root{
  --cream:        #FFFFFF;
  --cream-dark:   #FFFFFF;
  --paper:        #FFFFFF;
  --ink:          #141414;
  --ink-soft:     #6B6B6B;
  --accent:       #141414;
  --accent-deep:  #000000;
  --olive:        #8A8A8A;
  --olive-soft:   #B5B5B5;
  --blush:        #FFFFFF;
  --line:         #E4E2DD;
  --line-strong:  #141414;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-lg: 2px;
  --radius-md: 2px;
  --radius-sm: 2px;
  --shadow-soft: none;
  --shadow-lift: none;
  --container: 1180px;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color: var(--ink); text-decoration:none; transition: color .2s ease, opacity .2s ease; }
a:hover{ color: var(--ink-soft); }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
:focus-visible{ outline: 1px solid var(--ink); outline-offset: 3px; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: .72rem;
  letter-spacing:.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight:600;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width:30px; height:1px;
  background: var(--ink);
}
.container{ max-width: var(--container); margin:0 auto; padding: 0 24px; }
.section{ padding: 90px 0; }
.section--tight{ padding: 56px 0; }
.section--alt{ background: #FFFFFF; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head{ max-width: 640px; margin-bottom: 50px; }
.section-head p{ color: var(--ink-soft); }
.section-head-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom: 50px; flex-wrap:wrap;
}
.section-head-row .section-head{ margin-bottom:0; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  background: var(--ink); color:#fff;
  padding: 15px 34px; border-radius: var(--radius-sm);
  font-weight:600; font-size:.78rem; border: 1px solid var(--ink);
  letter-spacing:.14em; text-transform:uppercase;
  box-shadow: none;
}
.btn:hover{ background: #fff; color: var(--ink); }
.btn--ghost{
  background: transparent; color: var(--ink); border: 1px solid var(--ink);
  box-shadow:none;
}
.btn--ghost:hover{ background: var(--ink); color: #fff; }
.link-arrow{
  font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom:2px;
}
.link-arrow:hover{ color: var(--ink-soft); border-color: var(--ink-soft); }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 22px; padding-bottom: 22px;
}
.site-logo{
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight:500;
  color: var(--ink);
  letter-spacing:.01em;
}
.site-logo span{ color: var(--ink); font-style: italic; }
.custom-logo-link img{ max-height: 52px; width:auto; display:block; }
.main-nav ul{ display:flex; gap: 38px; align-items:center; }
.main-nav a{
  color: var(--ink); font-weight:500; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.12em;
}
.main-nav a:hover{ color: var(--ink-soft); }
.header-actions{ display:flex; align-items:center; gap:22px; }
.header-social{ display:flex; align-items:center; gap:10px; }
.header-social a{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  border:1px solid var(--line);
}
.header-social a:hover{ background: var(--ink); color:#fff; border-color:var(--ink); }
.header-social a svg{ display:block; }
.menu-toggle{
  display:none; background:none; border:none; width:26px; height:20px;
  position:relative;
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after{
  content:""; position:absolute; left:0; width:100%; height:1px; background:var(--ink);
}
.menu-toggle::before{ top:0; } .menu-toggle span{ top:9px; } .menu-toggle::after{ top:18px; }

/* ==========================================================================
   4. HERO
   ========================================================================== */
.hero{ padding: 84px 0 30px; }
.hero .container{
  display:grid; grid-template-columns: 1fr .95fr; gap: 70px; align-items:center;
}
.hero-kicker{
  font-family: var(--font-display); font-style: italic; color: var(--ink-soft);
  font-size:1.05rem; margin-bottom:10px; display:block;
}
.hero h1{
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  max-width: 11ch;
  font-weight: 400;
}
.hero p{ color: var(--ink-soft); font-size:1.05rem; max-width:42ch; margin-bottom:32px; }
.hero-cta{ display:flex; gap:18px; flex-wrap:wrap; }
.hero-figure{ position:relative; }
.hero-figure img{
  border-radius: var(--radius-lg);
  aspect-ratio: 4/5; object-fit:cover;
  filter: grayscale(15%);
}
.hero-badge{
  position:absolute; bottom:-1px; left:-1px;
  background: #fff; border: 1px solid var(--line);
  padding: 20px 24px; max-width:220px;
  font-size:.8rem; color:var(--ink-soft);
}
.hero-badge strong{ display:block; font-family: var(--font-display); font-size:1.7rem; color:var(--ink); font-weight:500; }

/* ==========================================================================
   5. INSTAGRAM STRIP
   ========================================================================== */
.insta-strip{ padding: 70px 0 90px; text-align:center; border-top: 1px solid var(--line); }
.insta-strip .eyebrow{ justify-content:center; }
.insta-handle{
  font-family: var(--font-display); font-style:italic; font-size:1.9rem; font-weight:400;
  margin-bottom: 8px;
}
.insta-strip > .container > p{ color:var(--ink-soft); margin-bottom:36px; }
.insta-grid{
  display:grid; grid-template-columns: repeat(6,1fr); gap:2px;
}
.insta-grid a{
  position:relative; display:block; aspect-ratio:1/1; overflow:hidden;
}
.insta-grid img{ width:100%; height:100%; object-fit:cover; filter: grayscale(35%); transition: transform .5s ease, filter .4s ease; }
.insta-grid a:hover img{ transform: scale(1.05); filter: grayscale(0%); }
.insta-grid a::after{
  content:"view on instagram";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(20,20,20,.75); color:#fff; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; opacity:0; transition: opacity .3s ease; text-align:center; padding:8px;
}
.insta-grid a:hover::after{ opacity:1; }
.insta-follow{ margin-top: 40px; }

/* ==========================================================================
   6b. PHOTO CATEGORY GRID — editorial caption bar
   ========================================================================== */
.photo-cat-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 2px;
}
.photo-cat-grid a{
  position:relative; display:block; aspect-ratio: 1/1; overflow:hidden;
}
.photo-cat-grid img{ width:100%; height:100%; object-fit:cover; filter: grayscale(45%); transition: transform .6s ease, filter .4s ease; }
.photo-cat-grid a:hover img{ transform: scale(1.06); filter: grayscale(0%); }
.photo-cat-grid a::after{ content:""; position:absolute; inset:0; background: rgba(20,20,20,0); transition: background .3s ease; }
.photo-cat-grid a:hover::after{ background: rgba(20,20,20,.12); }
.photo-cat-grid span{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 16px 14px 15px; text-align:center;
  font-family: var(--font-display); font-weight:500; font-size:1rem; color:#fff;
  background: rgba(20,20,20,.72);
}
.photo-cat-grid .cat-count{
  display:block; font-family: var(--font-body); font-weight:500; font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color: #D8D8D8; margin-top:3px;
}

/* ==========================================================================
   6. CATEGORY QUICK NAV
   ========================================================================== */
.cat-nav{ padding: 10px 0 80px; }
.cat-nav ul{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--line); border: 1px solid var(--line); }
.cat-nav a{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background: #fff;
  padding: 34px 14px;
  color: var(--ink); font-weight:600; text-align:center;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
}
.cat-nav a:hover{ background: var(--ink); color:#fff; }
.cat-icon{
  width:44px; height:44px; border-radius:50%;
  border: 1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}

/* ==========================================================================
   7. CARD GRID (recipes / travel / lifestyle)
   ========================================================================== */
.card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 48px 36px; }
.card-grid--2col{ grid-template-columns: repeat(2,1fr); }
.card{
  background: transparent; border-radius: 0;
  overflow:hidden; box-shadow:none; border:none;
  display:flex; flex-direction:column; height:100%;
}
.card-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; margin-bottom:20px; }
.card-media img{ width:100%; height:100%; object-fit:cover; filter: grayscale(20%); transition: transform .6s ease, filter .4s ease; }
.card:hover .card-media img{ transform: scale(1.04); filter: grayscale(0%); }
.card-tag{
  position:static;
  background: transparent; color: var(--ink-soft);
  font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  padding: 0; border-radius: 0; display:block; margin-bottom:10px;
}
.card-body{ padding: 0; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-meta{ font-size:.72rem; color: var(--olive); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.card h3{ font-size:1.35rem; margin:0; font-weight:500; }
.card h3 a{ color:inherit; }
.card h3 a:hover{ color: var(--ink-soft); }
.card p{ color: var(--ink-soft); font-size:.92rem; margin:0; flex:1; }
.card-foot{ margin-top:8px; font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em; }

/* ==========================================================================
   8. TRAVEL / LIFESTYLE FEATURE BAND
   ========================================================================== */
.feature-band{ display:grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.feature-card{
  position:relative; border-radius: 0; overflow:hidden;
  aspect-ratio: 5/4; box-shadow:none;
}
.feature-card img{ width:100%; height:100%; object-fit:cover; filter: grayscale(35%); }
.feature-card::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0) 60%);
}
.feature-text{
  position:absolute; left:0; right:0; bottom:0; padding: 34px;
  color:#fff; z-index:2;
}
.feature-text .eyebrow{ color: #fff; }
.feature-text .eyebrow::before{ background: #fff; }
.feature-text h3{ color:#fff; font-size:1.6rem; margin-bottom:10px; font-weight:400; }
.feature-text a{ color:#fff; font-weight:600; border-bottom-color:#fff; }

/* ==========================================================================
   9. AFFILIATE / SHOP SECTION
   ========================================================================== */
.affiliate-disclosure{
  background: #fff; border: 1px solid var(--line);
  padding: 18px 22px; border-radius: 0;
  font-size:.85rem; color: var(--ink-soft); margin-bottom: 46px;
}
.shop-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.shop-card{
  background: #fff; border-radius: 0;
  padding: 26px; text-align:center; box-shadow:none;
}
.shop-card img{ aspect-ratio:1/1; object-fit:cover; border-radius:0; margin-bottom:18px; filter: grayscale(25%); }
.shop-card h4{ font-family: var(--font-body); font-weight:600; font-size:.92rem; margin:0 0 6px; }
.shop-price{ color: var(--ink-soft); font-weight:600; margin-bottom:16px; display:block; font-size:.85rem; letter-spacing:.03em; }
.shop-card .btn{ width:100%; justify-content:center; padding:12px; font-size:.68rem; }

/* ==========================================================================
   10. NEWSLETTER
   ========================================================================== */
.newsletter{
  background: var(--ink); color: #fff;
  border-radius: 0;
  padding: 70px 40px; text-align:center;
  margin: 0;
}
.newsletter h2{ color:#fff; font-weight:400; }
.newsletter p{ color: #B8B8B8; max-width:48ch; margin: 0 auto 30px; }
.newsletter-form{ display:flex; gap:0; justify-content:center; max-width:460px; margin:0 auto; flex-wrap:wrap; border-bottom: 1px solid #fff; padding-bottom:2px; }
.newsletter-form input{
  flex:1; min-width:220px; padding: 13px 4px; border:none; background:transparent;
  font-family: var(--font-body); color:#fff;
}
.newsletter-form input::placeholder{ color:#999; }
.newsletter-form .btn{ border:none; background:transparent; color:#fff; letter-spacing:.14em; padding:13px 4px 13px 20px; }
.newsletter-form .btn:hover{ color:#B8B8B8; }

/* ==========================================================================
   11. SINGLE POST / PAGE
   ========================================================================== */
.entry-header{ text-align:center; max-width: 760px; margin: 60px auto 0; padding:0 24px; }
.entry-header .eyebrow{ justify-content:center; }
.entry-header h1{ font-size: clamp(2.1rem,4vw,3rem); font-weight:400; }
.entry-meta{ color: var(--ink-soft); font-size:.82rem; margin-top:14px; letter-spacing:.04em; }
.entry-thumb{ max-width: 980px; margin: 44px auto; padding:0 24px; }
.entry-thumb img{ border-radius: 0; box-shadow:none; filter: grayscale(15%); }
.entry-content{ max-width: 700px; margin: 0 auto; padding: 0 24px 70px; }
.entry-content h2{ font-size:1.6rem; margin-top:1.7em; font-weight:400; }
.entry-content h3{ font-size:1.25rem; margin-top:1.5em; font-weight:500; }
.entry-content p{ margin: 0 0 1.4em; }
.entry-content img{ border-radius: 0; margin: 1.6em 0; }
.entry-content blockquote{
  border-left: 1px solid var(--ink); margin: 1.8em 0; padding: 4px 0 4px 24px;
  font-family: var(--font-display); font-style:italic; font-size:1.2rem; color: var(--ink-soft);
}
.recipe-box{
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 32px 34px; margin: 2.2em 0; max-width:700px;
}
.recipe-box h3{ margin-top:0; font-weight:500; }
.recipe-meta-row{ display:flex; gap:32px; flex-wrap:wrap; margin: 16px 0 4px; }
.recipe-meta-row div{ font-size:.8rem; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; }
.recipe-meta-row strong{ display:block; color:var(--ink); font-family: var(--font-display); font-size:1.25rem; font-weight:500; text-transform:none; letter-spacing:0; }

/* ==========================================================================
   12. PAGE TEMPLATE HEADERS
   ========================================================================== */
.page-hero{ text-align:center; padding: 70px 24px 14px; max-width:680px; margin:0 auto; }
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ font-weight:400; }
.page-hero p{ color: var(--ink-soft); }

/* ==========================================================================
   12b. COMMENTS
   ========================================================================== */
.ar-comments{ max-width:700px; margin: 50px auto 0; padding: 0 24px; }
.ar-comments h3{ font-size:1.3rem; font-weight:500; }
.comment-list{ margin: 24px 0; }
.comment-list li{ border-bottom: 1px solid var(--line); padding:20px 0; margin-bottom:0; }
.comment-list .comment-author{ font-weight:600; }
.comment-list .comment-meta{ font-size:.78rem; color:var(--ink-soft); margin-bottom:8px; letter-spacing:.03em; }
.comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond textarea{
  width:100%; padding:13px 4px; border-radius: 0; border:none; border-bottom:1px solid var(--line);
  font-family: var(--font-body); margin-bottom:18px; background: transparent;
}
.comment-respond .form-submit input{
  background: var(--ink); color:#fff; border:1px solid var(--ink); padding:13px 30px; border-radius:0; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; font-size:.75rem;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer{ background: #fff; margin-top: 90px; padding: 70px 0 34px; border-top: 1px solid var(--line); }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 56px; }
.footer-about p{ color: var(--ink-soft); font-size:.9rem; margin: 16px 0 20px; max-width:34ch; }
.social-row{ display:flex; gap:12px; }
.social-row a{
  width:36px; height:36px; border-radius:50%; background:transparent;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  border:1px solid var(--line);
}
.social-row a svg{ display:block; }
.social-row a:hover{ background: var(--ink); color:#fff; border-color:var(--ink); }
.footer-col h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:20px; font-weight:600; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col a{ color: var(--ink-soft); font-size:.9rem; }
.footer-col a:hover{ color: var(--ink); }
.footer-bottom{
  border-top:1px solid var(--line); padding-top:26px; display:flex; justify-content:space-between;
  color: var(--ink-soft); font-size:.78rem; flex-wrap:wrap; gap:10px; letter-spacing:.02em;
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-figure{ order:-1; }
  .card-grid{ grid-template-columns: repeat(2,1fr); }
  .shop-grid{ grid-template-columns: repeat(2,1fr); }
  .feature-band{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .cat-nav ul{ grid-template-columns: repeat(2,1fr); }
  .insta-grid{ grid-template-columns: repeat(3,1fr); }
  .photo-cat-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 720px){
  .main-nav{
    position:fixed; inset: 70px 0 0 0; background: #fff;
    transform: translateY(-110%); transition: transform .3s ease;
    padding: 34px 24px; z-index: 40;
  }
  .main-nav.is-open{ transform: translateY(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:26px; }
  .main-nav a{ font-size:1rem; }
  .menu-toggle{ display:block; }
  .header-social a{ width:32px; height:32px; }
  .header-social a svg{ width:14px; height:14px; }
  .card-grid{ grid-template-columns: 1fr; }
  .shop-grid{ grid-template-columns: 1fr 1fr; }
  .newsletter{ padding:50px 24px; }
  .hero-badge{ position:static; margin-top:20px; max-width:none; }
  .photo-cat-grid{ grid-template-columns: repeat(2,1fr); }
}