/*
Theme Name: silentsound Modern
Theme URI: https://www.silentsound.net
Author: Yoann R.
Description: 2026 redesign of the silentsound.net theme.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: silentsound-2
*/

/* -----------------------------------------------------------
   Design tokens
----------------------------------------------------------- */
:root{
  --c-bg:#FFFFFF;
  --c-text:#333333;
  --c-off-white:#F4F4F9;
  --c-ink:#221d33;

  --c-mono-square:#A63D40;
  --c-topbar:#2B4162;
  --c-top-border:#E9B872;
  --c-accent:#A63D40;
  --c-accent-hover:#863234;

  --c-muted:#7a7a7a;
  --c-border-soft:#cbcece;
  --c-rule:#e2e2e2;
  --c-photo-bg:#e7e5e1;
  --c-photo-fg:#9a968f;
  --c-author:#677a3e;

  --c-tech:#99b0d2;
  --c-tech-text:#221d33;
  --c-management:#d3ddbd;
  --c-management-text:#221d33;
  --c-travel:#f6e2c7;
  --c-travel-text:#221d33;
  --c-cycling:#e1adaf;
  --c-cycling-text:#221d33;
  --c-house:#c1d4dd;
  --c-house-text:#221d33;
  --c-default-pill:#dfd7e0;
  --c-default-pill-text:#221d33;
	
  --f-logo:'Montserrat', sans-serif;
  --f-heading:'Raleway', sans-serif;
  --f-body:'EB Garamond', Georgia, serif;

  --top-border-h:7px;
  --topbar-h-desktop:53px;
  --topbar-h-mobile:32px;

  --logo-w-desktop:66px;
  --logo-w-mobile:47px;
  --logo-drop-desktop:6px;
  --logo-h-desktop:calc(var(--top-border-h) + var(--topbar-h-desktop) + var(--logo-drop-desktop));
  --logo-h-mobile:45px;
  --logo-font-desktop:22px;
  --logo-font-mobile:16px;

  --content-max:1024px;
  --reading-max:1024px;

  --bp-mobile:680px;
}

/* -----------------------------------------------------------
   Reset / base
----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.55;
}
img{max-width:100%;height:auto;display:block}
a{border-bottom: 1px dotted var(--c-border-soft);color:var(--c-accent);text-decoration:none}
a:hover,a:focus{border-bottom: 1px dotted var(--c-accent-hover);color:var(--c-accent-hover)}
h1,h2,h3,h4,h5,h6{font-family:var(--f-heading);font-weight:700;color:var(--c-ink);margin:0}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
button{font-family:inherit}
.screen-reader-text{
  position:absolute!important;
  width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* -----------------------------------------------------------
   Top border + sticky top bar / logo / nav / search / hamburger
----------------------------------------------------------- */
.site-topbar-wrap{
  position:sticky;
  top:0;
  z-index:20;
}

.site-top-border{
  height:var(--top-border-h);
  background:var(--c-top-border);
}

.site-topbar{
  position:relative;
  z-index:2;
  background:var(--c-topbar);
  height:var(--topbar-h-desktop);
  display:flex;
  align-items:center;
  padding:0 24px 0 0;
}

.site-logo{
  position:absolute;
  left:22px;
  top:0;
  width:var(--logo-w-desktop);
  height:var(--logo-h-desktop);
  background:var(--c-mono-square);
  color:var(--c-off-white);
  font-family:var(--f-logo);
  font-weight:600;
  font-size:var(--logo-font-desktop);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:3px;
  box-shadow:0 3px 8px rgba(0,0,0,.2);
  text-decoration:none;
  z-index:21;
}
.site-logo:hover{color:var(--c-off-white);text-decoration:none}

.site-nav-wrap{
  display:flex;
  align-items:center;
  gap:26px;
  margin-left:auto;
}
.site-nav{display:flex;align-items:center;gap:26px}
.site-nav ul{display:flex;align-items:center;gap:22px;list-style:none;flex-wrap:wrap}
.site-nav a{
  font-family:var(--f-heading);
  font-weight:700;
  font-size:13px;
  color:var(--c-off-white);
  text-transform:uppercase;
  letter-spacing:.5px;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.site-nav a:hover,.site-nav a:focus{text-decoration:none;opacity:.8}
.site-nav .current-menu-item>a,
.site-nav a.is-current{
  border-bottom:2px solid var(--c-off-white);
}

/* Search trigger matches the nav-link typography; the field expands
   inline in the bar rather than dropping down below it. */
.search-toggle-form{display:flex;align-items:center}
.nav-search-trigger{
  display:flex;
  align-items:center;
  gap:5px;
  background:transparent;
  border:0;
  color:var(--c-off-white);
  font-family:var(--f-heading);
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.5px;
  cursor:pointer;
  padding:3px 0;
  white-space:nowrap;
}
.nav-search-trigger:hover{opacity:.8}
.search-icon{font-size:24px;line-height:1}

.search-expand{
  display:flex;
  align-items:center;
  max-width:0;
  overflow:hidden;
  opacity:0;
  transition:max-width .25s ease, opacity .2s ease;
}
.search-expand.is-open{max-width:220px;opacity:1}
.search-toggle-btn.is-open{display:none}

.site-search-form{
  display:flex;
  align-items:center;
  gap:5px;
  border:1px solid rgba(39,33,60,.25);
  border-radius:14px;
  background:var(--c-off-white);
  padding:3px 6px 3px 12px;
  white-space:nowrap;
}
.site-search-form input[type="search"]{
  border:0;background:transparent;font-family:var(--f-heading);font-size:13px;
  color:var(--c-ink);width:150px;outline:0;
}
.site-search-form input[type="search"]::placeholder{
  font-family:var(--f-heading);color:var(--c-muted);
  opacity:1; /* Firefox lowers placeholder opacity by default */
}
.site-search-form button{
  background:transparent;border:0;color:var(--c-ink);cursor:pointer;font-size:13px;padding:0;
}

/* Hamburger toggle (mobile only) */
.nav-hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:26px;
  height:26px;
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
}
.hamburger-bar{
  display:block;
  height:2px;
  width:100%;
  background:var(--c-off-white);
  border-radius:1px;
}

/* Mobile dropdown panel (hidden on desktop) */
.mobile-nav-panel{
  display:none;
}

/* -----------------------------------------------------------
   Page shell
----------------------------------------------------------- */
.site-main{padding:36px 24px 56px}
.content-col{max-width:var(--content-max);margin:0 auto;padding:0 36px}
.reading-col{max-width:var(--reading-max);margin:0 auto;padding:0 24px}

/* -----------------------------------------------------------
   Category pills
----------------------------------------------------------- */
.pill{
  font-family:var(--f-heading);
  font-weight:600;
  font-size:10.5px;
  text-transform:uppercase;
  padding:2px 9px;
  border-radius:10px;
  display:inline-block;
  letter-spacing:.3px;
  background:var(--c-default-pill);
  color:var(--c-default-pill-text);
}
.pill:hover{text-decoration:none;opacity:.85}
.pill-tech{background:var(--c-tech);color:var(--c-tech-text)}
.pill-management{background:var(--c-management);color:var(--c-management-text)}
.pill-travel{background:var(--c-travel);color:var(--c-travel-text)}
.pill-cycling{background:var(--c-cycling);color:var(--c-cycling-text)}
.pill-house{background:var(--c-house);color:var(--c-house-text)}

/* Dates / meta lines — title font, uppercase, light weight */
.meta{
  font-family:var(--f-heading);
  font-weight:300;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:11px;
  color:var(--c-muted);
}
.meta a{border: none;color:var(--c-muted)}
.meta a:hover,.meta a:focus{border: none;color:var(--c-ink)}

/* Comment counts */
.comment-count a{border: none;color:var(--c-accent)}
.comment-count a:hover,.comment-count a:focus{border: none;color:var(--c-accent-hover)}

.photo-placeholder{
  background:var(--c-photo-bg);
  color:var(--c-photo-fg);
  font-family:system-ui,sans-serif;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:2px;
  min-height:120px;
}

/* -----------------------------------------------------------
   Post list (home / index)
----------------------------------------------------------- */
.post-list{display:flex;flex-direction:column;gap:30px}
.post-entry{display:flex;gap:22px}
.post-entry-meta{width:110px;flex:none}
.post-entry-meta .meta{margin-top:6px}
.post-entry-body{min-width:0;flex:1}
.post-entry-title{font-size:21px}
.post-entry-title a{border:none;color:var(--c-ink);text-decoration:none}
.post-entry-title a:hover,.post-entry-title a:focus{border:none;color:var(--c-accent);text-decoration:none}
.post-entry-excerpt{font-size:16px;margin:8px 0 0;color:var(--c-text)}
.post-entry-excerpt p{margin:0 0 .6em}
.post-entry-excerpt p:last-child{margin-bottom:0}
.post-entry-lead-photo{width:100%;margin-bottom:12px}
.post-entry-lead-photo img{width:100%;height:auto;border-radius:2px}

.no-results{padding:20px 0}

/* -----------------------------------------------------------
   Pagination
----------------------------------------------------------- */
.site-pagination{
  display:flex;justify-content:space-between;gap:16px;margin-top:44px;
  font-family:var(--f-heading);font-weight:700;font-size:13px;
}
.site-pagination a{border-bottom:2px solid transparent}
.site-pagination a:hover,.site-pagination a:focus{border-bottom-color:var(--c-accent)}

/* -----------------------------------------------------------
   Archive
----------------------------------------------------------- */
.archive-title{font-size:26px;margin-bottom:24px}
.archive-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;row-gap:24px}
.archive-year-heading{font-size:22px;color:var(--c-muted);margin:0 0 12px}
.archive-entries{display:flex;flex-direction:column;gap:16px}
.archive-entry-title{
  border:none;font-size:18px;font-weight:600;font-family:var(--f-body);color:var(--c-ink)
}
.archive-entry-title:hover,.archive-entry-title:focus{border:none;color:var(--c-accent)}
.archive-entry-meta{display:flex;gap:10px;align-items:center;margin-top:5px}

/* -----------------------------------------------------------
   Single post
----------------------------------------------------------- */
.single-post-header{margin-bottom:6px}
.single-post-title{font-size:28px;margin-top:12px}
.single-post-meta{margin-top:8px}
.single-post-content{margin-top:22px;font-size:17px;line-height:1.55}
.single-post-content p{margin:0 0 1em}
.single-post-content p+p{margin-top:14px}

.single-post-content ul,
.single-post-content ol{
  margin:0 0 1em;
  padding-left:1.4em;
}
.single-post-content ul{list-style:disc}
.single-post-content ol{list-style:decimal}
.single-post-content li{margin-bottom:.4em}
.single-post-content li:last-child{margin-bottom:0}
.single-post-content li > ul,
.single-post-content li > ol{margin-top:.4em}

.single-post-content blockquote{
  border-left:3px solid var(--c-accent);
  padding-left:16px;
  margin:22px 0;
  font-style:italic;
  color:#555;
  font-size:17px;
}
.single-post-content blockquote p{margin:0}

/* Photo-essay image handling */
.single-post-content figure{margin:20px 0 0}
.single-post-content .wp-block-image img,
.single-post-content figure img{width:100%;border-radius:2px}
.single-post-content .wp-caption-text,
.single-post-content figcaption{
  font-family:var(--f-body);
  font-style:italic;
  font-size:12.5px;
  color:var(--c-muted);
  margin-top:6px;
  text-align:center;
}
.single-post-content .wp-block-gallery,
.single-post-content .gallery{
  display:grid;
  gap:14px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}
.single-post-content .wp-block-gallery.columns-2,
.single-post-content .gallery-columns-2{grid-template-columns:1fr 1fr}
.single-post-content .wp-block-gallery.columns-3,
.single-post-content .gallery-columns-3{grid-template-columns:1fr 1fr 1fr}
.single-post-content .gallery-item{margin:0;list-style:none}
.single-post-content .gallery-item img{width:100%;border-radius:2px}

/* -----------------------------------------------------------
   Comments
----------------------------------------------------------- */
.comments-area{
  border-top:1px solid var(--c-rule);
  margin-top:36px;
  padding-top:20px;
}
.comments-title{font-size:20px}
.comment-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:28px}
.comment-list .children{list-style:none;margin:28px 0 0 24px;padding:0;display:flex;flex-direction:column;gap:28px}
.comment-inner{display:flex;gap:12px}
.comment-avatar{flex:none}
.comment-avatar img{width:38px;height:38px;border-radius:6px;display:block}
.comment-body{flex:1;min-width:0}
.comment-pingback-label{font-family:var(--f-body);font-weight:400;font-size:13px;color:var(--c-muted);margin-left:4px}
.comment-author{font-family:var(--f-heading);font-weight:700;font-size:15px;color:var(--c-ink)}
.comment-author a{color:var(--c-ink);text-decoration:none}
.comment-author a:hover{color:var(--c-accent);text-decoration:underline}
.comment-item.bypostauthor .comment-author::after{
  content:"Author";
  display:inline-block;
  margin-left:4px;
  vertical-align:2px;
  font-family:var(--f-heading);
  font-weight:500;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.3px;
  padding:2px 5px;
  border-radius:5px;
  background:var(--c-author);
  color:var(--c-off-white);
}
.comment-text{font-size:15px;margin:4px 0 0}
.comment-text ul,.comment-text ol{padding-left:1.4em;margin:0 0 .8em}
.comment-actions{display:flex;align-items:center;gap:8px;margin-top:-5px}
.comment-reply-link,.comment-edit-link{font-family:var(--f-heading);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.comment-reply-link a,.comment-edit-link a{color:var(--c-muted)}
.comment-reply-link a:hover,.comment-edit-link a:hover{color:var(--c-ink)}

.comment-respond{margin-top:28px}
.comment-reply-title{font-size:20px}
.comment-form{margin-top:14px;display:flex;flex-direction:column;gap:12px;max-width:460px}
.comment-form label{font-family:var(--f-heading);font-weight:700;font-size:12px;display:block;margin-bottom:4px}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;
  border:1px solid rgba(39,33,60,.3);
  border-radius:4px;
  padding:8px 10px;
  font-family:var(--f-body);
  font-size:15px;
  color:var(--c-text);
}
.comment-form textarea{min-height:110px;resize:vertical}
.comment-form-cookies-consent{display:flex;align-items:flex-start;gap:6px}
.comment-form-cookies-consent input[type="checkbox"]{margin-top:3px;flex:none}
.comment-form-cookies-consent label{display:inline;font-weight:400;margin-bottom:0}
.comment-form .form-submit{margin-top:2px}
.comment-form input[type="submit"]{
  background:var(--c-accent);
  color:var(--c-off-white);
  border:0;
  border-radius:14px;
  padding:8px 20px;
  font-family:var(--f-heading);
  font-weight:700;
  font-size:13px;
  cursor:pointer;
}
.comment-form input[type="submit"]:hover{opacity:.88}
.comment-notes,.logged-in-as{font-family:var(--f-heading);font-size:13px;color:var(--c-muted);margin-bottom:0}

/* -----------------------------------------------------------
   Search results
----------------------------------------------------------- */
.search-results-title{font-size:26px;margin-bottom:24px}
.search-form-page{margin-bottom:32px}
.search-form-page .site-search-form{
  width:100%;
  padding:8px 14px;
}
.search-form-page .site-search-form button{
  order:-1;
}
.search-form-page .site-search-form input[type="search"]{
  flex:1 1 auto;
  width:auto;
  font-size:15px;
}

/* -----------------------------------------------------------
   Static page (About, etc.)
----------------------------------------------------------- */
.page-title{font-size:26px}
.page-content{margin-top:20px;font-size:17px}
.page-content p+p{margin-top:14px}
.page-content ul,.page-content ol{margin:0 0 1em;padding-left:1.4em}
.page-content li{margin-bottom:.4em}
.page-content li:last-child{margin-bottom:0}

/* -----------------------------------------------------------
   404
----------------------------------------------------------- */
.error-404 .page-title{font-size:26px}
.error-404 .page-content{margin-top:16px}

/* -----------------------------------------------------------
   Footer
----------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--c-rule);
  margin-top:56px;
  padding:24px;
  text-align:center;
}
.site-footer .meta{justify-content:center}
.site-footer a{color:var(--c-muted)}
.site-footer a:hover{color:var(--c-ink)}

/* -----------------------------------------------------------
   Mobile (<= 680px)
----------------------------------------------------------- */
@media (max-width:680px){
  .site-topbar{
    height:var(--topbar-h-mobile);
    padding:0 12px 0 0;
  }
  .site-logo{
    width:var(--logo-w-mobile);
    height:var(--logo-h-mobile);
    font-size:var(--logo-font-mobile);
  }

  /* Collapse nav + search into the hamburger panel */
  .site-nav{display:none}
  .search-toggle-form{display:none}
  .nav-hamburger{display:flex}
  .site-nav-wrap{margin-left:auto;gap:14px}

  .mobile-nav-panel{
    display:none;
    background:var(--c-topbar);
    padding:18px 20px 24px;
  }
  .mobile-nav-panel.is-open{display:block}
  .mobile-nav ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .mobile-nav a{
    font-family:var(--f-heading);
    font-weight:700;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--c-off-white);
    border-bottom:2px solid transparent;
    padding-bottom:2px;
  }
  .mobile-nav .current-menu-item>a,
  .mobile-nav a.is-current{border-bottom-color:var(--c-off-white)}
  .mobile-search{margin-top:22px}
  .mobile-search .site-search-form{background:var(--c-off-white)}
  .mobile-search input[type="search"]{width:100%}

  .site-main{padding:22px 0 40px}
  .content-col{padding:0 18px}
  .reading-col{padding:0 20px}

  .post-list{gap:20px}
  .post-entry{flex-direction:column;gap:6px}
  .post-entry-meta{width:auto;display:flex;align-items:center;gap:8px}
  .post-entry-meta .meta{margin-top:0}
  .post-entry-title{font-size:16px;margin-top:6px}
  .post-entry-excerpt{font-size:14px}

  .archive-title{font-size:19px;margin-bottom:14px}
  .archive-grid{grid-template-columns:1fr;row-gap:16px}
  .archive-year-heading{font-size:16px;margin:0 0 10px}
  .archive-entries{gap:12px}
  .archive-entry-title{font-size:14px}
  .archive-entry-meta{gap:6px}

  .single-post-title{font-size:19px}
  .single-post-content{font-size:15px}
  .single-post-content blockquote{font-size:15px;padding-left:12px;margin:16px 0}

  .comments-title{font-size:13px}
  .comment-text{font-size:13.5px}

  .page-title{font-size:19px}
  .page-content{font-size:15px}

  .site-main .content-col.reading-col{padding:0 20px}
}