/*
Theme Name: Go With Flow
Theme URI: https://gowithflow.com/
Author: Go With Flow Subscriptions
Description: Marketing theme for Go With Flow Subscriptions, converted from the static HTML site. Includes a designed front page, Features, Pricing, About and Contact page templates, a legal page template, a filterable blog, and one-click demo setup on activation.
Version: 1.1.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: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: go-with-flow
Tags: one-column, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*
 * The design lives in assets/css/style.css (unchanged from the HTML site).
 * This file only adds styles WordPress output needs.
 */

/* Admin bar offset for the sticky header */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* Core WordPress classes */
.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; }
.screen-reader-text:focus { background: #fff; clip: auto !important; clip-path: none; display: block; height: auto; left: 16px; top: 16px; padding: 8px 14px; width: auto; z-index: 100000; }
.alignleft { float: left; margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption, figure.wp-block-image { max-width: 100%; margin: 1.6em 0; }
.wp-caption-text, .wp-element-caption { font-size: .9rem; color: var(--muted); margin-top: 8px; }
.prose img { border-radius: 8px; }
.prose figure { margin: 1.6em 0; }
.prose pre { background: var(--tint); padding: 16px 20px; border-radius: 8px; overflow-x: auto; font-size: .92rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }

/* Customizer logo sizing */
.brand img.logo { height: 38px; width: auto; }
.footer-logo img.logo { height: 30px; width: auto; }

/* Card image fallback when a post has no featured image */
.post .thumb-fallback, .featured-post .thumb-fallback {
  display: block; width: 100%; aspect-ratio: 3/2; border-radius: 8px; margin-bottom: 18px;
  background: var(--grad); position: relative; overflow: hidden;
}
.featured-post .thumb-fallback { border-radius: 10px; margin-bottom: 0; }
.thumb-fallback::after {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 220'%3E%3Cpath d='M0 80c70-60 140-60 210 0s140 60 210 0M0 150c70-60 140-60 210 0s140 60 210 0' fill='none' stroke='white' stroke-opacity='.25' stroke-width='18' stroke-linecap='round'/%3E%3C/svg%3E") center/80% no-repeat;
}

/* Category filters rendered as links (same look as the tab buttons) */
a.filter { text-decoration: none; display: inline-block; }
a.filter:hover { color: var(--ink); }
a.filter[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blue); }

/* Pagination */
.gwf-pagination { margin-top: 56px; }
.gwf-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gwf-pagination a, .gwf-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); text-decoration: none; font-weight: 500; }
.gwf-pagination a:hover { border-color: var(--ink); }
.gwf-pagination .current { background: var(--blue); border-color: var(--blue); color: #fff; }
.gwf-pagination .dots { border: 0; background: none; }

/* Tags + comments on single posts */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.post-tags a { font-size: .88rem; padding: 4px 10px; border-radius: 6px; background: var(--tint); text-decoration: none; }
.comments-area { max-width: 72ch; padding-bottom: 64px; }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 24px; }
.comment-body { padding: 20px 0; border-bottom: 1px solid var(--line); }
.comment-meta { font-size: .9rem; color: var(--muted); }
.comment-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea,
.search-form input[type="search"] { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; background: #fff; color: var(--ink); }
.comment-form .submit { background: var(--blue); color: #fff; border: 0; border-radius: 8px; min-height: 46px; padding: 11px 20px; font: 600 1rem var(--body); cursor: pointer; }

/* Search form */
.search-form { display: flex; gap: 10px; max-width: 520px; margin-top: 24px; }
.search-form .search-submit { flex: none; background: var(--blue); color: #fff; border: 0; border-radius: 8px; padding: 0 18px; font: 600 1rem var(--body); cursor: pointer; }

/* Empty states */
.empty-state { padding: 24px 0 8px; }