/*
Theme Name: SayFlick
Theme URI: https://sayflick.com/blog/
Description: Minimal theme for the SayFlick blog at sayflick.com/blog, matching the SayFlick app. Source: SayFlick repo, wordpress/sayflick-theme.
Version: 1.1.1
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: sayflick
*/

:root {
  --sf-text: #0f172a;        /* slate-900 */
  --sf-body: #334155;        /* slate-700 */
  --sf-muted: #64748b;       /* slate-500 */
  --sf-line: #e2e8f0;        /* slate-200 */
  --sf-brand: #ea580c;       /* orange-600, the app's brand links */
  --sf-brand-dark: #c2410c;  /* orange-700 */
  --sf-blue: #1d4ed8;        /* blue-700 */
  --sf-card: rgba(255, 255, 255, 0.85);
  --sf-radius: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sf-body);
  /* Same soft background as the app: from-blue-50 via-purple-50 to-pink-50 */
  background: linear-gradient(to bottom right, #eff6ff, #faf5ff, #fdf2f8) fixed;
}

img, video, iframe { max-width: 100%; height: auto; }

a { color: var(--sf-brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: .5rem; left: .5rem; z-index: 100; width: auto; height: auto; clip: auto;
  padding: .5rem 1rem; background: #fff; border-radius: .5rem;
}

.sf-wrap { max-width: 56rem; margin: 0 auto; padding: 1rem; }
.sf-narrow { max-width: 42rem; margin: 0 auto; }

/* Header: same as the app's (white bar, logo + orange "SayFlick", main pages on the right) */
.sf-topbar { background: rgba(255, 255, 255, .8); border-bottom: 1px solid #f3f4f6; }
.sf-topbar-inner { max-width: 56rem; margin: 0 auto; padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.sf-brand { display: inline-flex; align-items: center; gap: .75rem; font-size: 1.5rem; font-weight: 700; color: var(--sf-brand); }
.sf-brand:hover { text-decoration: none; }
.sf-brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 8px #eee; }
.sf-topbar nav { margin-inline-start: auto; }
.sf-nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; font-weight: 600; }
.sf-nav a { color: var(--sf-body); }
.sf-nav a:hover, .sf-nav a.is-current { color: var(--sf-brand); }
.sf-nav a.is-current { text-decoration: underline; text-underline-offset: 4px; }

/* Category chips + language switcher under the header */
.sf-subnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: .5rem 0 1.25rem; }
.sf-cats ul, .sf-langs ul { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; font-size: .8125rem; font-weight: 600; }
.sf-cats a { display: inline-block; padding: .25rem .75rem; border-radius: 9999px; background: rgba(255, 255, 255, .8); color: var(--sf-body); }
.sf-cats a:hover { text-decoration: none; color: var(--sf-brand); }
.sf-cats .current-cat > a { background: var(--sf-brand); color: #fff; }
.sf-langs a { color: var(--sf-muted); padding: .25rem .375rem; }
.sf-langs .current-lang a { color: var(--sf-brand); }
.sf-langs .no-translation a { opacity: .7; }

/* The app's live translator (iframe from /embed/translator) */
.sf-translator { margin: 0 0 2rem; }
.sf-translator iframe { display: block; width: 100%; height: 420px; border: 0; background: transparent; }

/* Cards */
.sf-card {
  background: var(--sf-card);
  border-radius: var(--sf-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  padding: 1.5rem;
}
@media (min-width: 640px) { .sf-card { padding: 2rem; } }

/* Post list */
.sf-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sf-list-item h2 { margin: 0 0 .25rem; font-size: 1.125rem; line-height: 1.4; color: var(--sf-text); }
.sf-list-item h2 a { color: inherit; }
.sf-list-item p { margin: 0; font-size: .9375rem; color: var(--sf-body); }
.sf-meta { font-size: .8125rem; color: var(--sf-muted); margin: 0 0 .5rem; }
.sf-page-title { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.3; color: var(--sf-text); }
.sf-archive-desc { margin: -.5rem 0 1rem; color: var(--sf-muted); }

/* Single post / page */
.sf-entry-title { margin: 0 0 .5rem; font-size: 1.625rem; line-height: 1.3; color: var(--sf-text); }
@media (min-width: 640px) { .sf-entry-title { font-size: 1.875rem; } }
.sf-entry-image { margin: 1rem 0; border-radius: .75rem; overflow: hidden; }
.sf-entry-image img { display: block; width: 100%; }
.sf-content { overflow-wrap: break-word; }
.sf-content > * { margin-top: 0; margin-bottom: 1rem; }
.sf-content h2 { margin-top: 2rem; font-size: 1.25rem; line-height: 1.4; color: var(--sf-text); }
.sf-content h3 { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.4; color: var(--sf-text); }
.sf-content h4, .sf-content h5, .sf-content h6 { margin-top: 1.25rem; font-size: 1rem; color: var(--sf-text); }
.sf-content ul, .sf-content ol { padding-inline-start: 1.5rem; }
.sf-content li { margin-bottom: .25rem; }
.sf-content blockquote { margin-inline: 0; padding: .25rem 0 .25rem 1rem; border-inline-start: 3px solid var(--sf-brand); color: var(--sf-text); }
.sf-content img { border-radius: .5rem; }
.sf-content table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.sf-content th, .sf-content td { padding: .5rem; border: 1px solid var(--sf-line); text-align: start; }
.sf-content pre, .sf-content code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .875rem; }
.sf-content pre { padding: 1rem; background: #f1f5f9; border-radius: .5rem; overflow-x: auto; }
.sf-content a { text-decoration: underline; text-underline-offset: 2px; }
.sf-content [dir="rtl"], .sf-rtl { direction: rtl; text-align: right; }

.sf-tags { display: flex; flex-wrap: wrap; gap: .375rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: .8125rem; }
.sf-tags a { display: inline-block; padding: .125rem .625rem; border-radius: 9999px; background: #fff7ed; color: var(--sf-brand-dark); }

.sf-post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--sf-line); font-size: .875rem; font-weight: 600; }

/* Pagination */
.sf-pagination { margin-top: 1.5rem; }
.sf-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .375rem; }
.sf-pagination .page-numbers { display: inline-block; min-width: 2.25rem; padding: .375rem .625rem; border-radius: .5rem; background: #fff; text-align: center; font-weight: 600; font-size: .875rem; }
.sf-pagination .page-numbers.current { background: var(--sf-brand); color: #fff; }

/* Search form */
.sf-search { display: flex; gap: .5rem; margin: 0 0 1.5rem; }
.sf-search input[type="search"] { flex: 1; min-width: 0; padding: .5rem .75rem; border: 1px solid var(--sf-line); border-radius: .5rem; font: inherit; background: #fff; }
.sf-search button, .sf-button { padding: .5rem 1rem; border: 0; border-radius: .5rem; background: var(--sf-brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* Footer: same as the app's */
.sf-footer { margin-top: 3rem; padding: 1.5rem 1rem; text-align: center; font-size: .75rem; color: #6b7280; background: rgba(255, 255, 255, .8); border-top: 1px solid #f3f4f6; }
.sf-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; margin-bottom: .5rem; }
.sf-footer a { color: #6b7280; }
.sf-footer a:hover { color: var(--sf-brand); }

/* Right-to-left pages (Urdu) */
.rtl .sf-content blockquote { border-inline-start-width: 3px; }

/* WordPress core classes */
.alignleft { float: left; margin: 0 1rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, figcaption { font-size: .8125rem; color: var(--sf-muted); text-align: center; }