@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/*
Theme Name: Seafront
Theme URI: http://lessmade.com/themes/less
Author: newperspectives.eu
Author URI: https://newperspectives.eu
Description: a core wordpress theme 
Version: 1.0r
License: GNU General Public License

*/
/*  variables - Change the look of your site simply.

-------------------------------------------------------------- */
:root {
  --color-primary: #007998;
  --color-primary-hover: #ededed;
  --color-text: #ededed;
  --color-text-dark: #404040;
  --color-text-medium: #565656;
  --color-text-light: #888;
  --color-background: #081a36;
  --color-border: #ddd;
  --color-code-bg: #eee;
  --color-highlight: #fff9c0;
  
  --font-body: "Spectral", serif;
  --font-heading: "Spectral", serif;
  --font-mono: Monaco, Consolas, "Andale Mono", monospace;
  
  --spacing-sm: 20px;
  --spacing-md: 40px;
  --spacing-lg: 80px;
  
  --max-width: 720px;
  --max-paragraph-width: 640px;
  --border-radius: 0px;
}

/* Modern Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }

/* Base */
body {
  background: var(--color-background);
  font-family: var(--font-body);
  font-size: 2.1rem;
  font-weight: 200;
  color: var(--color-text);
}

/* Typography */
p { 
  max-width: var(--max-paragraph-width);
  margin: 0 auto;
  padding: 0;
  line-height: 1.8;
  text-align: justify;
}

p:not(:first-of-type) {
  text-indent: 1em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-weight: 200;
  text-align: center;
  line-height: 1.2;
  margin: 1.6em 0 1em;
}

h1 { font-size: 4.8rem; }
h2 { font-size: 3.4rem; }
h3 { font-size: 2.8rem; }
h4 { font-size: 1.8rem; }


ul, ol { margin: 0 0 1.5em 3em; }
b, strong { font-weight: 700; }
em, i { font-style: italic; }

blockquote { 
  margin: 0 1.5em;
  font-style: italic;
}

code, kbd, pre { font-family: var(--font-mono); }

pre {
  background: var(--color-code-bg);
  padding: 1.6em;
  overflow-x: auto;
  border-radius: var(--border-radius);
  font-size: 1.5rem;
}

mark { 
  background: var(--color-highlight);
  padding: 0 0.2em;
}

hr {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: 1.5em 0;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.25s;
}

a:hover, a:focus { color: var(--color-primary-hover); }

/* Forms */
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0.5em;
  width: 100%;
}

input:focus, textarea:focus {
  color: var(--color-text-dark);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

textarea { resize: vertical; }

button,
input[type="button"],
input[type="submit"] {
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0.8em 1.5em;
  cursor: pointer;
  font-size: 1.4rem;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  opacity: 0.8;
}

/* Layout */
.container {
  max-width: var(--max-width);
  padding: var(--spacing-sm);
  margin: 0 auto;
}

/* Header */
header {
  padding: var(--spacing-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

header #brand h1 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--color-text-medium);
  text-transform: uppercase;
}

header #brand h1 a { color: inherit; }

header #brand h1 span {
  font-weight: 200;
  color: var(--color-text-light);
  text-transform: lowercase;
}


/* hamburger menu begin */
/* Hamburger container */

.hamburger-menu {
  padding-top: 10px;
  display: block;
  position: relative;
  float: right;
  width: 30px;
  height: 30px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.3s ease-in-out;
  z-index: 9999;
}

.hamburger-menu:hover {
  opacity: 0.9;
}

.hamburger-menu .bar {
  width: 100%;
  height: 2px;
  margin: 3px 0;
  background-color: #efefef;
  transition: all 0.3s ease-in-out;
}

.hamburger-menu.active .bar:first-child {
  transform: translateY(-5px) rotate(45deg);  /* Changed from 5px to 8px */
}

.hamburger-menu.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .bar:last-child {
  transform: translateY(5px) rotate(-45deg);  /* Changed from -5px to -8px */
}

/* -------------------------------------------------
   Overlay menu (hidden by default)
   ------------------------------------------------- */

/* ----- overlay base ----- */
.overlay-menu {
    position: fixed;
    inset: 0;
    background: var(--color-background);
    font-family: var(--font-body);
    font-size: 2.1rem;
    font-weight: 200;
    color: var(--color-text);
    display: flex;               /* keep flex so children stay centered */
    align-items: center;
    justify-content: center;
    z-index: 999;

    /* NEW: start hidden */
    opacity: 0;                  /* invisible initially */
    visibility: hidden;          /* removes it from tab order */
    transition: opacity 0.8s ease;   /* <-- slower fade (adjust time as you like) */
}

/* ----- when the menu is opened ----- */
.overlay-menu.open {
    opacity: 1;                  /* become fully visible */
    visibility: visible;         /* now reachable by keyboard/screen‑readers */
}

/* Container for the nav list */
.navigation-container {
    text-align: center;
}

/* Nav list styling */
.overlay-nav .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.overlay-nav .menu li {
    margin: 1rem 0;
}
.overlay-nav .menu a {
    font-size: 2rem;
    color: #fff;
    transition: color .2s;
}
.overlay-nav .menu a:hover {
    color: #ffd700;
}

/* -------------------------------------------------
   Animation for the hamburger → close (X) icon
   ------------------------------------------------- */
.hamburger-active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger-active .bar:nth-child(2) { opacity: 0; }
.hamburger-active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* -------------------------------------------------
   Fade‑in/out of the whole page (optional)
   ------------------------------------------------- */
#fader {
    position: fixed;
    inset: 0;
    background: #000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s;
}
.fade-in  { opacity: 1; }
.fade-out { opacity: 0; }


/* hamburger menu end */



header nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1.5em;
  font-size: 1.4rem;
}

header nav a { color: var(--color-text-light); }

/* Articles */
article {
  padding-bottom: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

article .title {
  color: var(--color-text);
  font-weight: 200;
  margin-bottom: 0.5em;
}

article .title a { color: inherit; }
article .title a:hover { color: var(--color-primary); }

article .post-meta {
  margin-bottom: var(--spacing-md);
  font-size: 1.4rem;
  color: var(--color-text-light);
}

article .the-content a { font-weight: 700; }

article .meta {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: var(--spacing-sm);
}

article .post-categories {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1em;
}

/* Pages */
.page article { border-bottom: none; }


.the-content p {
}

/* REVEAL EFFECTS */



/* --- THE GRADUAL FOG LENS --- */
.fog-lens {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* 1. INCREASE HEIGHT: A taller lens (50% of screen) 
       allows for a much more gradual transition */
    height: 50vh; 
    
    z-index: 500;
    pointer-events: none;
    
    /* 2. HEAVY BLUR: We start with a strong blur */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    /* 3. COLOR GRADIENT: 
       Bottom is 100% your background color.
       Top is 0% (transparent). 
       We add a stop at 50% to make the fade smoother. */
    background: linear-gradient(
        to bottom, 
        rgba(8, 26, 54, 0) 0%,
        rgba(8, 26, 54, 0.2) 30%,
        rgba(8, 26, 54, 0.7) 70%,
        rgba(8, 26, 54, 1) 100%
    );

    /* 4. THE MASTER GRADIENT MASK: 
       This is what makes the BLUR fade gradually.
       Instead of a simple 2-point gradient, we use a 'Curve'. 
       This removes the "hard cut" at the top. */
    -webkit-mask-image: linear-gradient(
        to top, 
        rgba(0,0,0,1) 0%,      /* Full strength at bottom */
        rgba(0,0,0,0.8) 40%,   /* Still strong nearly halfway up */
        rgba(0,0,0,0.3) 70%,   /* Fading out significantly */
        rgba(0,0,0,0) 100%     /* Completely gone at the very top */
    );
    mask-image: linear-gradient(
        to top, 
        rgba(0,0,0,1) 0%, 
        rgba(0,0,0,0.8) 40%, 
        rgba(0,0,0,0.3) 70%, 
        rgba(0,0,0,0) 100%
    );
}


/* Reveal images */

/* Initial hidden state - set by JavaScript */
img:not(.no-reveal) {
    margin: 1em 0;
    transition: opacity 1s ease-in-out, filter 1s ease-in-out;
}

/* Initial state when JavaScript hides them */
img:not(.no-reveal)[style*="opacity: 0"] {
    opacity: 0;
    filter: blur(10px);
}

/* Revealed state */
img:not(.no-reveal)[style*="opacity: 0.9"] {
    opacity: 0.9;
    filter: blur(0);
}

/* No-reveal images - always fully visible */
img.no-reveal {
    opacity: 1;
    filter: none;
    transition: none;
}

/* End of Reveal images */

    .spacer { height: 50vh; }

/* Pagination */
#pagination {
  margin-bottom: var(--spacing-md);
  display: flex;
  justify-content: space-between;
}

/* Comments */
.commentlist {
  list-style: none;
  padding: 0;
}

.commentlist .comment {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.commentlist .children {
  margin-top: var(--spacing-sm);
  margin-left: var(--spacing-md);
}

.comment-author .says { display: none; }

.comment-meta {
  font-size: 1.2rem;
  color: var(--color-text-light);
  margin-bottom: 1em;
}

/* Footer */
footer {
  text-align: center;
  padding: var(--spacing-md) 0;
  font-size: 1.2rem;
  color: var(--color-text-light);
}

/* Utilities */
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { display: block; margin: 0 auto; }

/* Media Queries */
@media (max-width: 767px) {
  header { flex-direction: column; text-align: center; }
  header nav ul { justify-content: center; }
}