/*
Theme Name: The Flying Nomads
Theme URI: https://theflyingnomads.com
Author: The Flying Nomads
Author URI: https://theflyingnomads.com
Description: Custom travel blog theme for The Flying Nomads - Dubai-based flight attendants photographing the world.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flyingnomads
Tags: travel, blog, photography, custom-colors, custom-fonts
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — controlled by WordPress Customizer
   ============================================================ */
:root {
  --color-primary:        #D97B48;  /* Customizer: Primary Color */
  --color-primary-dark:   #c06a38;
  --color-dark:           #2d2d2d;  /* Customizer: Dark Color */
  --color-footer-bg:      #2d2d2d;  /* Customizer: Footer Background */
  --color-navbar-scrolled:#fafafa;  /* Customizer: Navbar Background */
  --color-body-bg:        #ffffff;  /* Customizer: Body Background */
  --color-text:           #2d2d2d;  /* Customizer: Body Text Color */
  --color-text-muted:     #666666;
  --color-border:         #e8e8e8;
  --color-section-bg:     #fafafa;

  --font-heading:         'Prata', serif;       /* Customizer: Heading Font */
  --font-body:            'Plus Jakarta Sans', sans-serif; /* Customizer: Body Font */
  --font-ui:              'Outfit', sans-serif; /* Customizer: UI Font */

  --container-width:      1200px;   /* Customizer: Container Width */
  --container-padding:    40px;

  --sidebar-posts:        3;        /* Customizer: Related Posts Count */
  --border-radius-card:   0;        /* Customizer: Card Border Radius */
  --border-radius-ui:     4px;      /* Customizer: UI Border Radius */
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-body-bg);
  line-height: 1.8;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-dark);
}
p { margin-bottom: 1.2em; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ============================================================
   POST TAGS — Option C: frosted glass + border
   ============================================================ */
.post-tag {
  font-family: var(--font-ui);
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(217,123,72,0.7);
  color: white;
  padding: 4px 11px;
  border-radius: var(--border-radius-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}
.post-tag.blue  { border-color: rgba(90,138,181,0.7); }
.post-tag.green { border-color: rgba(107,155,107,0.7); }
/* On white backgrounds */
.post-tag.solid {
  background: rgba(217,123,72,0.1);
  border-color: rgba(217,123,72,0.5);
  color: #b35e2a;
}
.post-tag.solid.blue  { background: rgba(90,138,181,0.1); border-color: rgba(90,138,181,0.5); color: #3a6a99; }
.post-tag.solid.green { background: rgba(107,155,107,0.1); border-color: rgba(107,155,107,0.5); color: #4a7a4a; }

/* ============================================================
   SECTION LABELS
   ============================================================ */
.section-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
  display: block;
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  color: var(--color-dark);
}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(217,123,72,0.3);
  border: none;
}
.scroll-to-top.visible { opacity: 1; visibility: visible; }
.scroll-to-top:hover { background: var(--color-primary-dark); transform: translateY(-3px); }
.scroll-to-top svg { width: 22px; height: 22px; stroke: white; fill: none; stroke-width: 2.5; }