/*
Theme Name: The Little Picks
Theme URI: https://thelittlepicks.com
Author: The Little Picks
Author URI: https://thelittlepicks.com
Description: Hybrid classic/block WordPress theme for The Little Picks — an independent product-picks and travel blog. Editable via the Customizer, Menus and Widgets; built for TranslatePress multilingual support.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: little-picks
Tags: blog, custom-menu, custom-colors, translation-ready, threaded-comments, widgets, one-column, two-columns

The Little Picks is derived from an original static HTML mockup provided by the
site owner and rebuilt as a WordPress theme.
*/

:root{
  --navy:#20293A;
  --navy-soft:#3A4558;
  --sand:#C9AE87;
  --sand-light:#E8DCC8;
  --off-white:#FAFAF8;
  --line:#E4DFD4;
  --text-body:#4A4F5A;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  background:var(--off-white);
  color:var(--navy);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}
ul{list-style:none;}

.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;
  word-wrap:normal!important;
}
.skip-link{
  left:-9999px;position:absolute;top:0;z-index:999999;background:var(--navy);
  color:#fff;padding:10px 18px;
}
.skip-link:focus{left:6px;top:6px;}

/* ===== Top utility bar ===== */
.utility-bar{
  background:var(--navy);
  color:var(--sand-light);
  font-family:'Tenor Sans',sans-serif;
  font-size:12px;
  letter-spacing:.04em;
}
.utility-inner{
  max-width:1240px;margin:0 auto;padding:7px 24px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;
}
.utility-left{opacity:.85}
.utility-right{display:flex;align-items:center;}

/* TranslatePress language switcher container — TP injects its own markup/links here */
.lp-lang-switcher{font-family:'Tenor Sans',sans-serif;font-size:12px;}
.lp-lang-switcher select,
.lp-lang-switcher .trp-language-switcher-shortcode select{
  background:transparent;border:1px solid rgba(232,220,200,.4);
  color:var(--sand-light);font-family:'Tenor Sans',sans-serif;
  font-size:12px;padding:3px 8px;border-radius:3px;cursor:pointer;
}
.lp-lang-switcher option{color:var(--navy);}
.lp-lang-switcher a{color:var(--sand-light);opacity:.85;margin-left:8px;}
.lp-lang-switcher a:hover{opacity:1;text-decoration:underline;}

/* TranslatePress's own "Floating Language Selection" is a separate feature
   from the [language-switcher] shortcode used above — it's a plugin
   setting (Settings → TranslatePress → Language Switcher tab) that shows
   an extra floating switcher in a corner of every page even though a
   shortcode switcher is already placed in the utility bar. Turning that
   setting off there is the real fix; these rules are just a safety net so
   a duplicate never shows even if it gets switched back on by accident.
   Selector list covers class/ID names used across TranslatePress versions. */
#trp-floating-language-selection,
.trp-floating-language-selection,
.trp-floater-ls,
#trp-floater-ls,
.trp-language-switcher-floating{
  display:none !important;
}

/* ===== Header ===== */
header.site-header{
  background:var(--off-white);
  border-bottom:1px solid var(--line);
  position:relative;
}
.header-inner{
  max-width:1240px;margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.logo-block{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.logo-block img.site-logo{
  width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:1.5px solid var(--sand);
}
.logo-ring{
  width:52px;height:52px;border-radius:50%;
  border:1.5px solid var(--sand);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.logo-ring span{
  font-family:'Playfair Display',serif;font-weight:600;
  font-size:19px;color:var(--navy);letter-spacing:.01em;
}
.logo-ring::after{
  content:"\2726";position:absolute;top:-3px;right:2px;
  font-size:9px;color:var(--sand);
}
.logo-text .word{
  font-family:'Playfair Display',serif;font-weight:600;
  font-size:22px;color:var(--navy);line-height:1;
}
.logo-text .word a{color:inherit;}
.logo-text .motto{
  font-family:'Tenor Sans',sans-serif;font-size:10.5px;
  color:var(--sand);letter-spacing:.14em;text-transform:uppercase;
  margin-top:5px;
}

/* ===== Primary nav (built from a WordPress Menu, falls back to categories) ===== */
nav.primary-nav{flex:1;display:flex;justify-content:center;}
.primary-menu{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.primary-menu > .menu-item{position:relative;}
.primary-menu > .menu-item > a,
.primary-menu > .menu-item > .nav-link-text{
  font-family:'Tenor Sans',sans-serif;font-size:14px;
  color:var(--navy);letter-spacing:.03em;
  display:flex;align-items:center;gap:6px;padding:10px 8px;cursor:pointer;
}
.primary-menu > .menu-item-has-children > a::after{
  content:"\25BE";font-size:10px;color:var(--sand);transition:transform .15s;margin-left:2px;
}
.primary-menu > .menu-item-has-children:hover > a::after{transform:rotate(180deg);}
.primary-menu .sub-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 12px 28px rgba(32,41,58,.1);
  padding:10px 0;min-width:280px;
  display:none;grid-template-columns:1fr 1fr;gap:0 8px;z-index:50;
}
.primary-menu .menu-item-has-children:hover .sub-menu{display:grid;}
.primary-menu .sub-menu a{
  padding:8px 18px;font-size:13.5px;color:var(--text-body);
  border-radius:4px;display:block;
}
.primary-menu .sub-menu a:hover{background:var(--off-white);color:var(--navy);}
.primary-menu > .current-menu-item > a,
.primary-menu > .current_page_item > a{color:var(--sand);}

.header-right{display:flex;align-items:center;gap:16px;flex-shrink:0;}

/* ===== Site header (used on every page) block-content compatibility =====
   The header content is a real, editable WordPress block pattern (see
   patterns/site-header.json and inc/patterns.php) so the logo, wordmark
   and motto now render via core Site Logo / Site Title / paragraph
   blocks rather than raw HTML. These rules make that block output match
   the original mockup's look exactly. */
.logo-block .wp-block-site-logo,
.logo-block .site-logo-block{margin:0;}
.logo-block .wp-block-site-logo img,
.logo-block .site-logo-block img{
  width:52px;height:52px;object-fit:cover;border-radius:50%;border:1.5px solid var(--sand);
}
.logo-text .wp-block-site-title,
.logo-text .word{
  font-family:'Playfair Display',serif;font-weight:600;font-size:22px;color:var(--navy);line-height:1;margin:0;
}
.logo-text .wp-block-site-title a{color:inherit;text-decoration:none;}
.logo-text .motto{
  font-family:'Tenor Sans',sans-serif;font-size:10.5px;
  color:var(--sand);letter-spacing:.14em;text-transform:uppercase;
  margin-top:5px;
}

.lp-lang-button{
  display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:20px;
  padding:4px 12px;font-family:'Tenor Sans',sans-serif;font-size:12px;color:var(--navy);
}
.lp-lang-button select{
  background:transparent;border:none;font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;
}
.lp-lang-button a{color:inherit;opacity:.85;}
.lp-lang-button a:hover{opacity:1;text-decoration:underline;}
.social-icon{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--navy);transition:.15s;
}
.social-icon:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ===== Hero: top highlighted posts ===== */
.section-wrap{max-width:1240px;margin:0 auto;padding:36px 24px;}
.eyebrow{
  font-family:'Tenor Sans',sans-serif;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sand);
  margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);}

.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;}
.hero-card{
  position:relative;border-radius:8px;overflow:hidden;
  background:var(--navy);color:#fff;min-height:420px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-card.small{min-height:200px;}
.hero-card .art{
  position:absolute;inset:0;
  background:linear-gradient(160deg,var(--navy-soft),var(--navy) 65%);
}
.hero-card .art img{width:100%;height:100%;object-fit:cover;opacity:.55;position:absolute;inset:0;}
.hero-card .overlay{
  position:relative;z-index:2;padding:26px 28px;
  background:linear-gradient(0deg,rgba(0,0,0,.55) 10%,transparent 90%);
}
.hero-card .tag{
  font-family:'Tenor Sans',sans-serif;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sand);
  margin-bottom:8px;display:inline-block;
}
.hero-card h2{
  font-family:'Playfair Display',serif;font-weight:600;
  font-size:27px;line-height:1.22;margin-bottom:8px;
}
.hero-card.small h2{font-size:19px;}
.hero-card p{font-size:13.5px;color:#DCE0E8;line-height:1.5;max-width:90%;}
.hero-right{display:flex;flex-direction:column;gap:22px;}

/* ===== Main content: latest posts + sidebar ===== */
.content-grid{display:grid;grid-template-columns:1fr 300px;gap:44px;margin-top:8px;}

.post-row{
  display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);
}
.post-row:first-child{padding-top:0;}
.thumb{
  width:180px;height:130px;border-radius:6px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(150deg,var(--sand-light),#f2ead9);
  display:flex;align-items:center;justify-content:center;color:var(--sand);
}
.thumb img{width:100%;height:100%;object-fit:cover;}
.post-body .cat-label{
  font-family:'Tenor Sans',sans-serif;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sand);
  margin-bottom:6px;display:block;
}
.post-body h3{
  font-family:'Playfair Display',serif;font-weight:600;
  font-size:19px;line-height:1.3;margin-bottom:8px;
}
.post-body h3 a{color:inherit;}
.post-body p{font-size:13.5px;color:var(--text-body);line-height:1.55;margin-bottom:8px;}
.post-meta{font-size:11.5px;color:#9CA3AF;font-family:'Tenor Sans',sans-serif;}

/* Sidebar / widgets */
.widget{margin-bottom:32px;}
.widget-title{
  font-family:'Playfair Display',serif;font-weight:600;font-size:16px;
  padding-bottom:10px;border-bottom:2px solid var(--sand);margin-bottom:14px;
}
.archive-year{margin-bottom:6px;}
.archive-year > summary{
  font-family:'Tenor Sans',sans-serif;font-size:13.5px;font-weight:500;
  padding:9px 0;cursor:pointer;display:flex;justify-content:space-between;
  color:var(--navy);border-bottom:1px solid var(--line);
  list-style:none;
}
.archive-year > summary::-webkit-details-marker{display:none;}
.archive-year[open] > summary::after{content:"\2013";}
.archive-year > summary::after{content:"+";color:var(--sand);font-size:15px;}
.month-list{padding:6px 4px 10px 4px;}
.month-list a{
  display:flex;justify-content:space-between;font-size:13px;color:var(--text-body);
  padding:6px 4px;border-radius:4px;
}
.month-list a:hover{background:var(--off-white);color:var(--navy);}
.month-list a span{color:#B0B5BE;}

.newsletter-box{
  background:var(--navy);color:#fff;border-radius:8px;padding:22px;
}
.newsletter-box h4{
  font-family:'Playfair Display',serif;font-size:17px;margin-bottom:8px;
}
.newsletter-box p{font-size:12.5px;color:#C7CCD6;margin-bottom:14px;line-height:1.5;}
.newsletter-box input[type="email"]{
  width:100%;padding:9px 12px;border-radius:5px;border:none;
  font-size:13px;margin-bottom:10px;font-family:'Inter',sans-serif;
}
.newsletter-box button,
.newsletter-box input[type="submit"]{
  width:100%;padding:10px;border-radius:5px;border:none;
  background:var(--sand);color:var(--navy);font-family:'Tenor Sans',sans-serif;
  font-size:13px;letter-spacing:.04em;cursor:pointer;
}
.newsletter-box .lp-note{font-size:11px;color:#8890A0;margin-top:8px;}
/* Let a Hostinger Reach block/widget placed in this widget area inherit sane spacing */
#newsletter-widget-area .widget{margin-bottom:0;}

/* ===== Footer ===== */
footer.site-footer{background:var(--navy);color:#C7CCD6;margin-top:40px;}
.footer-inner{
  max-width:1240px;margin:0 auto;padding:48px 24px 24px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;
}
.footer-inner h5{
  font-family:'Tenor Sans',sans-serif;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sand);margin-bottom:16px;
}
.footer-inner ul{list-style:none;}
.footer-inner li{margin-bottom:10px;font-size:13.5px;}
.footer-inner li a:hover{color:#fff;}
.footer-brand .word{
  font-family:'Playfair Display',serif;font-weight:600;font-size:22px;color:#fff;
}
.footer-brand p{font-size:13px;color:#9AA1AF;margin-top:10px;line-height:1.6;max-width:280px;}
.footer-follow{display:flex;gap:10px;}
.footer-follow .social-icon{border-color:rgba(255,255,255,.2);color:#C7CCD6;}
.footer-follow .social-icon:hover{background:var(--sand);color:var(--navy);border-color:var(--sand);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;padding:18px;font-size:12px;color:#8890A0;
  font-family:'Tenor Sans',sans-serif;
}

/* ===== Generic content pages (single/page/category/404) ===== */
.entry-header{max-width:820px;margin:0 auto 24px;}
.entry-header .cat-label{display:block;margin-bottom:10px;}
.entry-title{font-family:'Playfair Display',serif;font-weight:600;font-size:34px;line-height:1.25;}
.entry-content{max-width:820px;margin:0 auto;font-size:15.5px;line-height:1.75;color:var(--text-body);}
.entry-content p{margin-bottom:18px;}
.entry-content h2,.entry-content h3{font-family:'Playfair Display',serif;color:var(--navy);margin:28px 0 12px;}
.entry-content img{border-radius:8px;margin:18px 0;}
.entry-content a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--sand);}
.entry-thumb{max-width:820px;margin:0 auto 28px;border-radius:8px;overflow:hidden;}
.archive-title{font-family:'Playfair Display',serif;font-weight:600;font-size:28px;margin-bottom:6px;}
.archive-description{color:var(--text-body);font-size:14px;margin-bottom:20px;}
.pagination{display:flex;gap:10px;margin-top:24px;font-family:'Tenor Sans',sans-serif;font-size:13px;}
.pagination a,.pagination span{padding:8px 14px;border:1px solid var(--line);border-radius:5px;}
.pagination .current{background:var(--navy);color:#fff;border-color:var(--navy);}

@media(max-width:900px){
  .header-inner{flex-wrap:wrap;}
  nav.primary-nav{order:3;width:100%;justify-content:flex-start;}
  .primary-menu{flex-direction:column;align-items:stretch;width:100%;gap:0;}
  .primary-menu > .menu-item{width:100%;border-bottom:1px solid var(--line);}
  .primary-menu > .menu-item > a{padding:14px 8px;min-height:44px;justify-content:space-between;}
  /* On mobile the dropdown opens in place (navigation.js toggles this class)
     instead of the desktop hover flyout. */
  .primary-menu .sub-menu{
    position:static;transform:none;box-shadow:none;border:none;background:transparent;
    display:none;grid-template-columns:1fr;min-width:0;padding:0 0 8px 14px;
  }
  .primary-menu > .menu-item-has-children.sub-menu-open > .sub-menu{display:grid;}
  .primary-menu > .menu-item-has-children.sub-menu-open > a::after{transform:rotate(180deg);}
  .hero-grid{grid-template-columns:1fr;}
  .content-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .post-row{flex-direction:column;}
  .thumb{width:100%;height:180px;}
}

/* Small phones (iPhone SE/Mini, most Android phones in portrait): trim the
   hero and headings further so there's less scrolling before the fold,
   without changing the layout structure set above. */
@media(max-width:480px){
  .hero-card{min-height:300px;}
  .hero-card.small{min-height:160px;}
  .hero-card h2{font-size:22px;}
  .hero-card.small h2{font-size:17px;}
  .entry-title{font-size:26px;}
  .archive-title{font-size:23px;}
  .section-wrap{padding:28px 16px;}
  .utility-inner,.header-inner,.footer-inner{padding-left:16px;padding-right:16px;}
  .footer-inner{grid-template-columns:1fr;gap:28px;}
}